单击1个表单中的2个提交按钮中的1个时，如何运行脚本 - How can I run a script when 1 of my 2 submit buttons within 1 form is clicked?

How can I run a script when 1 of my 2 submit buttons within 1 form is clicked?

嗨，我在一个表单中有两个提交按钮。下面的脚本通过向用户发送警报消息来帮助防止提交空字段。然而，我只需要它在点击我的两个提交按钮之一的情况下运行。因此，换言之，如果单击一个按钮，它将提交带有或不带有空白字段的表单，而另一个按钮将运行下面的脚本，不允许使用空白字段提交表单。非常感谢您的帮助，谢谢。

   <script type="text/javascript">
     $('form').on('submit', function () {
        var thisForm = $(this);
        var thisAlert = thisForm.data('alert');
        var canSubmit = true;
        thisForm.find('[data-alert]').each(function(i) {
            var thisInput = $(this);
            if ( !$.trim(thisInput.val()) ) {
                thisAlert += ''n' + thisInput.data('alert');
                canSubmit = false;
            };
        });
        if( !canSubmit ) {
            alert( thisAlert );
            return false;
        }
    });
    </script>

与其连接到表单提交事件，不如连接到要验证的按钮的单击事件。点击事件返回true将允许提交，false将阻止提交。

您有一个表单和两个提交按钮，默认情况下，这两个按钮都会提交表单。要防止一个按钮提交，请添加一个点击处理程序，它既可以阻止默认的提交操作，也可以执行您希望该按钮执行的任何其他操作。

HTML

<form id="form">
    <input type="text" value="something" />
    <input id="submit1" type="submit" value="send" />
    <input id="submit2" type="submit" value="ignore" />
</form>

JavaScript

$('#submit2').on('click', function (event) {
    event.preventDefault();
    // Form will not be submitted
    // Do whatever you need to do when this button is clicked
});

$('form').on('submit', function () {
    var thisForm = $(this);
    var thisAlert = thisForm.data('alert');
    var canSubmit = true;
    thisForm.find('[data-alert]').each(function(i) {
        var thisInput = $(this);
        if ( !$.trim(thisInput.val()) ) {
            thisAlert += ''n' + thisInput.data('alert');
            canSubmit = false;
        };
    });
    if( !canSubmit ) {
        alert( thisAlert );
        return false;
    }
});

演示https://jsfiddle.net/BenjaminRay/dqqfLxav/

您可以尝试添加click事件并将类添加到提交按钮中。所以你知道点击哪个按钮会相应地提交表格。

$('form button').click(function(){
  if($(this).hasClass('.submit-without-validation')) { 
     $('form').submit();
  }
  if($(this).hasClass('.submit-with-validation')) { 
     //Do your validation and then submit
  }
});

有很多答案可以用来实现您想要的。你也可以试试这个。以下是一些解释。基本上，您需要使用html5数据属性来设置区分两个按钮的值。当点击按钮时，您可以使用以下代码的条件检查值：

HTML

<form>
  <input type="text" value="" id="name"/>
  <input type="submit" class="btn_submit" value="Submit validate" data-valid="yes"/>
  <input type="submit" class="btn_submit" value="Submit without validate" data-valid="no"/>
</form>

$(document).on('click', '.btn_submit', function(e){
    e.preventDefault();
    var data_valid = $(this).data('valid');    
    if(data_valid == "yes")
    { 
         // doing your stuff here for validation like example below
         var input = $('#name').val();
         if(input=="")
         {
             alert('required');
             return;
         }        
         // After the validation process finish, submit the form 
         $('form').submit();  
    }
    else
    {
        // submit without validation
        $('form').submit();            
    }    
});