通过表单发送jQuery UI Slider值

时间:2016-04-28 03:45:37

标签: javascript jquery forms jquery-ui jquery-ui-slider

我在一个应该向Velocify提交信息的表单中使用jQuery UI Slider。

所有内容都已正确发送,但滑块的值保持空白。这是我的代码:

  <form id="short-form" name="short-form" method="post" data-toggle="validator" role="form"
  action="https://secure.velocify.com/Import.aspx?Provider=XXXXX&Client=XXXXX&CampaignId=XXXXX&URL=https://example.com/confirmation.php">
    <input type="hidden" name="keyword" id="keyword" />

    <div class="form-group">
      <label class="loan-amount-label" for="_Requested_loan_amount">I'd like to borrow:</label>
      <input type="text" id="_Requested_loan_amount" name="_Requested_loan_amount" class="loan-amount" readonly>

      <p class="small">Drag the slider below to the amount you'd like to borrow</p>
      <div id="slider"></div>
      <div class="row slider-minmax">
        <div class="col-xs-6 col-sm-6 col-md-6 text-left min">$2,501</div>
        <div class="col-xs-6 col-sm-6 col-md-6 text-right max">$50,000</div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6 col-md-6 form-group">
        <label for="_First_name" class="hidden">First Name</label>
        <input type="text" class="form-control" id="_First_name" name="_First_name"
        placeholder="First Name *" data-error="Please enter your first name." required>
      </div>
      <div class="col-sm-6 col-md-6 form-group">
        <label for="_Last_name" class="hidden">Last Name</label>
        <input type="text" class="form-control" id="_Last_name" name="_Last_name"
        placeholder="Last Name *" data-error="Please enter your last name." required>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6 col-md-6 form-group">
        <label for="_Home_Phone" class="hidden">Phone Number</label>
        <input type="text" class="form-control" id="_Home_Phone" name="_Home_Phone"
        placeholder="Your Phone Number *" data-error="Please enter a valid phone number." required>
      </div>
      <div class="col-sm-6 col-md-6 form-group">
        <label for="_Email_Address" class="hidden">Email</label>
        <input type="email" class="form-control" id="_Email_Address" name="_Email_Address"
        placeholder="Your Email *" data-error="Please enter a valid email address." required>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6 col-md-6 form-group">
        <label for="_Auto_year">Vehicle Year:</label>
        <select class="form-control" id="_Auto_year" name="_Auto_year"
        data-error="Please choose a vehicle year." required>
        </select>
      </div>
      <div class="col-sm-6 col-md-6 form-group">
        <label for="_Auto_make">Vehicle Make:</label>
        <select class="form-control" id="_Auto_make" name="_Auto_make"
        data-error="Please choose a vehicle make." required>
        </select>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <hr>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-7 col-sm-8 col-md-8 form-group">
        <button type="submit" class="btn btn-primary btn-lg btn-block">
          Get Started
        </button>
      </div>
      <div class="col-xs-5 col-sm-4 col-md-4">
        <div class="verify pull-right text-right">

        </div>
      </div>
    </div>
  </form>

javascript:

<script>
$(function () {
  $("#slider").slider({
    value: 6500,
    min: 2501,
    max: 50500,
    step: 500,
    range: "min",
    slide: function(event, ui) {
      var x = Number(ui.value);
      if (x > 2501) {
        x = x - (x % 500);
      }
      $("#_Requested_loan_amount").val('$' + addCommas(x));
    }
  });

  $("#_Requested_loan_amount").val('$' + addCommas($("#slider").slider("value")));

  function addCommas(nStr) {
    var x = Number(nStr);
    if (x > 2501) {
        x = x - (x % 500);
    }
    nStr = x.toString();
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
  }
});
</script>

当我使用

将表单提交到我的测试页面时
<?php echo $_POST["_Requested_loan_amount"]; ?>

我看到字段值生成正确,所以我不确定为什么它不会将该值发送给Velocify。

谢谢!

0 个答案:

没有答案