如果添加表单标记，则Ajax无法正常工作

Question

我在线上有可拖动点，可以改变输入值和自身值。我需要创建表单来通过post传递数据。一切都运行良好，但是当我添加表单标签时，ajax停止工作（值不会改变）。写下“未捕获的TypeError：tarif不是函数”我该如何解决？ 这是我的代码：

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

＆＃34; Ajax无法运行＆＃34;

几乎可以肯定，既然您已经添加了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>标记。