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;
});
});
Related
I am not able to get the response to ajax success call back function. The response form the server is being directly printed on the browser
<body>
<script>
$(document).ready(function() {
$.ajax({
url: $("#form").attr("action"),
type: "POST",
data: $("#form").serialize(),
success: function(data) {
alert(data);
}
});
});
</script>
<form action="a.php" method="post" id="form">
<input type="text" name="name" id="name" placeholder="name" />
<input type="submit" value="submit" />
</form>
</body>
my php code
<?php
echo 'hii';
?>
Can you Replace AJAX script below mentioned.
<form method="post" id="form">
<input type="text" name="name" id="name" placeholder="name" />
<input type="submit" value="submit" />
</form>
$("#form").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: 'a.php',
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
I Have a form in PHP. when I am clicking the submit button I want to take two actions at the same time. how do I do that?
<script>
function myfunction(){
$.ajax({
type: 'post',
url: 'merchants.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
}
</script>
<div class="stdFormHeader"> New Merchant Registration</div>
<form action="" method="POST">
<label class="stdFormLabel">Merchant name : </label><input class="stdFormInput" type="text" name="merchantName" required><br>
<!-- <label class="stdFormLabel">Business Type : </label><select class="stdFormSelect" name="shopMarket" required>-->
<!-- <option value="shop">Shop</option>-->
<!-- <option value="market">Market Place</option>-->
<!-- </select><br>-->
<label class="stdFormLabel">Contact Person : </label><input class="stdFormInput" type="text" name="contactPerson" required><br>
<label class="stdFormLabel">Contact Number : </label><input class="stdFormInput" type="text" name="contactNumber" required><br>
<label class="stdFormLabel">Address : </label><textarea class="stdFormInputBox" name="address"></textarea><br>
<input class="stdFormButton" type="submit" name="submit" onclick="myfunction()" value="Apply">
</form>
Just do a submit again:
function myfunction(){
$.ajax({
type: 'post',
url: 'merchants.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
$.ajax({
type: 'post',
url: 'OtherFunction.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted again');
}
});
}
Please I am new to jQuery so i just copied the code:
<div id="container">
<input type="text" id="name" placeholder="Type here and press Enter">
</div>
<div id="result"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').focus();
$('#name').keypress(function(event) {
var key = (event.keyCode ? event.keyCode : event.which);
if (key == 13) {
var info = $('#name').val();
$.ajax({
method: "POST",
url: "action.php",
data: {name: info},
success: function(status) {
$('#result').append(status);
$('#name').val('');
}
});
};
});
});
</script>
And here is the php code:
<?php
if (isset($_POST['name'])) {
echo '<h1>'.$_POST['name'];
}
?>
Its Working perfectly but now i want to have more than one input field like this:
<input type="text" id="name" >
<input type="text" id="job">
but i don't know how to run the jQuery code for the 2 input fields so that it can transfer them to the php page. Please i need help
You can pass multiple values using data param of ajax request like this.
$.ajax({
method: "POST",
url: "action.php",
data: {
name: $('#name').val(),
job: $('#job').val()
},
success: function(status) {
$('#result').append(status);
$('#name, #job').val(''); // Reset value of both fields
}
});
You need to change your code with some addition in html and JS.
Wrap your inputs in form tag. and add a preventDefault on submit.
Use jQuery .serialize() method
and event.preventDefault()
event.preventDefault() : If this method is called, the default
action of the event will not be triggered. (it will prevent page
reload / redirection) to any page.
.serialize() : Encode a set of form elements as a string for
submission.
serialized string output will be like key=value pair with & separated. :
name=john&job=developer.....
HTML
<form id="myform">
<input type="text" id="name" placeholder="Type here and press submit">
<input type="text" id="job" placeholder="Type here and press submit">
<input type="submit" name="submit" value="Submit Form">
</form>
JS
$(document).ready(function() {
$('#myform').submit(function(event) {
event.preventDefault();
var serialized = $('#myform').serialize();
$.ajax({
method: "POST",
url: "action.php",
data: serialized,
success: function(status) {
$('#result').append(status);
$('#myform').reset();
}
});
});
});
I'm trying to post some form data and return results but I am having trouble getting this to work:
The javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#sendthis").click(function () {
$.ajax({
type: "POST",
data: $('#theform').serialize(),
cache: false,
url: "form.php",
success: function (data) {
alert(data);
}
});
return false;
});
});
</script>
The HTML:
<form id="theform">
<input type="text" class="sized" name="name" id="name"><br />
<input type="text" class="sized" name="email" id="email">
</form>
Submit
The page to post to (form.php):
<?php
if (isset($_POST['name'])){
$result = $_POST['name'];
}
echo $result;
?>
Now, it is my understanding that when the form is submitted, it would post to form.php, and the input value of "name" would be returned in an alert box. However, I can't seem to get the form data posting (or maybe returning) correctly.
Is it a problem with $('#theform').serialize()? Maybe something else?
Any help is much appreciated.
Try this and see if it works
<form id="theform" action="/form.php">
<input type="text" class="sized" name="name" id="name"/><br />
<input type="text" class="sized" name="email" id="email" /><br />
<input type="submit" name="submit" value="Submit" />
</form>
The jquery
$("#theform").on('submit', function () {
$.post($(this).attr('action'), $(this).serialize(), function(data) {
alert(data);
});
return false;
});
I would add an error callback to your ajax request to catch if there are issues being encountered during the post. Do you have a debugger like firebug that can show you what data is being posted (and where)?
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>