Question

我有一个带提交按钮的html表单。我在头文件中包含的文件中有一个js函数。我试图绑定按钮的onclick事件来调用该函数。但是，我尝试的所有方法都不起作用。

<form class="form-horizontal" role="form" id="form_newCours">
        <div class="form-group">
            <label class="control-label col-sm-2" for="discippline">Matiere:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="discipline" placeholder="Matiere">
            </div>
        </div>
        <div class="form-group" align="left">
            <label class="control-label col-sm-2" for="datetimepicker">Date:</label>
            <div class="input-group col-sm-4">
                        <input type="text" class="form-control" id="datetimepicker"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label><input type="checkbox" id="creneau_regulier"> Ce creneau regulier</label>
              </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default" id="btn-newCours">Ajouter</button>
            </div>
        </div>
 </form>

JS函数在send_json_req.js中：

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
    } else {
        o[this.name] = this.value || '';
    }
});
return o;
};

$('#form_newCours').on('click',function (e) {
console.log("Ici");
// YK: Bellow is my code
var jsonString = JSON.stringify($('#form_newCours').serializeObject());
console.log($('#form_newCours').serialize());
$.ajax({
    type: "POST",
    data : jsonString,
    url: "/cours/",
    contentType: "application/json"
   });
});

我也尝试使用onclick直接从按钮调用该函数，但它不起作用。我究竟做错了什么？

Answer 1

＆＃13;

$('#form_newCours').on('submit', function(){})
//use submit action on form element then callback will trigger

＆＃13;

Answer 2

更改为：

$('#form_newCours').on('submit',function (e) {
   e.preventDefault(); // prevents the form from submitting as it normally would

    ...
}

Answer 3

使用anchor标记或button类型，但如果您使用type="submit"，请确保在函数调用开始时event.preventDefault()。

 <a href="" onclick="someFunction()">Submit</a>
    <button type="button" onclick="someFunction()"></button>
    <button type="submit" onclick="someFunction()"></button> /* in this case include function someFunction(event){ event.preventDefault(); ...} */

如果您使用单独的文件，还有一件事可以确保它已加载。因此，更好的解决方案是在html页面中包含提交功能。

希望这有帮助。

Answer 4

这些是你的问题：

在$(document).ready(function() { ... });中包裹您的DOM读取/操作代码 - 这可确保元素可供操作。 See guide。
您将click事件绑定到表单，而不是按钮。
您需要在事件处理程序中使用event.preventDefault();取消表单提交的默认行为。 See docs.

此编辑后的代码应该有效 - 请花时间了解评论中所写的更改：

$.fn.serializeObject = function() {
  var o = {};
  var a = this.serializeArray();
  $.each(a, function() {
    if (o[this.name] !== undefined) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
};

// All your code that reads/changes the HTML goes in here:
$(document).ready(function() {

  // this was previously bound to the form, not the submit button:
  $('#btn-newCours').on('click', function(e) {

    // this will stop the form from submitting normally and let you handle it yourself
    e.preventDefault();

    console.log("Ici");
    // YK: Bellow is my code
    var jsonString = JSON.stringify($('#form_newCours').serializeObject());
    console.log($('#form_newCours').serialize());
    $.ajax({
      type: "POST",
      data: jsonString,
      url: "/cours/",
      contentType: "application/json"
    });
  });

});

有一个fiddle here。它不会做任何事情，但是当您单击按钮时，您的浏览器控制台将显示禁止请求，表明正在尝试发送数据。

Answer 5

您可以点击按钮

设置选择器

    $('#btn-newCours').on('click',function (e)

或者将表单提交设置在表单提交（这是更好的），如同其他建议的

表单提交按钮onclick不会调用我的JS函数

5 个答案: