Combining jQuery Validate and ajax form submission - javascript

I have a simple form like
<form id="invite_form">
<input type="text" name="invite_email" id="invite_email" />
<textarea name="invite_message">Hello!</textarea>
<div id="send_div">
<span id="send_btn">Send</span>
</div>
</form>
My JS is as follows to submit the form via Ajax:
$('#send_btn').live('click', function(event){
event.preventDefault();
var form = $('#invite_form');
$.ajax({
url: '/invite',
type: "POST",
data: form.serialize(),
dataType: "html",
success: function(html) {
$('#send_div').html('Success!');
}
});
});
This works fine.
Now I would like to wrap a jQuery Validate function around this code to make sure [1] the email field is filled and [2] is valid email.
I am using Jorn's bassistance.de jQuery validation plugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation/.
Can anyone give a roadmap of how to tie the validation call to this ajax?
Thanks for helping, much appreciated.

Try this:
$('#send_btn').live('click', function(event){
event.preventDefault();
var form = $('#invite_form');
if(form.valid()) {
$.ajax({
url: '/invite',
type: "POST",
data: form.serialize(),
dataType: "html",
success: function(html) {
$('#send_div').html('Success!');
}
});
else {
; //do whatever if the form is not valid
}
});

Related

AJAX call being canceled when submit button is used [duplicate]

I am trying to perform an ajax call inside a form (a Drupal node edit form) , but it seems when performing the call, it submits the form for some reason. Here is a sample code:
jQuery.ajax({
type: "POST",
url: "my_custom/url",
dataType: "html",
data: {"text": jQuery("#edit-body").html()
},
success: function(result){
console.log(result);
}
});
I can replicate this just by executing it in the console, but I attach this to a button click function inside the form. Any tips on preventing the form from submitting, on a POST ajax call?
Here is the full code as requested
jQuery("#edit-body").before('<div id="proofread_bot-button-holder"><button type="button" id="proofread_bot-submit" onclick="return false;">Check with Proofread Bot</button></div>');
jQuery("#proofread_bot-submit").click(function(event){
event.preventDefault();
jQuery("#proofread_bot-button-holder").append("<img id=\"proofread_bot_throbber\" src=\"sites/all/modules/proofread_bot/images/throbber.gif\" />");
jQuery.ajax({
type: "POST",
url: "proofread_bot/check",
dataType: "html",
data: {"text": jQuery("#edit-' . variable_get('proofread_bot_field') . '").html()
},
success: function(proofread_result){
jQuery("#proofread_bot-submit").after(proofread_result);
jQuery("#proofread_bot_throbber").remove();
}
});
});
You need to override form's onsubmit event to prevent submitting:
$("formSelector").bind('submit', function (e) {
var isValid = someYourFunctionToCheckIfFormIsValid();
if (isValid) {
jQuery.ajax({
type: "POST",
url: "my_custom/url",
dataType: "html",
data: { "text": jQuery("#edit-body").html()
},
success: function (result) {
console.log(result);
}
});
}
e.preventDefault();
return false;
});
By calling
e.preventDefault();
return false;
You prevent synchronous postback from occurring.
UPDATE:
If you don't want to override form submit, maybe you could place your button outside of form tag (you can adjust position with css if necessary)?
If you are using a input type="submit" button, then you need to do a return false; at the end of the function to prevent it from submitting.
Another solution is to e.preventDefault() on the button click
$(".button").click(function(e){
e.preventDefault();
return false;
});
you can change submit button type to just a button type and add "onclick" event to that button.
input type="button" value="savebutton" onclick="return doThisOnClick();"
function doThisOnClick(){
jQuery.ajax({
type: "POST",
url: "my_custom/url",
dataType: "html",
data: { "text": jQuery("#edit-body").html()
},
success: function (result) {
console.log(result);
}
});
}
I think this is most straightforward.

knockout js form data empty

I'm new to Knockout JS, I'm trying to get the form data from the fields When I hit submit, I get an empty object with no data from the form.
I would like to know if i'm missing something here?
project type is WEB API ASP.net, here is my code:
<form id="frmUsuario" method="post" data-bind="submit:agregarUsuario" style="border-radius: 0px;">
</form>
JS Function:
self.agregarUsuario = function () {
$.ajax({
type: "POST",
url: pathApi + "/ApiUsuario/addUsuario",
data: form.serialize(),
dataType: "json",
success: function (data) {
alert("Record added Successfully");
}
})
}

Get data from a different php file using JQuery

I have an JQuery function which submits data from a php form to a different php file(submitForm.php). The submission works fine and there isn't any problem whatsoever, below is the handler:
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
success: function(data) {
}
});
}
Now, I want to be able get data from the submit form (submitForm.php), and load it into a different page.
This is my submitForm.php
<?php
$name="Amanda";
$age="23";
$data = array("name"=>"$name","age"=>"$age");
header("Content-Type: application/json");
echo json_encode($data);
?>
This is how my new submitHandler looks like
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
success: function(data) {
var name= html(name);
var age=html(age);
$("#message").load("newpage.php",{name:name,age:age});
}
});
}
I think I am doing it wrong, I would be grateful if somebody could correct me or give an idea as to how to do this. Thanks
It should be like this. If you want to take your returner data you should use formal parameter of success function.
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
dataType : 'json',
success: function(data) {
var name= data.name;
var age=data.age;
$("#message").load("newpage.php",{name:name,age:age});
}
});
}
Edit: Also you need dataType: 'json' line.

