如何让AJAX函数处理提交表单

Question

I am creating this simple search form

<form id="myForm" method="POST">
    <table>
        <tr>
            <td><input type="text" name="search" placeholder="Search Accounts" /></td>
            <td><button type="submit">Search</button></td>
        </tr>       
    </table>
    <br/>
</form>

I don't want my form to go to another page. That is why there is no action. I would like AJAX function to handle that. But it is not working.

I have tried doing the javascript,

$('#myForm').click(function(){
    $.ajax({
            url: ROOT_URL + 'account/send',
            type: "post",
            dataType: "text"
        }).done(function(data) {
            $('#accounts-container').html(data);
    });
});

When I try to implement this, It directed me to the home page.

EDIT

Update: The .submit and preventDefault works. The problem now is the data. Where does it go? I need the data(name="search") textbox back to my controller.

In my controller I collect the data,

List<Users> list = accountService.getUserList(search);

If it were just a form with action, the form will be submitted along with the data.

Answer 1

Please read this before used AJAX function handle the submit form

  $('#myForm').submit(function(){ $.ajax({ url: ROOT_URL + 'account/send', type: "post", dataType: "text" }).done(function(data) { $('#accounts-container').html(data); }); }); 

Please try this.

Ajax Function used submit event.

Answer 2

You need to change the $('#myForm').click() to $('#myForm').submit()

Than you have to cancel the submit event. Explanation from jQuery API Dock :

Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.

$( "#target" ).submit(function( event ) {
     $.ajax({
        url: ROOT_URL + 'account/send',
        type: "post",
        dataType: "JSON",
        data: { name: "search" },
     }).done(function(data) {
        $('#accounts-container').html(data);
     });
     event.preventDefault();
});

In this case the submit event executes the ajax call, then it prevents the default behavior of the submit event (it doesn't reload the page).

Answer 3

There are 3 ways to prevent a change of your page with little changes in your code:

1) Change your button into

<button type="button">Submit</button>

To prevent it form submitting your form, and just triggering you AJAX function which handles the submission;

2) Change the "trigger" of your jquery function to

$('#myForm').submit(function(){

so it will fire jquery on submit and as default behavior will prevent action redirect from happening;

3) add a

event.preventDefault();

or

return false;

immediately before closing jour AJAX function.

For what concerns collecting yor data, you just have to pass the value of your input to your AJAX function (assign the id="searchinput" to your search text input):

url: ROOT_URL + 'account/send',
data: {yourvarname:$("#searchinput").val()},
type: "post",

<input type="text" name="search" id="searchinput" placeholder="Search Accounts" />

Answer 4

You said I dont want my form to go to another page. That is why there is no action. I dont want my form to go to another page. That is why there is no action.

If so add onclick="return false" to your element and try it!

 //add onclick false
 <form id="myForm" method="POST" onclick="return false;">
        <table>
            <tr>
                <td><input type="text" name="search" placeholder="Search Accounts" /></td>
                <td><button type="submit">Search</button></td>
            </tr>       
        </table>
        <br/>
    </form>

or add return false; to your ajax function last line

$('#myForm').click(function(){
    $.ajax({
            url: ROOT_URL + 'account/send',
            type: "post",
            dataType: "text"
        }).done(function(data) {
            $('#accounts-container').html(data);
    });
    return false;//here 
});

Answer 5

 $('#btnSubmit').click(function(){ alert("Here you can make your ajax request and get response from action"); var value= "search text";// please get your search value here and pass. $.ajax({ url: ROOT_URL + 'account/send', data: {search: value}, type: "post", dataType: "text" }).done(function(data) { $('#accounts-container').html(data); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <button type="submit" id="btnSubmit">Search</button> 

Answer 6

Use button type instead of submit and add id attribute. So change

<td><button type="submit">Search</button></td>
to
<td><button type="button" id="submitFormBtn">Search</button></td>

Add id to your textbox.

<input type="text" id="search" name="search" placeholder="Search Accounts" />

In you JS, use click function on submitFormBtn.

$('#submitFormBtn').click(function(){
$.ajax({
        url: ROOT_URL + 'account/send',
        type: "post",
        data : {searchText : $('#search').val()},//get the textbox value and pass it
        dataType: "text"
    }).done(function(data) {
        $('#accounts-container').html(data);
  });
});

On your server side method, use the variable name - searchText to get the data