无法在不重新加载页面的情况下提交表单

Question

I have the following code that i wish to use to submit form without reloading the page, but it reloads the entire page and when checked in console the script.php page is also not getting executed.

Code on index.php page

<script>
    $(function() {
        $(".submit").click(function() {
            var name = $("#name").val();
            var dataString = 'name=' + name;
            console.log(dataString);
            $.ajax({
                type: "POST",
                url: "script.php",
                data: dataString,
                success: function() {
                    $('#result').html(response);
                }
            });

            return false;
        });
    });
</script>

<form method="post" name="form">
    <input id="name" name="name" type="text" />
    <input type="submit" value="Submit" class="submit" />
</form>

<div id="result"></div>

code on script.php page

<?php
$name=$_POST['name'];
echo $name;
?>

Can anyone please tell how i can submit the form without reloading the page and also display the result from script.php page on index.php page

Answer 1

update your function. pass event object in function. and use event.preventDefault() to prevent default submit action.

$(".submit").click(function(e) {
e.preventDefault();

Answer 2

try this

<script>
$(function() {
    $(".submit").click(function(event) {
        event.preventDefault();
        var name = $("#name").val();
        var dataString = 'name=' + name;
        console.log(dataString);
        $.ajax({
            type: "POST",
            url: "script.php",
            data: dataString,
            success: function() {
                $('#result').html(response);
            }
        });

        return false;
    });
});

OR

<input type="button"  class="submit" />Submit

Answer 3

Do not mix form submit and button click .

If you are a click event of button then use type="button" and if you are doing $("form").submit() then use type="submit" .

Also check for

$(".submit").click(function(e) {
e.preventDefault();

and check your ajax post data , do

$.ajax({
            type: "POST",
            url: "script.php",     
            //changes made here           
            data: { name: $("#name").val()},
            //changes made here. you have not written response
            success: function(response) {
                $('#result').html(response);
            }
        });

Answer 4

You need to send the data from the script.php page back to your index.php page. Swich out the little bit of ajax for this:

  $.ajax({  
            type: "POST",  
            url: "script.php",  
            data: "datastring",
            dataType: "json",
            success: function(dataType){  
                $("#result").html(dataType); 
            }       
        }); 

In your script.php:

<?php
   $name=$_POST['name'];
   echo json_encode($name);
?>

Answer 5

Instead of listening to the input's click event, you should listen to the form's submit .

<script>
$(function() {
    $("#name-form").on('submit', function(e) {
        e.preventDefault(); // prevent form submission
        var name = $("#name").val();
        var dataString = 'name=' + name;
        console.log(dataString);
        $.ajax({
            type: "POST",
            url: "script.php",
            data: dataString,
            success: function(response) {
                $('#result').html(response);
            }
        });
    });
});
</script>

<form id="name-form" method="post" name="form">
    <input id="name" name="name" type="text" />
    <input type="submit" value="Submit" class="submit" />
</form>

<div id="result"></div>