JQuery将计算值插入表单文本字段

时间:2016-07-13 17:49:36

标签: jquery

我有一张表格

<form id="credit-card-submission-form-1" class="visual-form-builder vfb-form-1 " method="post" enctype="multipart/form-data">

我在<form标记中有以下字段。

<input
type="text" name="vfb-17" id="vfb-17" value="" class="vfb-text  vfb-medium  required  " />

我想从下面这个字段中获取输入值,假设从400字段输入id="vfb-15,我想取400并应用3.25%这个字段id="vfb-17"

<input
type="text" name="vfb-15" id="vfb-15" value="" class="vfb-text  vfb-medium  required  " />

这是我迄今为止尝试过的,只是为了测试我是否可以访问该字段:

<script type="text/javascript">
    jQuery(document).ready(function($) {
     $('#vfb-17').val( $('#vfb-17').val() + 'My new text' )
});
    </script>

我无法得到这个值/'我的新文本'甚至插入到上面的JQuery中的字段中。

@Anuj Khandelwal /  谢谢您的回答。我修改了你的代码以适合我的表单,下面是我为使表单正常工作所做的 JQuery 修改:

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#vfb-15').keyup(function(){
   var vfbVal = $(this).val();
   var vfb15Val = (vfbVal*3.5)/100;
   $('#vfb-17').val(vfb15Val);
 });
});
</script>

以下是对工作代码的最终编辑:

<script type="text/javascript">
    jQuery(document).ready(function($) {
    $('#vfb-15').keyup(function(){
       var vfbVal = $(this).val().replace("$", "");
       var vfb15Val = (vfbVal*3.5)/100;
       $('#vfb-17').val(vfb15Val);
       var total = parseInt(vfbVal)+parseInt(vfb15Val);
       console.log(total);
       $('#vfb-18').val(total);
     });
    });
    </script>

3 个答案:

答案 0 :(得分:0)

请在此处查看答案: https://jsfiddle.net/wz2jn5sn/

您需要正确获取值,然后计算并分配给新字段。 HTML:

   <form id="credit-card-submission-form-1" class="visual-form-builder vfb-form-1 " method="post" enctype="multipart/form-data">
    VFB17: <input
type="text" name="vfb-17" id="vfb-17" value="" class="vfb-text  vfb-medium  required  " />
    VFB15: <input
type="text" name="vfb-15" id="vfb-15" value="" class="vfb-text  vfb-medium  required  " />
    <input type="button" class="calc" value="Calculate"/>
    </form>

JAVASCRIPT:

jQuery(document).ready(function($) {
 $('.calc').on("click", function(){
 var newVal=$('#vfb-15').val() * .0325;
 $('#vfb-17').val(newVal);
});
 ( $('#vfb-17').val() + 'My new text' )
});

答案 1 :(得分:0)

试试这个:

$('#vfb-17').keyup(function(){
  var vfbVal = $(this).val();
  var vfb15Val = (vfbVal*3.5)/100;
  $('#vfb-15').val(vfb15Val+'My new text');
});

jsfiddle

答案 2 :(得分:0)

你可以试试这个 -

JSFiddle

HTML CODE

<form id="credit-card-submission-form-1" class="visual-form-builder vfb-form-1 " method="post" enctype="multipart/form-data">
  <input type="text" name="vfb-17" id="vfb-17" value="" class="vfb-text  vfb-medium  required">
  <input type="text" name="vfb-15" id="vfb-15" value="" class="vfb-text  vfb-medium  required">
</form>

JAVASCRIPT CODE

$('input[name=vfb-15]').blur(function(){
    $('input[name=vfb-17]').val($(this).val()*.0325);
});