CODEWITHSUNDEEP
jqueryajax
sukru.b
sukru.b

Reputation: 55

Form data submitted using jQuery/AJAX does not update the <div> content if the submit button is an image

I am trying to show the AJAX response in a div.

It works if I use 'Submit' button, and it does not work if I use an image as a button.

Here is the working Example of the problem

It seems like it should work since it hits the same line in the code and brings back the data. I already spent about 8 hours with no luck. Any help would be greatly appreciated.

here is the code:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #editForm-1 input{float:left; margin:0 5px; padding:5px; border:1px solid red;  }
            #editForm-1 .imgSubmit {margin:0; padding:0 10px; border:none;}
        </style>
        <script type="text/javascript" src="javascripts/jquery-1.12.0.min.js"></script>

        <script type="text/javascript">
            function performAjaxSubmission(formID) {
                var URL = "http://310it.com/test/updateDB-basic.php";
                var formData = $("#editForm-" + formID).serialize();
                $.post(URL , formData, function(theResponse){
                    alert("Data: " + theResponse + "\nStatus: " + status);
                    $("#contentRight").html(theResponse);
                    //  $("#contentRight").text(theResponse);                               //  This WORKS
                    //  document.getElementById("contentRight") = theResponse;              //  This does not work
                    //  document.getElementById("contentRight").innerHTML(theResponse);     //  This does not work
                });                                                              
            }                                 
        </script>
    </head>

    <body>
        <div id="contentRight">
            <p>AJAX Response will be displayed here.</p>
            <p>&nbsp;</p>
        </div><!-- endof contentRight -->

        <form id="editForm-1" name="editForm-1" method="post" action="">
            <input type="hidden" name="formID" id="formID" value="1">
            <input type="hidden" name="action" id="action" value="edit">
            <label for="editTestName">
                <input type="text" name="editTestName" id="editTestName" />
            </label>
            <input type='button' value='Submit form' title="Submit" onClick='performAjaxSubmission(1)'>
            <input type="image" src="/test/images/icon-update-02.png" class="imgSubmit" title="Submit" onClick='performAjaxSubmission(1)'>
        </form>

    </body>
</html>

PHP:

<?php 
/************************************
           updateDBbasic.php
************************************/

?><pre><?php
    print_r($_POST);
?></pre>

Upvotes: 0

Views: 632

Answers (1)

michael
michael

Reputation: 758

I'd recommend using a button with an image tag instead of an input of type image; the latter is a bit buggy.

Change:

<input src="/test/images/icon-update-02.png" class="imgSubmit" title="Submit" onclick="performAjaxSubmission(1)" type="image">

To:

<button style="background-color: #fff" type="button" class="imgSubmit" title="Submit" onclick="performAjaxSubmission(1)">
    <img src="/test/images/icon-update-02.png">
</button>

Enjoy (:

Upvotes: 1

Related Questions