CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Outdated Computer Tech
Outdated Computer Tech

Reputation: 2026

ajax on submit no refresh form using php

ok so i know this ajax works, but i cant seem to understand why it's not submitting here.

<script type="text/javascript">
$(function(){
    $('input[type=submit]').click(function(){
        $.ajax({
            type: "POST",
            url: "postitem.php",
            data: $("#myform").serialize(),
            beforeSend: function(){
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data){
                $('#result').html(data);
            }
        });
    });
});

submit form 

<form action="" method="post" onsubmit="return false;" id="myform">

submit button

<input type="hidden" value="Post" name="submit" /> 
<button type="submit" title="Done" style="height:33px; width:50px">
    <img src="../../css/images/plus_25.png" />
</button>

i'm pretty something is wrong with the button, but i want to keep the way the button is because alot of my other forms use this same button, thanks if you can explain to me why click this submit button does nothing.

Upvotes: 3

Views: 14078

Answers (3)

MonkeyZeus
MonkeyZeus

Reputation: 20737

Not all browsers interpret a click attached to a submit button as submitting the form so you are effectively just negating the click of that button.

Preventing a form submission should preferably be captured by attaching the submit handler to the <form> when you have a <input type="submit"> or <button type="submit> so this is the best way to assure success:

jQuery

$(function(){
    $('#myform').on('submit', function(e){

        // prevent native form submission here
        e.preventDefault();

        // now do whatever you want here
        $.ajax({
            type: $(this).attr('method'), // <-- get method of form
            url: $(this).attr('action'), // <-- get action of form
            data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
            beforeSend: function(){
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data){
                $('#result').html(data);
            }
        });
    });
});

HTML

<form action="postitem.php" method="POST" id="myform">
    <input type="hidden" value="Post" name="submit" /> 
    <button type="submit" title="Done" style="height:33px; width:50px">
        <img src="../../css/images/plus_25.png" />
    </button>
</form>

Upvotes: 2

Mouhamed Halloul
Mouhamed Halloul

Reputation: 209

try this : 

<script type="text/javascript">
$(function(){
    $('input[type=submit]').click(function(e){
e.preventDefault(); // prevent the browser's default action of submitting 
        $.ajax({
            type: "POST",
            url: "postitem.php",
            data: $("#myform").serialize(),
            beforeSend: function(){
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data){
                $('#result').html(data);
            }
        });
    });
});

Upvotes: -1

showdev
showdev

Reputation: 29168

You are selecting an <input> instead of a <button>. I had success by changing your jQuery selector from this:

$('input[type=submit]')

to this:

$('button[type=submit]')

http://jsfiddle.net/H3Bcc/

Upvotes: 6

Related Questions