jquery - 如果添加表单标签，Ajax 无法工作

Question

我在线上有可拖动的点，可以更改输入值和自身值。我需要创建表单来通过邮寄传递数据。一切工作正常，但是当我添加表单标签时，ajax 停止工作(值不会改变)。写下“Uncaught TypeError: tarif is not a function”我该如何解决它？这是我的代码:

function tarif() {
  const nov = $('#new').val();
  const team = $('#team').val();
  const company = $('#company').val();
  const umn = $('#range').val();
  var sum = 0;
  if (+nov == 7000) {
    var sum = 0;
    sum += 7000;
  }
  if (+team == 13000) {
    var sum = 0;
    sum += 13000;
  }
  if (+company == 19000) {
    var sum = 0;
    sum += 19000;
  }
  if (+$('input[name=tarif]:checked').val() == 7000) {
    var sum = 0;
    sum = 7000 + 1000 * +umn;
  }
  if (+$('input[name=tarif]:checked').val() == 13000) {
    var sum = 0;
    sum = 13000 + 1500 * +umn;
  }
  if (+$('input[name=tarif]:checked').val() == 19000) {
    var sum = 0;
    sum = 19000 + 2000 * +umn;
  }
  $('#sizevalue').text('x' + umn);
  $('#price-tarif').val(sum);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="tariff">
  <div class="container">

    <h2>Choose your plan</h2>

    <div class="row">
      <div class="col-md-4 col-sm-12 col-xs-12">
        <label>Plan</label>
      </div>
      <div class="col-md-8 col-sm-12 col-xs-12">
        <span class="no-margin">
							<input type="radio" name="tarif" onchange="tarif()" value="7000" id="new" checked>
							<label for="new">New</label>
						</span>
        <span>
							<input type="radio" name="tarif" onchange="tarif()" value="13000" id="team">
							<label for="team">Team</label>
						</span>
        <span>
							<input type="radio" name="tarif" onchange="tarif()" value="19000" id="company">
							<label for="company">Company</label>
						</span>
      </div>
    </div>
    <form>
      <div class="row slider2-1 m25">
        <div class="col-md-4 col-sm-12 col-xs-12">
          <label style="padding-top: 25px;">Сoefficient</label>
        </div>

        <div class="col-md-8 col-sm-12 col-xs-12">
          <div id="sizevalue">x0</div>
          <input id="range" onchange="tarif()" type="range" min="0" max="5" value="0" name="umn" list="tickmarks">
          <datalist id="tickmarks">
							<option value="0" label="x0">
							<option value="1" label="x1">
							<option value="2" label="x2">
							<option value="3" label="x3">
							<option value="4" label="x4">
							<option value="5" label="x5">
						</datalist>
        </div>

      </div>
      <div class="row slider2">
        <div class="col-md-4 col-sm-12 col-xs-12">
          <label class="row" style="padding-left:11px">Login</label>
        </div>
        <div class="col-md-8 col-sm-12 col-xs-12">
          <input type="text" name="login">
        </div>
      </div>
      <div class="row slider2">
        <div class="col-md-4 col-sm-12 col-xs-12">
          <label>Email</label>
        </div>
        <div class="col-md-8 col-sm-12 col-xs-12">
          <input type="text" name="phone">
        </div>
      </div>
      <br>
      <div class="row slider2-1 m2">
        <div class="col-md-4 col-sm-12 col-xs-12">
          <label>Total sum</label>
        </div>
        <div class="col-md-8 col-sm-12 col-xs-12">
          <input type="text" value="7000" name="price" id="price-tarif">
        </div>
      </div>
      <button type="submit">Confirm</button>
  </div>
</section>

Answer 1

“Ajax 不工作”

几乎可以肯定，既然您已经添加了 form标签，您现在在调用 ajax 代码之前提交 html 表单本身，这是 <button type="submit">Confirm</button> 的默认行为当在 form 内时标签。

如果您想通过ajax提交，请将按钮更改为使用type="button"

JS错误

一般情况下，不要使用内联 javascript(onchange 属性)。相反，使用事件处理程序。为此，请修改您的 html，例如:

<input id="range" class="tarif" type="range" min="0" max="5" value="0" name="umn" list="tickmarks"> 

然后添加一个事件处理程序，如下所示:

$('.tarif').change(function(){
    tarif();
});

Here is a working jsFiddle

此外，您的 html 缺少结尾 </form>标签。