表格字段计算

时间:2014-02-10 14:14:58

标签: javascript jquery forms

我有一个工作表单,但我需要它通过电子邮件发送一个仅限​​文本的值(不包括数值)。如果有更简单的方法,请帮助你。

这是js小提琴 - http://jsfiddle.net/qeSZR/83/

基本上当你点击公司时,它会计算出值并将其更改为3500,当你点击私有时,它会将其更改为1800.我遇到的问题是,当你发送邮件时,我有一个字段说“客户端类型“其中包括”1800:私人“或”3500:公司“作为其发送价值。我不希望其中的数字我宁愿只有客户类型=私人或公司。请帮忙:) - 谢谢!

以下是代码:

HTML

     <form action="mailer.php" data-validate="parsley" method="post">
             <div class="driver-list">
                <p>
                <h2>Driver 1:</h2>
                Name <span class="red">*</span>&nbsp; <input name="cf_driver1" data-required="true" type="text" class="form-text" />
                Cellphone <span class="red">*</span>&nbsp; <input name="cf_cell1" data-required="true" type="text" class="form-text" />
                Email <span class="red">*</span>&nbsp; <input name="cf_email1" data-required="true" data-type="email" type="text" class="form-text" /></p>
                <h2>Driver 2:</h2>
                Name <span class="red">*</span>&nbsp; <input name="cf_driver2" data-required="true" type="text" class="form-text" />
                Cellphone <span class="red">*</span>&nbsp; <input name="cf_cell2" data-required="true" type="text" class="form-text" />
                Email <span class="red">*</span>&nbsp; <input name="cf_email2" data-required="true" data-type="email" type="text" class="form-text" /></p>
                <h2>Driver 3:</h2>
                Name <span class="red">*</span>&nbsp; <input name="cf_driver3" data-required="true" type="text" class="form-text" />
                Cellphone <span class="red">*</span>&nbsp; <input name="cf_cell3" data-required="true" type="text" class="form-text" />
                Email <span class="red">*</span>&nbsp; <input name="cf_email3" data-required="true" data-type="email" type="text" class="form-text" /></p>
                <h2>Driver 4:</h2>
                Name <span class="red">*</span>&nbsp; <input name="cf_driver4" data-required="true" type="text" class="form-text" />
                Cellphone <span class="red">*</span>&nbsp; <input name="cf_cell4" data-required="true" type="text" class="form-text" />
                Email <span class="red">*</span>&nbsp; <input name="cf_email4" data-required="true" data-type="email" type="text" class="form-text" /></p>
              </div>
          <div class="vertical-space"></div><p><h2>Entry Type<span class="red">*</span></h2></p>
          <select name="cf_client_type" id="cf_client_type" size="1" class="option2" >
          <option value="1800: Private">Private</option>
          <option value="3500: Corporate">Corporate</option>
          </select>
          <p>Corporate entries qualify for a tax donation certificate, please enquire via email.</p>

          <!-- HIDDEN FIELD - HONEYPOT ANTI_SPAM -->
          <input id="website" class="taken" name="cf_website" type="text"  />   
          <!-- END -->

          <!-- HIDDEN FIELD - CALCULATION -->
          <input id="cf_calculate" class="taken" value="1" name="cf_blank" type="text"  />   
          <!-- END -->

          <div class="box-contact"><span class="result">Amount Due: &nbsp;R</span><input type="text" name="cf_amount" readonly="readonly" value="1800" id="result">  

          <input name="Submit" class="submit" value="Submit" type="submit" />  

JAVASCRIPT

  $(document).ready(function(){
$("select").change(function(){
      var val1 = +parseInt($("#cf_client_type").val());
      var val2 = +parseInt($("#cf_calculate").val());
      $("#result").val(val1*val2);
});

});

2 个答案:

答案 0 :(得分:1)

Here is a fiddle

使用data-value为您的计算设置选项,并为您要传递的文字保留实际value,如此...

 <option value="Private" data-value="1800">Private</option>
 <option value="Corporate" data-value="3500">Corporate</option>

然后你的脚本就像这样......

$(document).ready(function(){

  $("select").change(function(){

     var val1 = +parseInt($("#cf_client_type").find('option:selected').attr('data-value'));
     var val2 = +parseInt($("#cf_calculate").val());
     $("#result").val(val1*val2);

  });

});

答案 1 :(得分:0)

将代码中的选项值替换为以下