Passing Form Field Values to PHP Page

[ridgedale]

I wonder if anyone could explain how I pass the field values in my request form to the PHP processor page. My external javascript file is as follows:


var sections = ["rqust", "sendr", "reset", "cancel"];

for (var i=0; i < sections.length; i++)
{
eval(sections[i] + '1 = new Image(100,22)');
eval(sections[i] + '1.src = "images/btn_' + sections[i] + '1.jpg"');
eval(sections[i] + '2 = new Image(100,22)');
eval(sections[i] + '2.src = "images/btn_' + sections[i] + '2.jpg"');
eval(sections[i] + '3 = new Image(100,22)');
eval(sections[i] + '3.src = "images/btn_' + sections[i] + '3.jpg"');
eval(sections[i] + '4 = new Image(64,22)');
eval(sections[i] + '4.src = "images/btn_' + sections[i] + '4.jpg"');
eval(sections[i] + '5 = new Image(64,22)');
eval(sections[i] + '5.src = "images/btn_' + sections[i] + '5.jpg"');
eval(sections[i] + '6 = new Image(64,22)');
eval(sections[i] + '6.src = "images/btn_' + sections[i] + '6.jpg"');
}

function switchImage(imgDocID,imgObjName)
{
document[imgDocID].src = eval(imgObjName + ".src");
}

function doSubmit()
{
window.location='<pathtoprocessor/page.php>'
}

function doReset()
{
self.focus();

document.TheForm.lastname.value = "";
document.TheForm.firstname.value = "";
document.TheForm.jobtitle.value = "";
document.TheForm.cmp_org.value = "";
document.TheForm.email.value = "";
}

When I click on the Submit button the error page is shown and seems to indicate that fields have not been filled in when, in fact, they have.

The code for the form is as follows:


<form action="sbx_rqustproc.php" name="TheForm" method="post" class="form">

<table border="0" cellspacing=0 cellpadding=0>

<tr>
<td class="firstlabel" width="130">Last Name:</td>
<td><input type="text" class="formtext" name="thelastname" id="lastname" size="20" />&nbsp;<span class="required">*</span></td>
</tr>
<tr>
<td class="label" width="130">First Name:</td>
<td class="formfield"><input type="text" class="formtext" name="thefirstname" id="firstname" size="20" />&nbsp;<span class="required">*</span></td>
</tr>
<tr>
<td class="label" width="130">Job Title:</td>
<td class="formfield"><input type="text" class="formtext" name="thejobtitle" id="jobtitle" size="20" />&nbsp;<span class="required">*</span></td>
</tr>
<tr>
<td class="label" width="130">Company/Org.:</td>
<td class="formfield"><input type="text" class="formtext" name="thecmp_org" id="cmp_org" size="20" />&nbsp;<span class="required">*</span></td>
</tr>
<tr>
<td class="label" width="130">Email Address:</td>
<td class="formfield"><input type="text" class="formtext" name="theemail" id="email" size="30" />&nbsp;<span class="required">*</span></td>
</tr>
<tr>
<td class="label" width="130">Talk Requested:</td>
<td class="formfield"><input type="text" class="formtalk" value="<?php echo $mytalk; ?>" name="thetalk" id="talk" size="20" readonly /></td>
</tr>
</table>

<table border="0" cellspacing=0 cellpadding=0>
<tr>
<div class="formbtns" align="center">

<!-- // Standard Submit Button Code
<input type="submit" name="Submit" value="Submit">
-->

<a href="javascript:doSubmit();"
onmouseover="switchImage('sendr', 'sendr5')"
onmouseout="switchImage('sendr', 'sendr6')">

<img src="images/btn_sendr4.jpg"
width="64" height="22" name="sendr" border="0" alt="Submit Button">

</a>

<a href="javascript:doReset();"
onmouseover="switchImage('reset', 'reset5')"
onmouseout="switchImage('reset', 'reset6')">

<img src="images/btn_reset4.jpg"
width="64" height="22" name="reset" border="0" alt="Reset Button">

</a>

<a href="javascript:history.back()"
onmouseover="switchImage('cancel', 'cancel5')"
onmouseout="switchImage('cancel', 'cancel6')">

<img src="images/btn_cancel4.jpg"
width="64" height="22" name="cancel" border="0" alt="Cancel Button">

</a>

</div></td>
</tr>
</table>

</form>

If I use the commented out Standard Submit Button Code the form is processed as expected but the submit button does not follow the rollover and style required.

Do I need to add some code to the doSubmit() function to send the form values to the php processor page? Can anyone explain what I need to do to make this work?

Any help with this would be appreciated. Thanks in advance.

[djr33]

action is set to a php page and method is set to post.
On that php page, you will get the values of all form elements in the $_POST array.

$_POST['thelastname'] will hold the value of your first field.

You just need to submit the form to the php script and nothing else.

[ridgedale]

