Hi all,
I have a form that has a Select/menu with 3 options, all options are text not numbers and I want the viewer to select one of these text options before trying to submit the form.
I've tried several different things but can't get it to validate on submit.
Would appreciate some advise please.
Cheers
Sudarshan Thiagarajan wrote:
Admin: Please block http://forums.adobe.com/people/allexx12
He's spamming the forum
Please use the Report button in the spam post. (Spam messages deleted.)
Hi,
I didn't bother you with the entire page code, this is the select list;
<select name="select1" size="1" class="freight-select-box" id="select1">
<option>south $15.00</option>
<option>pick up Free</option>
<option>north $10.00</option>
</select>
What I need is the viewer to select one of these freight options before being able to submit the form.
Thank you.
Add this to your page before the form code.
<script language="JavaScript">
<!--
function ValidateForm(form){
ErrorText= "";
if ( form.select1.selectedIndex == 0 ) { alert ( "Please select one freight option." ); return false; }
if (ErrorText= "") { form.submit() }
}
-->
</script>
I've created a new form ValidateForm and defining the form to verify if any of the index options have been selected. If the option your user selects is 0 (nothing), it will give an alert message 'Please select one frieght option'. If there is no error alert meaning if your user has selected at least one option, it will allow the user to submit your form.
This is the complete form code;
Please ignore all those non breaking spaces, need to apply some css there.
Thank you.
<form action="php-files/contact-form-handler.php" id="order" method="post" name="form">
<p> <span class="field-name-label"><a name="wineorder" id="wineorder"></a>Name:</span>
<input name="name" type="text" class="name-field" onblur="MM_validateForm('email','','RisEmail');return document.MM_returnValue" />
<span class="field-name-label">Street: </span>
<input name="address" type="text" class="address-one" id="address" />
</p>
<p><span class="field-name-label">Email:
</span>
<label>
<input name="email" type="text" class="email-field" id="email" onchange="MM_validateForm('email','','RisEmail');return document.MM_returnValue" />
<span class="field-name-label">Suburb: </span></label>
<input name="addresstwo" type="text" class="address-two" id="addresstwo" />
<br />
<br />
<span class="field-name-label">Phone: </span>
<input name="phone" type="text" class="phone-field" id="phone" />
<span class="field-name-label">Town/City:</span>
<input name="addressthree" type="text" class="address-three" id="addressthree" />
<table width="602" border="0">
<tr>
<td width="202" class="table-text">I am over 18 years of age </td>
<td width="139"><span id="sprycheckbox2">
<label>
<input name="ageconfirm" type="checkbox" id="ageconfirm" value="Yes I am over 18 years of age" />
</label>
<span class="checkboxRequiredMsg">Please confirm you are over 18 years of age.</span></span></td>
<td width="61" class="table-text">Postcode:</td>
<td width="182"><input name="postcode" type="text" class="postcode" id="postcode" /></td>
</tr>
</table><table width="628" border="0" class="table-size">
<tr>
<td width="210" align="left" valign="middle" class="wine-name-five"><p>Type of wine</p></td>
<td width="82" align="center" class="dollar-amount">number<br />
of single <br />
bottles</td>
<td width="136" class="dollar-amount">price per bottle</td>
<td width="81" align="center" class="dollar-amount">number<br />
of full <br />
cases</td>
<td width="97" align="center" class="dollar-amount">price <br />
per <br />
case</td>
</tr>
<tr>
<td class="wine-name-five">Chardonnay 2011</td>
<td align="center"><input name="PROD_Chardonnay2011Bottles_20" type="text" class="selection-box" onchange="CalculateTotal(this.form)" /></td>
<td class="dollar-amount">$20.00</td>
<td><input name="PROD_Chardonnay2011Cases_204" type="text" class="selection-box" onchange="CalculateTotal(this.form)" /></td>
<td align="center" class="dollar-amount">$204.00</td>
</tr>
<tr>
<td class="wine-name-five">Pinot Gris 2011</td>
<td align="center"><input name="PROD_PinoGris2011Bottles_21" type="text" class="selection-box" onchange="CalculateTotal(this.form)" /></td>
<td class="dollar-amount">$21.00</td>
<td><input name="PROD_PinoGris2011Cases_228" type="text" class="selection-box" onchange="CalculateTotal(this.form)" /></td>
<td align="center" class="dollar-amount">$228.00</td>
</tr>
<tr>
<td class="wine-name-five">Sauvignon Blanc 2011</td>
<td align="center"><input name="PROD_SauvigonBlanc2011Bottles_20" type="text" class="selection-box" onchange="CalculateTotal(this.form)" /></td>
<td class="dollar-amount">$20.00</td>
<td><input name="PROD_SauvigonBlanc2011Cases_204" type="text" class="selection-box" onchange="CalculateTotal(this.form)" /></td>
<td align="center" class="dollar-amount">$204.00</td>
</tr>
<tr>
<td class="wine-name-five">Riesling 2012</td>
<td align="center"><input name="PROD_Riesling2012Bottles_20" type="text" class="selection-box" onchange="CalculateTotal(this.form)" /></td>
<td class="dollar-amount">$20.00</td>
<td><input name="PROD_Riesling2012Cases_204" type="text" class="selection-box" onchange="CalculateTotal(this.form)" /></td>
<td align="center" class="dollar-amount">$204.00</td>
</tr>
<tr>
<td class="wine-name-five">Pinot Noir 2009</td>
<td align="center"><input name="PROD_PinotNoir2009Bottles_25" type="text" class="selection-box" onchange="CalculateTotal(this.form)" /></td>
<td class="dollar-amount">$25.00</td>
<td><input name="PROD_PinotNoir2009Cases_250" type="text" class="selection-box" onchange="CalculateTotal(this.form)" /></td>
<td align="center" class="dollar-amount">$250.00</td>
</tr>
<tr>
<td colspan="5" class="wine-name-five"><span class="freight-first">Mixed cases are available at the case prices per bottle, when ordering 12 bottles.</span></td>
</tr>
<tr>
<td valign="top" class="wine-name-five">Any queries, comments<br />
or delivery instructions:</td>
<td colspan="4"><label>
<textarea name="message" cols="44" rows="5" class="text-box-mixed-order" id="message"></textarea>
</label></td>
</tr>
<tr>
<td height="80" colspan="5" class="wine-name-five"><p>Freight (per case or part thereof. Minimum order six bottles).<br />
- North Island <span class="freight-total">$10.00</span><span id="spryselect2">
<select name="freight" class="freight-select-box" id="freight">
<option>North Island</option>
<option>South Island</option>
<option>I will collect</option>
</select>
<span class="selectInvalidMsg">Please select a valid item.</span><span class="selectRequiredMsg">Please select an item.</span></span><br />
- South Island <span class="freight-total">$15.00</span><br />
- Collection from the vineyard by arrangement <span class="freight-free">free</span> <span class="selectRequiredMsg">Please select an item.</span></span> </p></td>
</tr>
<tr class="table-row">
<td colspan="5" class="freight-second"> To tal freight
<label>
<input name="freight" type="text" class="fbox" id="freight" />
</label></td>
</tr>
<tr class="table-row">
<td colspan="5" class="freight-third"> Tot al amount payable
<label>
<input name="total" type="text" class="pbox" id="total" />
</label></td>
</tr>
<tr class="table-row">
<td height="46" colspan="5" align="left" valign="top" class="freight-fourth"><div align="left"><span class="freight-fourth-text">When you click "submit" a confirmation email will be sent to your inbox</span>
<table width="148" border="0">
<tr>
<td width="130"><input name="Submit" type="submit" class="ssbtn" id="Submit" style="width: 120px;" value="Submit order" reset /></td>
</tr>
</table>
</div></td>
</tr>
</table>
</form>
You may want to use jQuery Validate here.
http://docs.jquery.com/Plugins/Validation will give you lot of insight on how to achieve this. Plus, jQuery also eliminates a need for browser alert box by displaying the error messages alongside each div as plain text.
This works magic!
See the Example - Demo & View Source to see how it can be used.
A Tutorial can be seen here: http://www.jquery4u.com/forms/basic-jquery-form-validation-tutorial/
Hi Sudarshan, thanks for the link, I spent some time studying it, very useful, my trouble is I can't figure out how to adapt to my little problem i.e. to force the viewer to enter text in at least one text field and I have the same problem with the select list and making sure they select a freight option, just out of my depth I guess.
Cheers
North America
Europe, Middle East and Africa
Asia Pacific