javascript - 选中复选框以启用带有验证的文本字段

标签 javascript checkbox validation

我有一个 Paypal 表单,它是使用一些借来的代码构建的。该表单的主要目的是向标准产品添加一些可选的附加功能,并将该数据发送到 PayPal 结帐处。它似乎工作得很好,但是......

我有一个文本字段,我希望在选中相关复选框并禁用它时需要该文本字段,因此在未选中该文本字段时不需要该文本字段。 最重要的是,我需要将文本字段中的数据发送到 paypal 购物篮。

我对另一个文本字段进行了验证,该字段始终是必需的,可以工作并将数据发送到 Paypal,但我是 javascript 新手,无法掌握第二个字段。

这是借用的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);
}

这是 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 the 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>

如果您想知道,您可以在这里找到相关页面 http://booleather.co.uk/option1/bronze-bronco.php

任何帮助将不胜感激。

最佳答案

尝试一下这段代码:

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;
}

(而不是)

  //if (val == "" && tst) {         // force an entry
  //  alert ("Enter data for " + obj.name);
  //  return false;
  //}

关于javascript - 选中复选框以启用带有验证的文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7325737/

相关文章:

用于打开 url 链接的 Javascript 函数

javascript - 如何将动态填充表格的信息显示到弹出窗口中?

java - 如何在 Spring Boot 中的第一个约束后停止进行验证

javascript - 虚线不起作用

android - fragment 内的复选框 - 捕获选中/取消选中

html - 将单选按钮对齐到中心

ios - 如何在 swift (iOS) 中创建单选按钮和复选框?

java - 如何使用单选按钮根据用户输入执行不同的方程?

java - 如何限制 JTable 中的输入?

javascript - DevExpress (JS) - dxDataGrid 具有自定义汇总值的分组项目