post html form fields using AJAX

Question

I need to edit some text in database using AJAX.

I have a HTML form input fields by default all the input fields are filed with data already in the database. so if the user want to edit those data he must type new data in the same input boxes. and after he clicks on the Edit link form data must be post in to a another page. i can handle all the process after that. only thing i don't know how to post forms through AJAX

<form id="test_form" name="test_form">
                <div style="width: 300px; height: auto; float: left; margin-top: 15px;">
                    <input name="sub_cat_two_name" id="sub_cat_two_name" value="<?php echo $row['sub_cat_two_name'] ?>"/>
                </div>
                <div style="width: 300px; height: auto; float: left; margin-top: 15px;">
                    <input name="cat_name" id="cat_name" value="<?php echo $row['cat_name'] ?>" />
                </div>
                <div style="width: 300px; height: auto; float: left; margin-top: 15px;">
                    <span>
                        <a onclick="send_edit_sub_cat()" href="<?php echo 'edit_sub_cat/' . $row['sub_cat_two_id'] ?>">Edit</a> /
                        <a href="<?php echo 'delete_sub_cat/' . $row['sub_cat_two_id'] ?>">Delete</a>
                    </span>
                </div>
            </form>



var xmlhttp;
                function loadXMLDoc(url, cfunc)
                {
                    if (window.XMLHttpRequest)
                    {// code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp = new XMLHttpRequest();
                    }
                    else
                    {// code for IE6, IE5
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange = cfunc;
                    xmlhttp.open("POST", url, true);
                    xmlhttp.send();
                }

 function any_function_for_post_my_form_data(str)
                {

                    loadXMLDoc("http://localhost/ajax_showbrdep_admin/" + str, function()
                    {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                        {
                            document.getElementById("myDivAdmn").innerHTML = xmlhttp.responseText;
                        }
                    });
                }

I used above ajax codings to do some other works for me. Can i use this code pattern to do form submitting?

Possible duplicate of http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form — user2936213, Jan 21 '14 at 10:50
I don't think so. because i want to know how to do this using the functions that i already having. — Yasitha, Jan 21 '14 at 10:52
You can see this tutorial also: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/ — user2936213, Jan 21 '14 at 10:55
if you wish you can go for jquery to make things little easier http://api.jquery.com/jquery.post/ — Pranay Bhardwaj, Jan 21 '14 at 11:02

score -1 · Answer 1 · edited Aug 21 '17 at 19:51

This jQuery code is now doing my work well. Still, I didn't try it in earlier Internet Explorers. It is working for Firefox, IE10, and Chrome.

$(document).ready(function() {
                    var frm = $('#test_form');
                    $("input").change(function(event) {
                        // frm.submit(function(event) {
                        $.ajax({
                            cache: false,
                            type: frm.attr('method'),
                            url: frm.attr('action'),
                            data: $("#test_form").serialize(),
                            complete: function(r) {
                                //alert(r.responseText);
                                $("#myDivAdmn").html(r.responseText);
                            }
                        });
                        event.preventDefault();
                    });
                });

post html form fields using AJAX

1 Answers1