javascript button ajax and php

I have a small question, which I guess in my opinion will sound stupid. I have actually this code
<script type="text/javascript">
$(document).ready(function(){
var email_value = prompt('Please enter your email address');
if(email_value !== null){
//post the field with ajax
$.ajax({
url: '="/new/cfolder.php',
type: 'POST',
dataType: 'text',
data: {data : email_value},
success: function(response){
//do anything with the response
console.log(response);
}
});
}
});
</script>
I would like to link it to my button which does this
<form action="/new/cfolder.php" method="post">
</font><input type="submit" value="Create Vdisk" class="myButton6" onClick="function()">
<br></form>
Is it actually possible to do this? thank you for any answer.
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click', '.myButton6', function(){
var email_value = prompt('Please enter your email address');
//post the field with ajax
if(email_value.length > 0){
$.ajax({
url: '/new/cfolder.php',
type: 'POST',
dataType: 'text',
data: {data : email_value},
success: function(response){
alert(response);
}
});
}
)};
});
</script>
try that way
// this is the id of the form
$("#idForm").submit(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: '="/new/cfolder.php',
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
give your form an id
<form id="idForm" action="/Same/path/as/your/ajax/" method="post">
</font><input type="submit" value="Create Vdisk" class="myButton6" onClick="function()">
<br></form>
Yes of course you can do this . Like this code and you will have to include jquery1.9.0.js or above.
<script type="text/javascript">
$(document).ready(function(){
$("#myButton6").click(fuction(){
var email_value = prompt('Please enter your email address');
if(email_value !== null){
//post the field with ajax
$.ajax({
url: '/new/cfolder.php',
type: 'POST',
dataType: 'text',
data: {data : email_value},
success: function(response){
//do anything with the response
console.log(response);
}
});
}
});
});
</script>
I would like to link it to my button which does this
</font><input type="submit" value="Create Vdisk" class="myButton6" id="myButton6">
<br>

Javascript and Ajax function not working

I am trying to update my database when the user clicks a certain link (links have different values, so when user clicks one link number goes up by 1, another by 2, and so on).
I need to submit a form to another page containing the data from #form with a variable behind it, but this function doesn't seem to be working.
JavaScript
function update_number(x) {
$.ajax({
type: "POST",
url: "update_likes.php",
data: $("#Form"+x).serialize(),
dataType: "json",
return false;
};
HTML
<input type='image' src='...' onclick'update_number(2);' />
Any help appreciated.
It seems that your JavaScript is not closed correctly.
Try changing your JavaScript with this:
function update_number(x) {
$.ajax({
type: "POST",
url: "update_likes.php",
data: $("#Form"+x).serialize(),
dataType: "json",
success: function(json) {
alert( json );
return false;
}
});
}

Categories

Resources