CODEWITHSUNDEEP
phpjqueryhtml
Caffeine Coder
Caffeine Coder

Reputation: 1879

To display result on the same webpage

I am using php, mysql and ajax to display a contact form , but the problem is that the output "1 record inserted" gets showed on the next page . I want to be displayed on the same page on submit .

Following is the code

validation.html

<html>
<head>
    <title>Contact Form</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script type="text/javascript" language="javascript">

 //  <script type="text/javascript">

$(document).ready(function(){ 
    $("#myButton").click(function() { 
    alert("Hii");
        $.ajax({
        cache: false,
        type: 'POST',
        url: 'validation.php',
        data: $("#contact").serialize(),
        success: function(d) {
            $("#record").html(d);
        }
        });
    }); 
});

</script>
    </head>
    <body>
    <form method="post" id="contact" action="validation.php">
    Name: <input type="text" name="name"> <br>
    E-mail: <input type="text" name="email"> <br>
    Password: <input type="text" name="pass"> <br>
    Mobile: <input type="number" name="mobile"> <br>
    <br>
    <input type="submit" value="SUBMIT" id="mybutton"/>
    </form>
    <div id="record">Record has been inserted</div>
    </body>
</html>

Can anyone please point out how i can go on doing so or what all changes are needed ?

Upvotes: 0

Views: 212

Answers (6)

harish
harish

Reputation: 295

try this

 <input type="button" id="myButton">Submit</input>

OR Submit

Upvotes: 0

Eko Dedy
Eko Dedy

Reputation: 409

its open another page because your form will do submit procces when you click #myButton.
there are some way to solve this.

1. add attribute into your form tag:

<form method="post" id="contact" action="validation.php" onsubmit="return false;">

or
2. make your button to prevent submit procces by returning false:

$(document).ready(function(){ 
    $("#myButton").click(function() { 
        alert("Hii");
        $.ajax({
        cache: false,
        type: 'POST',
        url: 'validation.php',
            data: $("#contact").serialize(),
            success: function(d) {
                $("#record").html(d);
            }
        });
        return false;
    }); 
});

Upvotes: 0

immayankmodi
immayankmodi

Reputation: 8590

try to call function onclick event of input element

<input type="submit" value="SUBMIT" id="mybutton" onclick="return myFunction()"/>

then call this function

function myFunction()
{
    $.ajax({
    cache: false,
    type: 'POST',
    url: 'validation.php',
    data: $("#contact").serialize(),
    success: function(d) {
        $("#record").html(d);
    }
    });
  return false;
}

also replace this 

<form method="post" id="contact" action="validation.php">

with

<form method="post" id="contact" action="validation.php" onsubmit="return false;">

It should help you! Thanks.

Upvotes: 0

Ashish Ratan
Ashish Ratan

Reputation: 2870

U are submitting the button, Just change

<input type="button" id="myButton">Submit</input>
OR
<button id="myButton">Submit</button>

It will invoke your ajax request.

Upvotes: 1

Nick Schmidt
Nick Schmidt

Reputation: 1527

Currently the form is submitted by your button, because it is a Submit-Button. If you don't want the submission of the form there are several methods, but these two are the best:

// Use prevent default
$("#myButton").click(function(e) { // This 'e' is important
  e.preventDefault()
  # rest of the function here
});

or you could just replace your Submit button with a link tag (just with a placeholder href) like here:

<html>
  <head>
    <title>Contact Form</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" language="javascript">

    <script type="text/javascript">
      // Actual Javascript code here
    </script>
  </head>
  <body>
    <form method="post" id="contact" action="validation.php">
    Name: <input type="text" name="name"> <br>
    E-mail: <input type="text" name="email"> <br>
    Password: <input type="text" name="pass"> <br>
    Mobile: <input type="number" name="mobile"> <br>
    <br>
    <a href="#" id="mybutton">SUBMIT</a>
    </form>
    <div id="record">Record has been inserted</div>
  </body>
</html>

Best case would be combining both.

Upvotes: 0

Sterling Archer
Sterling Archer

Reputation: 22405

It's because when you click #myButton, you're submitting the form and it redirects you.

Simply prevent the default action.

$("#myButton").click(function(event) { 
event.preventDefault();
alert("Hii"); //what is this for???
    $.ajax({
    cache: false,
    type: 'POST',
    url: 'validation.php',
    data: $("#contact").serialize(),
    success: function(d) {
        $("#record").html(d);
    }
    });
});

Upvotes: 3

Related Questions