javascript - 如何自动触发提交表单并使用preventDefault

Question

我有两种在页面上使用表单的方法。 第一个是用户在输入字段中输入内容并单击提交按钮时的标准方式。 第二个是根据查询字符串是否传递到页面来自动填写和提交表单。 (www.website.com/contact?fillform=true)

一切正常，除了我还需要在传递查询字符串时触发提交按钮，但目前它只是刷新页面。

我已经完成了 PHP 的一部分，我已经检查了变量，它们没问题。

这里是Codepen ， e.preventDefault() 被注释掉，因为它在窗口加载时不起作用

$(window).load(function() {

    // Function for submitting form 
    function submitForm(e) {

        console.log('I am in');

        e.preventDefault();
        jQuery.ajax({ 
            ... // Submit form
        })

    }

    // Normal way of submitting form, works ok
    $contactForm.on('submit', function(e) {
        submitForm(e);
    });


    // This should trigger form automatically
    if(fillFormAutomatically) {
        // Everything so far works ok
        // I just need to trigger form without page refresh but none of these works
        $submitBtn.trigger('click');
        $submitBtn.triggerHandler('click');
        $contactForm.submit(e);
        $contactForm.submit(function(e) {
            console.log(e); // nothing in console shows here
            submitForm(e);
        });
        submitForm(); // This triggers function but I can't pass event?
    }

});

Answer 1

我认为存在几个问题。

.load() 在 jQuery 1.8 中已被弃用，因此不要使用它。请参阅:https://api.jquery.com/load-event/

其次，当你在window.ready()上调用submitForm()时，没有任何事件。所以你试图在未定义时调用 .preventDefault() 。只需将其移至 .submit() 函数即可。

这能回答你的问题吗？

  $(window).ready(function() {
    
    var $form = $("#form");
    var $submitBtn = $("#submitBtn");

    // Send form on window load
    submitForm();

    // Normal way
    $form.submit(function(e) {
      e.preventDefault();
      submitForm(e);
    });

    // Send form
    function submitForm() {
        $('#vardump').append('Sending form...');
    }
    
  });
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="form">
  <input type="text" value="Somedata">
  <button id="submitBtn">Submit</button>
  
</form>

<div id="vardump"></div>