How can I submit a form without reloading the page

Question

I have this html example form that I need to submit to MySQL table without having to refresh the page. Basically the main idea is to keep the username value in the input field after the data is sent. I have been struggling for days trying to use Ajax and JQuery functions to achieve my goal but I cannot get it right, that's why I'm only posting this piece of html code, I'm open to ideas, if you can please provide some code. Thank you so much.

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <form method="post" name="form">
            name:<input id="name" name="name" type="text" />
            <select id="gender" name="gender"> 
                <option value="">Gender</option>
                <option value="1">Male</option>
                <option value="2">Female</option>
            </select>
            <input type="submit" value="Submit" class="submit"/>
        </form>
    </body>
</html>

Inside my php file:

<?php

$dbhost = 'localhost';
$dbuser = 'Myuser';
$dbpass = 'Mypass';
$db = 'Mydb';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($db);

$name = $_POST['name'];
$gender = $_POST['gender'];

mysql_query("INSERT INTO callWrapper ('user','data')
        VALUES ('$name','$gender'") or die(mysql_error());

?>

Questions asking for code should **demonstrate a minimal understanding of the problem being solved**. Include attempted solutions, why they didn't work, and the expected results. See also: [Stack Overflow question checklist](http://meta.stackoverflow.com/questions/156810/stack-overflow-question-checklist) . — John Conde, Jun 02 '14 at 17:23

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

Use event.preventDefault() in jQuery:

$("form").submit(e) {
  e.preventDefault();
  // the rest of your code
}

See here for more details.

If you do not want to use jQuery, you can do it like this:

<form onsubmit="myFormFunction();return false">

Bear in mind these do slightly different things as explained here

edited May 23 '17 at 12:06

Community

1
1

answered Jun 02 '14 at 17:24

ntzm

4,663
2
31
35

Thank you for the answer, i really not familiar with this, using this function how do i link this to the query to post the data into Mysql? – Cessna Jun 02 '14 at 17:38
You would have to use AJAX and PHP to do that. I highly recommend looking up some AJAX examples, as it is a very powerful tool. – ntzm Jun 02 '14 at 17:40

score 0 · Answer 2 · edited Jun 02 '14 at 17:42

0

HTML:

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <form method="post" name="form" id="frm_data">
            name:<input id="name" name="name" type="text" />
            <select id="gender" name="gender"> 
                <option value="">Gender</option>
                <option value="1">Male</option>
                <option value="2">Female</option>
            </select>
            <input type="button" value="Submit" class="submit" id="btn_submitForm"/>
        </form>
    </body>
</html>

JS:

// bind click event 
$('#btn_submitForm').click(function(e){
    e.preventDefault();

    var url = 'Your PHP File URL';
    var formData = $("#frm_data").serializeObject();

    $.post(url, formData,
        function(data) {
             //alert(data);
        }
    );
});

edited Jun 02 '14 at 17:42

ntzm

4,663
2
31
35

answered Jun 02 '14 at 17:30

prava

3,916
2
24
35

1

Please stop using `alert()` for troubleshooting. – Jay Blanchard Jun 02 '14 at 17:31
I commented the `alert` code so that user can check with anything they want. But anyway thanks for pointing. – prava Jun 02 '14 at 17:32
i have create this php (code added at the top) file with this query can you please check if there is anything wrong. – Cessna Jun 02 '14 at 17:49

score 0 · Answer 3 · answered Jun 03 '14 at 05:01

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
           $("#frm_data").submit(function(){
            $.ajax({
                type: "POST", // data send format POST/GET
                url: "./process_form.php", // file url for data processing 
                data:  $("#frm_data").serialize(), // all form field are serialize  
                dataType: "json", // response type xml, json, script, text, htm
                success: function(data) {
                    alert('hi');
                }
            });
           });            
        });
        </script>
    </head>
    <body>
        <form method="post" name="form" id="frm_data" onsubmit="return false;">
            name:<input id="name" name="name" type="text" />
            <select id="gender" name="gender"> 
                <option value="">Gender</option>
                <option value="1">Male</option>
                <option value="2">Female</option>
            </select>
            <input type="submit" value="Submit" class="submit" id="btn_submitForm"/>
        </form>
    </body>
</html>

for the reference  check the url : http://api.jquery.com/jquery.post/

How can I submit a form without reloading the page

3 Answers3