Button不断提交其他事件（jQuery）

I have 2 buttons in my form. One button is for preview only and the other one is for submitting form through AJAX

我的表格中有2个按钮。一个按钮仅供预览,另一个按钮用于通过AJAX提交表单

 <form id="form" action="" class="form" method="POST">
    <button id="btn_preview" type="button">  Preview </button>
    <button id="btn_save" type="submit">  Save </button>                                                                                
 </form>

My problem is when I click the button id="btn_preview" it always fires the event in button id="btn_save". How will I fix this?

我的问题是,当我点击按钮id =“btn_preview”时,它总是在按钮id =“btn_save”中触发事件。我该如何解决这个问题?

$('#btn_preview').click(function () {

    form = $('form');

    form.attr({
              'target':'_blank',
              'action':'https://www.google.com'
             }).submit();

    return false;

});

$("#btn_save").closest('form').on('submit', function() {

    $.ajax({
       type: 'POST',
       url: 'URL',
       data: $('form').serialize(),
       success: function(data) {

          alert("Success!");                          

       }
    });

    return false;

});

3 个解决方案

#1

Syntax error "})"

语法错误“})”

$('#btn_preview').click(function () {

        alert("Preview");
        return false;

    });

    $("#btn_save").closest('form').on('submit', function() {

        $.ajax({
           type: 'POST',
           url: 'URL',
           data: $('form').serialize(),
           success: function(data) {

              alert("Success!");                          

           }
        });

        return false;

    });

#2

Error is in your jquery code. Please update it with below one. The click event should finish with }); not )};

错误在您的jquery代码中。请用下面的一个更新。点击事件应该以})结束;不)};

$('#btn_preview').click(function (event) {    
    event.preventDefault();
    alert("Preview");
});

$("#btn_save").closest('form').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
       type: 'POST',
       url: 'URL',
       data: $('form').serialize(),
       success: function(data) {

          alert("Success!");                          

       }
    });
    return false;
});

#3

Error in your code, Please update it with below one. The click event and on submit should finish with }); not )};

代码出错,请用下面的代码更新。点击事件和提交应该以})结束;不)};

$('#btn_preview').click(function(){
 alert("Preview");
 return false;
});

$("#btn_save").closest('form').on('submit', function() {

$.ajax({
   type: 'POST',
   url: 'URL',
   data: $('form').serialize(),
   success: function(data) {

      alert("Success!");                          

   }
  });

   return false;

 });

jsfiddle: https://jsfiddle.net/s3s1hbxz/4/

You can also modify your code to target only form by id or class. For you case you html code <form id="form" action="" class="form" method="POST"> <button id="btn_preview" type="button"> Preview </button> <button id="btn_save" type="submit"> Save </button> </form>

您还可以修改代码,仅按ID或类定位表单。对于你的情况,你的HTML代码

So you can try like this:

所以你可以尝试这样:

$('#btn_preview').click(function(){
 alert("Preview");
 return false;
 });

$("form#form").on('submit', function() {

$.ajax({
   type: 'POST',
   url: 'URL',
   data: $('form').serialize(),
   success: function(data) {

      alert("Success!");                          

   }
  });

  return false;

});

It's means, it will trigger only submit button hit. jsfiddle: https://jsfiddle.net/s3s1hbxz/5/

这意味着,它只会触发提交按钮。 jsfiddle:https://jsfiddle.net/s3s1hbxz/5/

#1