form data posted to same page

form post to same page Hi i am using jquery but issue is i am unable to load the partial page on submit on button like this!

i have the following form

<form name="loginform" id="loginform"开发者_JAVA百科>
<input type="text" name="isname" id="isname">
<select name="hi" id="hi">
<option value=1">Yes</option>
<option value=1">No</option>
</select>
<input type="submit" name="button" id="button" value="Submit">
</form>

Now my concern is when i fill the data and click the Submit button, i have the following

declared just under the form and i want the submission should load data in the following table which has id "loaddata" and page should not refresh

Thanks

ok, i tried to AJAXify the form:

but still it showed me nothing!

the table with id="loaddata"> is on the same page and inside it do i need to include any file like where i am doing the processing

You could AJAXify the form:

$(function() {
    $('#loginform').submit(function(evt) {
        evt.preventDefault();
        $.ajax({
            url: this.action, // make sure you set an action attribute to your form
            type: 'POST',
            data: $(this).serialize(),
            success: function(result) {
                $('#loaddata').html(result);
            }
        });
    });
});

Now when the form is submitted it will send an AJAX request to the given server side action and will inject the result into the #loaddata container.

<form name="loginform" id="loginform">
<input type="text" name="isname" id="isname">
<select name="hi" id="hi">
<option value=1">Yes</option>
<option value=1">No</option>
</select>
<input type="submit" name="button" id="button" value="Submit">
</form>

use jquery ajax to post form and load the result where ever desired using append, appendTo or after

$(function(){
$("#button").click(function(e){
    e.preventDefault(); //prevent the default submission of the form
    $.ajax({
    url:'/path/to/server.php',//or an ActionResult what ever server side you are using
    data:{data:$("#loginform").serialize()},
    type:'POST',
    success:function(response){//success event handler, fires in case of success of ajax request
    $("#loaddata").append(response);
    },
    error:function(jxhr){ //error handler, fires if some error occurs
    console.log(jxhr.responseText);
    }
    });
 });
});