Question

我有这样的表格：

<form id="main" class="form-horizontal" action="?action=convert" method="post">
        <div class="form-group">
          <label for="value" class="col-sm-2 control-label">Enter Value</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" name="value" id="value" placeholder="Enter value">
          </div>
        </div>
        <div class="form-group">
          <label for="from" class="col-sm-2 control-label">From</label>
          <div class="col-sm-3">
          <select name="from-cur" id="from-cur" class="form-control">
              <option value=""></option>
              <option value="euro">EURO</option>
              <option value="us-dollar">US DOLLAR</option>
              <option value="swiss-franc" >SWISS FRANC</option>
              <option value="british-pound">BRITISH POUND</option>
              </select>
          </div>
        </div>
        <div class="form-group">
          <label for="to" class="col-sm-2 control-label">To</label>
          <div class="col-sm-3">
          <select name="to-cur" id="to-cur" class="form-control">
              <option value=""></option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="value" class="col-sm-2 control-label">Result</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="result" placeholder="result" value="' . $this->converter->get($this->value, $this->from, $this->to) . '">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-3">
            <button type="submit" class="btn btn-default" id="Convert" name="Convert" value="Convert">Submit</button>
          </div>
        </div>
      </form>

并在提交时我有这个jquery：

$('#main').submit(function(event) {
var from = $('#from-cur').val();
var to = $('#to-cur').val();
var rate;

$.ajax({
    type: 'GET',
    url: 'js/rates.json',
    data: $('#rates').serialize(),
    success: function(data){
        var rates =data.rates;
        var i;
        for (i = 0; i < rates.length; ++i) {
            if((from ==rates[i].from) && (to==rates[i].to)){
              rate = rates[i].val
              //post rate to newindex.php

              $.post('newindex.php', 'val=' + rate, function (response) {
               });

              console.log(rate);
            }
        }



    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('error: ' + textStatus + ': ' + errorThrown);
    }
});
return false;//suppress natural form submission
});

基本上，当我提交表单时，我从jquery文件接收数据，但表单的操作永远不会发生

    ?action=convert.

当我从jquery代码中删除ajax位时，操作将触发。如何才能启动这两项操作？

Answer 1

你想吃蛋糕也吃。

所以你需要提交表格

$('#main').submit(function(event) {
  event.preventDefault(); // stop submission
  var from = $('#from-cur').val();
  var to = $('#to-cur').val();
  var rate;

  $.ajax({
    type: 'GET',
    url: 'js/rates.json',
    data: $('#rates').serialize(),
    success: function(data) {
      var rates = data.rates;
      var i;
      for (i = 0; i < rates.length; ++i) {
        if ((from == rates[i].from) && (to == rates[i].to)) {
          rate = rates[i].val
          //post rate to newindex.php

          $.post('newindex.php', 'val=' + rate, function(response) {});

          console.log(rate);
          $('#main')[0].submit(); // submit the actual form too
        }
      }



    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert('error: ' + textStatus + ': ' + errorThrown);
    }
  });
});

Answer 2

我认为您忘记了分号后： rate = rates [i] .val

通常这是因为当出现语法错误时Javascript会中止。如果这不是错误，请继续寻找语法错误。拿出来把它们放回去，直到它起作用。此外，在IE中点击F12并观看＆＃34;控制台＆＃34;错误标签。

表单操作不使用Ajax

2 个答案: