更改表单'的onsubmit函数

Change form's onsubmit function

本文关键字：onsubmit 函数 表单      更新时间：2023-09-26

我想在执行任何其他提交操作之前执行验证。不幸的是，我无法控制表单上onsubmit属性的值

<form id="myForm" onsubmit="return stuffICantChange()"></form>

我尝试了以下代码和其他几种方法，但没有成功：

$("#myForm").onsubmit = function() {
    console.log("hi");
}

感谢您的帮助。

如果这是一份副本，请在标记之前告诉我，以便我在必要时反驳这一说法。

编辑：

我的代码按要求：

<form id="form_ContactUs1" name="form" method="post" action="index.php" onsubmit="return  Validator1(this) &amp;&amp; ajaxFormSubmit(this); return false">
<div class="form">
    <div class="form-staticText">
        <p>We look forward to hearing from you! Please fill out the form below and we will get back with you as soon as possible.</p>
    </div>

    <div class="form-group">
        <input class="form-control" placeholder="Name" id="IDFormField1_Name_0" name="formField_Name" value="" size="25" required="" type="text">
        <span class="form-control-feedback"></span>
    </div>

    <div class="form-group">
        <input class="form-control" placeholder="Email" id="IDFormField1_Email_0" name="formField_Email" value="" size="25" required="" type="email">
        <span class="form-control-feedback"></span>
    </div>

    <div class="form-group">
        <input class="form-control bfh-phone" data-format="ddd ddd-dddd" placeholder="Phone" id="IDFormField1_Phone_0" name="formField_Phone" value="" size="25" type="tel">
        <span class="form-control-feedback"></span>
    </div>

    <div class="form-group">
        <textarea class="form-control" placeholder="Comments" name="formField_Comments" id="IDFormField1_Comments_0" cols="60" rows="5" required=""></textarea>
        <span class="form-control-feedback"></span>
    </div>

    <div class="row submit-section">
        <input name="submit" class="btn btn-success submit-button" value="Submit" type="submit">
    </div>
</div>


$( "form" ).each(function() {
    console.log( $(this)[0] );
    sCurrentOnSubmit = $(this)[0].onsubmit;
    $(this)[0].onsubmit = null;
    console.log( $(this)[0] );
    $( this )[0].onsubmit( function() {
        console.log( 'test' );
    });
});

除了已经执行的函数之外，您应该能够不引人注目地向#myForm添加另一个onsubmit函数：

function myFunction() {
    ...
}
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit',myFunction,false);

尝试

$("#myForm").submit(function(){
   .. Your stuff..
   console.log("submit");
   return false;
});

这将在每次提交表单时触发，然后返回false结束表单默认操作。

试试这个，它是纯Javascript：

function overrideFunction(){
  console.log('Overrided!');
}
var form;
form = document.querySelector('#myForm');
form.setAttribute('onsubmit','overrideFunction()');

谨致问候。

您应该在表单中的每个字段上触发一个更改事件来检查验证。

$('input').on('change', function(e) {
   if($(this).val() == '') {
        console.log('empty');
   } 
});

这将帮助用户更快地静音，然后等待提交。

您也可以在提交之前尝试单击事件。

$('#formsubmitbutton').on('click', function(e) {
   //your before submit logic
   $('#form').trigger('customSubmit'); 
});
$('#form').on('customSubmit', function(e) {
  //your normal submit
});

试试这个代码：

$("#myForm").on('submit',function() {
    console.log("hi");
});

我偶然发现这篇文章，并将其他javascript方法组合在一起修改html，我想我会将其添加到堆中，作为我认为更简单、更直接的解决方案。

document.getElementById("yourFormID").setAttribute("onsubmit", "yourFunction('text','" + Variable + "');");
<form id="yourFormID" onsubmit="">
  ....
 </form>

相关文章：