Daniel,

Thankyou for your reply. As I am pretty well a novice in using javascript, could you please explain more clearly how I achieve what you are suggesting?

The form mechanism and the way the processing php page handles the $_POSTed form values works without any problem if I use a standard submit button. The only difference between using the standard submit button method and the method I am attempting is that the submit button in addition to $_POSTing the form values has to be a rollover as well.

If I turn the rollover off the S_POSTing of the form data works and if I don't make the button a submit button the rollovers works. I don't seem to be able to get both to work together.

Thanks again for your help.

[ridgedale]

Daniel,

What I have ended up with which appears to work without any problems is as follows:

javascript file:


var sections = ["rqust", "sendr", "reset", "cancel"];

for (var i=0; i < sections.length; i++)
{
eval(sections[i] + '1 = new Image(100,22)');
eval(sections[i] + '1.src = "images/btn_' + sections[i] + '1.jpg"');
eval(sections[i] + '2 = new Image(100,22)');
eval(sections[i] + '2.src = "images/btn_' + sections[i] + '2.jpg"');
eval(sections[i] + '3 = new Image(100,22)');
eval(sections[i] + '3.src = "images/btn_' + sections[i] + '3.jpg"');
eval(sections[i] + '4 = new Image(64,22)');
eval(sections[i] + '4.src = "images/btn_' + sections[i] + '4.jpg"');
eval(sections[i] + '5 = new Image(64,22)');
eval(sections[i] + '5.src = "images/btn_' + sections[i] + '5.jpg"');
eval(sections[i] + '6 = new Image(64,22)');
eval(sections[i] + '6.src = "images/btn_' + sections[i] + '6.jpg"');
}

function switchImage(imgDocID,imgObjName)
{
document[imgDocID].src = eval(imgObjName + ".src");
}

function doSubmit()
{
document.forms["TheForm"].submit();
}

function doReset()
{
self.focus();

document.TheForm.lastname.value = "";
document.TheForm.firstname.value = "";
document.TheForm.jobtitle.value = "";
document.TheForm.cmp_org.value = "";
document.TheForm.email.value = "";
}

html form:


<form action="sbx_rqustproc.php" name="TheForm" id="TheForm" method="post" class="form">

<table border="0" cellspacing=0 cellpadding=0>

<tr>
<td class="firstlabel" width="130">Last Name:</td>
<td><input type="text" class="formtext" name="lastname" id="lastname" size="20" />&nbsp;<span class="required">*</span></td>
</tr>
<tr>
<td class="label" width="130">First Name:</td>
<td class="formfield"><input type="text" class="formtext" name="firstname" id="firstname" size="20" />&nbsp;<span class="required">*</span></td>

</tr>
<tr>
<td class="label" width="130">Job Title:</td>
<td class="formfield"><input type="text" class="formtext" name="jobtitle" id="jobtitle" size="20" />&nbsp;<span class="required">*</span></td>
</tr>
<tr>
<td class="label" width="130">Company/Org.:</td>
<td class="formfield"><input type="text" class="formtext" name="cmp_org" id="cmp_org" size="20" />&nbsp;<span class="required">*</span></td>

</tr>
<tr>
<td class="label" width="130">Email Address:</td>
<td class="formfield"><input type="text" class="formtext" name="email" id="email" size="30" />&nbsp;<span class="required">*</span></td>
</tr>
<tr>
<td class="label" width="130">Talk Requested:</td>
<td class="formfield"><input type="text" class="formtalk" value="" name="talk" id="talk" size="20" readonly /></td>

</tr>
</table>

<table class="formbtns" align="center" border="0" cellspacing=0 cellpadding=0>
<tr>
<td>

<a href="javascript:doSubmit();"
onmouseover="switchImage('sendr', 'sendr5')"
onmouseout="switchImage('sendr', 'sendr6')">

<img src="images/btn_sendr4.jpg"
width="64" height="22" name="sendr" border="0" alt="Submit Button">

</a>

<a href="javascript:doReset();"
onmouseover="switchImage('reset', 'reset5')"
onmouseout="switchImage('reset', 'reset6')">

<img src="images/btn_reset4.jpg"
width="64" height="22" name="reset" border="0" alt="Reset Button">

</a>

<a href="javascript:history.back()"
onmouseover="switchImage('cancel', 'cancel5')"
onmouseout="switchImage('cancel', 'cancel6')">

<img src="images/btn_cancel4.jpg"
width="64" height="22" name="cancel" border="0" alt="Cancel Button">

</a>

</td>
</tr>
</table>


</form>

The thing I like about this solution (- provided I haven't fallen foul of any other issues!) is that the there is a consistency in the way the buttons are coded and handled. I hope this makes sense.

Thanks again for your help.

[boogyman]

mm consistency... what a novel idea :cool:

I know this is a bs post.. but i couldn't help the sarcasm inside me,