Capturing a form submit with jquery and .submit

后端未结

关注

 5  1507

I\'m attempting to use jQuery to capture a submit event and then send the form elements formatted as JSON to a PHP page. I\'m having issues capturing the submit though, I st

相关标签:

5条回答

野性不改

2020-12-02 15:40

Just a tip: Remember to put the code detection on document.ready, otherwise it might not work. That was my case.

0 讨论(0)
发布评论:

提交评论
- 加载中...

庸人自扰

2020-12-02 15:40

$(document).ready(function () {
  var form = $('#login_form')[0];
  form.onsubmit = function(e){
  var data = $("#login_form :input").serializeArray();
  console.log(data);
  $.ajax({
  url: "the url to post",
  data: data,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  },
  error: function(xhrRequest, status, error) {
    alert(JSON.stringify(xhrRequest));
  }
});
    return false;
  }
});

<!DOCTYPE html>
<html>
<head>
<title>Capturing sumit action</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form method="POST" id="login_form">
    <label>Username:</label>
    <input type="text" name="username" id="username"/>
    <label>Password:</label>
    <input type="password" name="password" id="password"/>
    <input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>

</body>

</html>

0 讨论(0)

情歌与酒

2020-12-02 15:46

Wrap the code in document ready and prevent the default submit action:

$(function() { //shorthand document.ready function
    $('#login_form').on('submit', function(e) { //use on if jQuery 1.7+
        e.preventDefault();  //prevent form from submitting
        var data = $("#login_form :input").serializeArray();
        console.log(data); //use the console for debugging, F12 in Chrome, not alerts
    });
});

0 讨论(0)

不要未来只要你来

2020-12-02 15:47

try this:

Use ´return false´ for to cut the flow of the event:

$('#login_form').submit(function() {
    var data = $("#login_form :input").serializeArray();
    alert('Handler for .submit() called.');
    return false;  // <- cancel event
});

Edit

corroborate if the form element with the 'length' of jQuery:

alert($('#login_form').length) // if is == 0, not found form
$('#login_form').submit(function() {
    var data = $("#login_form :input").serializeArray();
    alert('Handler for .submit() called.');
    return false;  // <- cancel event
});

OR:

it waits for the DOM is ready:

jQuery(function() {

    alert($('#login_form').length) // if is == 0, not found form
    $('#login_form').submit(function() {
        var data = $("#login_form :input").serializeArray();
        alert('Handler for .submit() called.');
        return false;  // <- cancel event
    });

});

Do you put your code inside the event "ready" the document or after the DOM is ready?

0 讨论(0)

死守一世寂寞

2020-12-02 15:48

Just replace the form.submit function with your own implementation:

var form = document.getElementById('form');
var formSubmit = form.submit; //save reference to original submit function

form.onsubmit = function(e)
{
    formHandler();
    return false;
};

var formHandler = form.submit = function()
{
    alert('hi there');
    formSubmit(); //optionally submit the form
};

0 讨论(0)