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 ?
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);
}
});
});
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.
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>
SUBMIT
</form>
<div id="record">Record has been inserted</div>
</body>
</html>
Best case would be combining both.
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.
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;
});
});
try this
<input type="button" id="myButton">Submit</input>
OR
Submit
Related
I am trying to submit a child-form, inside parent-form via ajax-jquery, so that it does not refresh entire page. Code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$(document).on('submit', '#form-2', function() {
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'a2.php',
data : data,
success : function(data) {
$("#form-2").fadeOut(500).hide(function() {
$(".result").fadeIn(500).show(function() {
$(".result").html(data);
});
});
}
});
return false;
});
}) // document ready ends here;
</script>
</head>
<body>
<form action="a1.php" method="post" name="form-1" id="form-1">
<input type="text" name="f1" />
<input type="text" name="f2" />
<input type="text" name="f3" />
<input type="text" name="f4" />
<!-----form 2 ajax starts----->
<form method="post" name="form-2" id="form-2">
<input type="text" name="g1" />
<input type="submit" id="sf2">
</form><!-----form-2 ends----->
</form><!-----form-1 ends----->
</body>
</html>
But its not working, it does simply nothing. I too used - preventdefault()
Any help ? I am trying to simply submit form-2 value in database, from which some dropdown of form-1 is getting all option values.
You could use:
$(document).on('click', '#sf2', function(event) {
var g1 = $('#g1').val();
$.ajax({
type : 'POST',
url : 'a2.php',
data : {
g1: g1
},
success : function(data) {
$("#form-2").fadeOut(500).hide(function() {
$(".result").fadeIn(500).show(function() {
$(".result").html(data);
});
});
}
});
});
and use a normal button:
<input type="text" name="g1" id="g1" />
<button type="button" id="sf2">Submit</button>
This is not good style though as forms should not be nested.
I cannot get the alert to work after sending the data in ajax? Could anyone tell me what I'm doing wrong?
My form:
<body>
<form action="" id="form1" method="post">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" id="submit1" value="Submit">
</form>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
// AJAX SEND POST DATA
$('form').on('submit', function() {
var self = this;
$.ajax({
type: 'post',
url: 'submit2.php',
dataType: 'json',
data: $(self).serialize(),
success: function() {
alert("blabla");
}
});
});
</script>
This is my submit2.php file.
<?php echo "bla"; ?>
There is no problem with your HTML or JQuery code. The problem is with submit2.php file. Your AJAX function is looking for a JSON response. Return a JSON response from submit2.php
submit2.php
echo json_encode(array("message"=>"Here is the message"));
Your code should be like this:
HTML
<form action="" id="form1" method="post">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" id="submit1" value="Submit">
</form>
jQuery
$("#form1").submit(function(e){
e.preventDefault();
var self = this;
$.ajax({
type: 'post',
url: 'submit2.php',
// dataType: 'json', unless you're expecting json object as server response, remove this
data: $(self).serialize(),
success: function(data) {
alert(data);
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
});
submit2.php
<?php
if(isset($_POST['firstname']) && isset($_POST['lastname'])){
echo $_POST['firstname'] . " " . $_POST['lastname'];
}
?>
I'm making HTML, PHP and Ajax based site for my university class and having some problems that I can't figure out. Can I post my HTML based Registration Form using Ajax post method to my main PHP site? My code looks like this:
index.php
<form id="loginForm" action="login.php" method="POST">
Username: <input type="text" name="username" id="username"/><br/>
Password: <input type="password" name="password" id="password"/><br/>
<button id="submit">Login</button>
<button id="regButton">Register</button>
</form>
<div id="ack"></div>
<div id="regAjax"></div>
<script type="text/javascript" src="Script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Script/scriptAjax.js"></script>
register.html
<html>
<head><title>Registration Form</title></head>
<body>
<form id="regForm" action="process.php" method="POST">
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
First Name: <input type="text" name="fname"/><br/>
Last Name: <input type="text" name="lname"/><br/>
E-mail: <input type="text" name="email"/><br/>
<button id="register">Register</button>
</form>
<div id="rck"></div>
<script type="text/javascript" src="Script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Script/scriptAjax.js"></script>
</body>
</html>
scriptAjax.js
$("#regButton").click( function() {
$.post ???
$("#regButton").submit( function() {
return false;
});
});
So the main purpose of this to make the smoother page and that registration form would appear in <div id="regAjax"></div> place when Register button is clicked, that user could register not being redirected to another page. Is there a way to do that or I'm taking the wrong path now?
The general Idea is that you have to send the form data to a PHP script that will evaluate it and send a response.
$.post( "validate.php", function( data ) {
$( "#regAjax" ).html( data );
});
I recommend you study this page
$.ajax({
method: 'POST',
url: 'validate.php',
data: data,
success: function(result){
$( "#regAjax" ).html( result );
}
});
Please I am trying to simultaneously submit and validate my form to my database through the use of Ajax, but it is not working for me.
Here is my jquery
$(document).ready(function(){
$(".button").click(function(){
$("#myform").validate();
//Ajax to process the form
$.ajax({
type: "POST",
url: "process.php",
data: { firstname: $("#firstname").val()},
success: function(){
$('#message').html(data);
}
});
return false;
});
});
The problem is when I submit the form,the Ajax form submit to itself.
Please What is the right way to use the jquery validate and $.ajax together?
Pass data as a parameter in your success function:
success: function(data){
Your success function won't do anything because you haven't defined data
Try this (working for me as expected):
HTML Form:
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/css/screen.css" />
<script src="http://jquery.bassistance.de/validate/lib/jquery.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script>
// JQuery Script to submit Form
$(document).ready(function () {
$("#commentForm").validate({
submitHandler : function () {
// your function if, validate is success
$.ajax({
type : "POST",
url : "process.php",
data : $('#commentForm').serialize(),
success : function (data) {
$('#message').html(data);
}
});
}
});
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required />
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required />
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url" />
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</fieldset>
</form>
<div id="message"></div>
PHP Code:
<?php
echo $_POST['email'];
?>
You forget to pass the response
$(document).ready(function() {
$(".button").click(function() {
//check the validation like this
if ($("#myform").valid()) {
//Ajax to process the form
$.ajax({
type: "POST",
url: "process.php",
data: {
firstname: $("#firstname").val()
},
//you forget to passs the response
success: function(response) {
$('#message').html(response);
}
});
return false;
}
});
});
First of all, why would you submit form if validation is not passed?
Try this, if validate really validates:
$(function(){
$(".button").click(function(){
var myform = $("#myform");
if (myform.validate()) {
$.post("process.php", myform.serialize(), function(data){
$('#message').html(data);
});
}
return false;
});
});
I have a simple form page and i want to when the form is submit show the response message which came from my process.php in to colorbox. Thanks for your helping.
You could try with this
$("#link").colorbox({ inline:true, href: "#msg"});
$('input[type="submit"]').click(function(){
$.ajax({
type: "POST",
url: "process.php",
data: $('intpu[type="text"]').serialize(),
success: function(data){
$("#msg").html(data);
$("#link").click(); // My mistake $("#link").colorbox(); This doesn't work
return false;
}
});
return false;
});
Your html
<form name="exam" method="post">
<input size="60" type="text" name="quote" />
<input type="submit">
</form>
<a id="link" style="display:none"></a>
<div id="msg" style="display:none;"></div>