0
Ich bin ein wenig verwirrt hier. Ich habe den größten Teil meines Formulars ausgefüllt. Ich brauche nur Hilfe mit dem Wert meiner Auswahlfelder und eine Funktion zur Berechnung dieser Werte. Zusammen mit einem Code, der eine Fehlermeldung anzeigt, wenn kein Kontrollkästchen aktiviert ist.JavaScript Validierung
/* Startet eine Array-Referenzpreise auf Events */
var aaffa_Price = new Array();
aaffa_Price ["AAFFA Membership"] = 45;
aaffa_Price ["Early Registration"] = 135;
aaffa_Price ["Registration"] = 150;
aaffa_Price ["Early Mini Camp"] = 35;
aaffa_Price ["Mini Camp"] = 40;
aaffa_Price ["Three Mini Camp Special"] = 90;
/* This function validates selected events values and totals up the cost */
function getaaffaTotalCost()
{
var aaffa_Cost = 0;
var myForm = document.forms["aaffaForm"];
var selectedEvent = myForm.elements["selectedEvent"];
aaffa_Cost += aaffa_Price[selectedEvent.value];
return aaffa_Price;
}
function calcTotal()
{
var aaffa_Price = getaaffaTotalCost();
var divobj = document.getElementById('eventsTotalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Registration $"+aaffa_Cost;
}
function aaffaDisplay(aaffa)
{
var selAAffa = document.getElementById("spryselect1");
var selAAp = document.getElementById("spryselect2");
var girlsRad=document.getElementById("League_0");{
var boysRad=document.getElementById("League_1");
if (girlsRad.checked){
return true
selAAffa.hidden=false
}
selAAffa.hidden=true
}
}
<body>
<div class="container">
<div class="header">
<!-- end .header -->
</div>
<div class="content">
<form action="mailto:[email protected]" method="post" enctype="text/plain" target="_parent" id="myForm" name: "aaffa" onsumbit="return validate(this);">
<div class="league">
<fieldset>
<legend><em>Select A League</em>
</legend>
<span id="spryradio1">
<label>
<input type="radio" name="League" value="Girls" id="League_0" onchange="aaffaDisplay" />
AAFFA</label>
<label>
<input type="radio" name="League" value="Boys" id="League_1" />
Boys Passing</label>
<br />
<span class="radioRequiredMsg">Please make a selection.</span></span>
</fieldset>
<br />
</div>
<div class="AA Events">
<fieldset>
<legend><em>ALL American Events</em>
</legend>
<span id="sprytrigger1">Select more than one?</span>
<div class="tooltipContent" id="sprytooltip1">Hold ctrl to select more than one choice</div>
<span id="spryselect1"><br />
<select name="girlsEvent" id="aaffa" multiple="multiple" onchange="addTotal">
<option value="000" name="Select AAFFA Events" selected="selected"><strong><strong>AAFFA Events</strong></strong></option>
<option value="$45.00" name="All American Flag Football Memebership" onchange="addTotal">All American Memebership</option>
<option value="$135.00" name="Early Girl's Flag Football Registration">Early Girl's Flag Football Registration</option>
<option value="$150.00" name="Girl's Flag Football Registration" >All American Memebership</option>
<option value="$35.00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option>
<option value="$40.00" name="Mini Camp Registration Girls">Mini Camp Registration</option>
<option value="$90.00" name="3 Mini Camp Special Registration Girls">3 Mini Camp Special Registration</option>
</select><<label for="girlsevent"></label>
<span class="selectRequiredMsg">Please select an item.</span>
<span id="spryselect2">
<select name="boysEvents" id="aapl" multiple="multiple" onchange="addTotal">
<option value="000" name="Select AA Pride Events" selected="selected">AA Pride Events</option>
<option value="$45.00" name="All American Pride Memebership" onchange="addTotal">All American Pride Memebership</option>
<option value="$135.00" name="Early Boys Passing League Registration">Early Boys Passing League Registration</option>
<option value="$150.00" name="All American Pride Flag Football Registration" >All American Memebership</option>
<option value="$35.00" name="Early Mini Camp Boys">Boys Early Mini Camp Registration</option>
<option value="$40.00" name="Mini Camp Registration Boys">Mini Camp Registration</option>
<option value="$90.00" name="3 Mini Camp Special Registration Boys">3 Mini Camp Special Registration</option>
</select> <br /><label for="event"></label>
<span class="selectRequiredMsg">Please select an item.</span></span>
<br />
<br />
<input type="text" name="aaffaTotal" id="aaffaTotal" placeholder=" " />
<input type="text" name="aapTotal" id="aapTotal" placeholder=" " />
</fieldset>
</div>
<div class="Boys Events">
</div>
<div class="contactInfo">
<fieldset>
<fieldset>
<legend><em>Contact Info</em>
</legend>
First Name:
<br />
<input name="fName" type="text" required="required" class="input" size="30" maxlength="15" placeholder="First Name" id="confName" tabindex="9" />
<br />Last Name:
<br />
<input name="lname" type="text" required="required" class="input" size="30" maxlength="45" placeholder="Last Name" id="conlName" tabindex="10" />
<br />Street:
<br />
<input name="street" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
<br />
<label for="city">City:</label>
<select name="city" class="select" id="city" tabindex="12">
<option value="000">None</option>
<option value="1">Boulder City</option>
<option value="2">Green Valley</option>
<option value="3">Henderson</option>
<option value="4">Las Vegas</option>
<option value="5">North Las Vegas</option>
</select>
State:
<input name="state" required="required" size='4' class="content" value="N.V." tabindex="13" />Zip Code:
<input type="text" name="zipCode" required="required" tabindex="14" size="15" pattern="(\d{5}([\-]\d{4})?)" maxlength="10" />
<br />
<br/>E-Mail:
<input type="text" name: "email" required="required" class="input" size="35" maxlength="50" />Phone #:
<input name="Contact Number" type="tel" required="required" size="12" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="777-777-7777" maxlength="13" />
<br/>
<div class="emerContactInfo">
<br />
<fieldset>
<legend>Emergency Contact</legend>
First Name:
<br />
<input name="pfname" type="text" required="required" class="input" size="30" maxlength="15" placeholder="Parent's First Name" tabindex="9" />
<br />Last Name:
<br />
<input name="plname" type="text" required="required" class="input" size="30" maxlength="45" placeholder="Last Name" tabindex="10" />
<br />
<label>Address:
<br />
</label>
<label>City:
<input name="pcity" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
</label>
<label>State:
<br />
<input name="pstate" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
</label>
</fieldset>
</div>
<p>
<!-- Load jQuery from Google's CDN -->
<!-- Load jQuery UI CSS -->
<input name="pstreet" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
<br/>
<br/>
<input type="submit" value="Submit" onclick="return getaaffaTotalCost()" />
<input type="button" value="reset" />
</p>
<p><</p>
</fieldset>
</form>
<!-- end.contactInfo -->
</div>
<!-- end .content -->
</div>
Sprechen Sie über Dropdown-Liste? Da Sie das Kontrollkästchen in Ihrem Code nicht verwendet haben. Und Sie müssen nicht schreiben erforderlich = "erforderlich". Schreiben nur in Eingabe-Tag erforderlich funktioniert auch. In html haben wir auch eingabetyp = "email", die grundlegende email Syntax für u. –
In Ihrem Titel schreiben Sie 'JavaScript Validation', aber Sie zeigen keinen JavaScript-Code, wo Sie versuchen, die Validierung durchzuführen. Wenn Sie Fragen stellen, sollten Sie zeigen, was Sie bereits versucht haben. Außerdem solltest du immer sicherstellen, dass der Code deiner Show gültig ist. Ihr HTML-Code ist voller Fehler. z.B. 'name:" email "' anstelle von 'name =" email "', ein 'select' ist kein gültiges Kind von' span' und anderen. –
http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript das wird Ihnen helfen, und ich schlage vor, jQuery zu verwenden, weil es das Leben mit DOM-Manipulationen –