checked checkbox to enable text field with validation
I have a Paypal form which has been built using some borrowed code. The main purpose of the form is to add some optional extras to a standard product and send that data to the paypal checkout. It seems to be working quite well, but...
I have a text field that I want to be required when the related checkbox is checked and for it to be disabled, and therefore not required when its unchecked. Crucially I need the data in the text field to be sent to the paypal shopping basket.
I have validation on another text field which will always be required, that works and sends the data to Paypal, but I'm a javascript newbie and can't get to grips with the second field.
This is the borrowed javascript
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
if (val < .995) rnd = 1; // for old Netscape browsers
str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
pos = str.indexOf (".");
if (pos > 0) str = str.substring (rnd, pos + 3);
return str;
}
var amt,des,obj,val,op1a,op1b,op2a,op2b,itmn;
function ChkTok (obj1) {
var j,tok,ary=new Array (); // where we parse
ary = val.split (" "); // break apart
for (j=0; j<ary.length; j++) { // look at all items
// first we do single character tokens...
if (ary[j].length < 2) continue;
tok = ary[j].substring (0,1); // first character
val = ary[j].substring (1); // get data
if (tok == "@") amt = val * 1.0;
if (tok == "+") amt = amt + val*1.0;
if (tok == "%") amt = amt + (amt * val/100.0);
if (tok == "#") { // record item number
if (obj1.item_number) obj1.item_number.value = val;
ary[j] = ""; // zap this array element
}
// Now we do 3-character tokens...
if (ary[j].length < 4) continue;
tok = ary[j].substring (0,3); // first 3 chars
val = ary[j].substring (3); // get data
if (tok == "s1=") { // value for shipping
if (obj1.shipping) obj1.shipping.value = val;
ary[j] = ""; // clear it out
}
if (tok == "s2=") { // value for shipping2
if (obj1.shipping2) obj1.shipping2.value = val;
ary[j] = ""; // clear it out
}
}
val = ary.join (" "); // rebuild val with what's left
}
function StorVal () {
var tag;
tag = obj.name.substring (obj.name.length-2); // get flag
if (tag == "1a") op1a = op1a + " " + val;
else if (tag == "1b") op1b = op1b + " " + val;
else if (tag == "2a") op2a = op2a + " " + val;
else if (tag == "2b") op2b = op2b + " " + val;
else if (tag == "3i") itmn = itmn + " " + val;
else if (des.length == 0) des = val;
else des = des + ", " + val;
}
function ReadForm (obj1, tst) { // Read the user form
var i,j,pos;
amt=0;des="";op1a="";op1b="";op2a="";op2b="";itmn="";
if (obj1.baseamt) amt = obj1.baseamt.value*1.0; // base amount
if (obj1.basedes) des = obj1.basedes.value; // base description
if (obj1.baseon0) op1a = obj1.baseon0.value; // base options
if (obj1.baseos0) op1b = obj1.baseos0.value;
if (obj1.baseon1) op2a = obj1.baseon1.value;
if (obj1.baseos1) op2b = obj1.baseos1.value;
if (obj1.baseitn) itmn = obj1.baseitn.value;
for (i=0; i<obj1.length; i++) { // run entire form
obj = obj1.elements[i]; // a form element
if (obj.type == "select-one") { // just selects
if (obj.name == "quantity" ||
obj.name == "amount") continue;
pos = obj.selectedIndex; // which option selected
val = obj.options[pos].value; // selected value
ChkTok (obj1); // check for any specials
if (obj.name == "on0" || // let this go where it wants
obj.name == "os0" ||
obj.name == "on1" ||
obj.name == "os1") continue;
StorVal ();
} else
if (obj.type == "checkbox" || // just get checkboxex
obj.type == "radio") { // and radios
if (obj.checked) {
val = obj.value; // the value of the selection
ChkTok (obj1);
StorVal ();
}
} else
if (obj.type == "select-multiple") { //one or more
for (j=0; j<obj.options.length; j++) { // run all options
if (obj.options[j].selected) {
val = obj.options[j].value; // selected value (default)
ChkTok (obj1);
StorVal ();
}
}
} else
if (obj.name == "size") {
val = obj.value; // get the data
if (val == "" && tst) { // force an entry
alert ("Enter data for " + obj.name);
return false;
}
StorVal ();
} else
if (obj.name == "stamp") {
val = obj.value; // get the data
//if (val == "" && tst) { // force an entry
// alert ("Enter data for " + obj.name);
// return false;
//}
StorVal ();
}
}
// Now summarize stuff we just processed, above
if (op1a.length > 0) obj1.on0.value = op1a;
if (op1b.length > 0) obj1.os0.value = op1b;
if (op2a.length > 0) obj1.on1.value = op2a;
if (op2b.length > 0) obj1.os1.value = op2b;
if (itmn.length > 0) obj1.item_number.value = itmn;
obj1.item_name.value = des;
obj1.amount.value = Dollar (amt);
if (obj1.tot) obj1.tot.value = "£" + Dollar (amt);
}
and this is the html
<form action="https://www.paypal.com/cgi-bin/webscr" name="weboptions" method="post" onsubmit="this.target='_blank'; return ReadForm(this, true);">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="craig@craigomatic.co.uk" />
<input type="hidden" name="shipping" value="0.00">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="return" value="">
<input type="hidden" name="item_name" value />
<input type="hidden" name="amount" value />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF">
<input type="hidden" name="basedes" value="Collar">
<h4>Collar details...</h4>
<div>
<p>Matching lamb nappa lining <br />
with antique brass finished hardware</p>
<div>
<p>Pick a colour:</p>
<p>Chose a width:</p>
<p>Tell us t开发者_如何学Pythonhe Size:<br />
in cms (?)</p>
</div>
<div>
<p>
<select name="colour" onclick="ReadForm (this.form, false);" size="1">
<option value="Black +55.00">Black</option>
<option value="Brown +55.00">Brown</option>
<option value="Tan +55.00">Tan</option>
</select>
</p>
<p>
<select name="width" onclick="ReadForm (this.form, false);" size="1">
<option value="1 and quarter inch">1¼ inch</option>
<option value="1 and half inch">1½ inch</option>
</select>
</p>
<p><input name="size" type="text" class="size"></p>
<p></p>
</div>
</div>
<h4>Optional extras...</h4>
<div>
<p>
<label>
<input type ="checkbox" onclick="ReadForm (this.form, false);"
value ="Double D +1.50"
name ="DoubleD">
Double D Me (£1.50)
</label>
</p>
<p>
<label>
<input type ="checkbox" onclick="ReadForm (this.form, false);"
value ="Max Me +1.50"
name ="MaxMe">
Max Me! (£1.50)
</label>
</p>
<p>
<label>
<input type ="checkbox" onclick="ReadForm (this.form, false);"
value ="Match Me +1.50"
name ="MatchMe">
Match Me (£1.50)
</label>
</p>
<p>
<label>
<input type ="checkbox" onclick="ReadForm (this.form, false);"
value ="Stamp Me +1.50"
name ="StampMe">
Stamp Me (£1.50)</label>
</p>
<p><input name="stamp" type="text" class="lettering" maxlength="12"></p>
</div>
<p>Total:<input class="nbor" type="text" name="tot" size="7" value="£55.00" /> <input class="buy" type="submit" value="Buy Me" name="B1"></p>
</form>
If your wondering you can find the page in question here http://booleather.co.uk/option1/bronze-bronco.php
Any help would be much appreciated.
Give this code a try:
if (val == "" && obj1.elements["StampMe"].checked) {
// if the value of the stamp text field is empty and the user has checked the StampMe box
alert ("Enter data for " + obj.name);
return false;
}
(instead of)
//if (val == "" && tst) { // force an entry
// alert ("Enter data for " + obj.name);
// return false;
//}
精彩评论