We Keep Coding

preventDefault() and 2 functions

On my website users can add a text dynamically and remove it dynamically (via AJAX).
The problem is when users want to add a text and remove it immediately.
The suppression isn't realized (submit of deletion form is not detected).
$(document).ready(function() {
$(function(){
/* ADD A TEXT */
$("#formAdd").submit(function(evt) {
evt.preventDefault();
var text = $(this).find("textarea").val();
if (text) {
var url = $(this).attr('action');
form = $(this).serialize();
$.ajax({
type : "POST",
url : url,
dataType : "json",
data: {
"form" : form,
"form-type" : $(this).find(':submit').attr("name")
},
success: function(data){
document.getElementById("visualisation").html = text;
},
statusCode: {
400: function() {
alert("error");
}
}
});
}
});
/* REMOVE A TEXT */
$('#formDelete').submit(function(e) {
alert("CHECK !");
var idText = $(this).find('#text_visualisation').val();
form = $(this).serialize();
$.ajax({
type:"POST",
url: $(this).attr('action'),
dataType : "json",
data: {
'form' : form,
"form-type" : $(this).find(':submit').attr("name"),
},
success: function(data) {
$("#text").remove();
$("#modal_deleteForm").modal('hide');
},
statusCode: {
400: function() {
alert("error");
}
}
});
return false;
});
});
});
So the alert("CHECK !"); is not realized when I want to delete a text just after added this text. Why ?

I find the solution after a lot of hours of research... The probleme isn't preventDefault() but innerHTML (you couldn't now it, I'm sorry).
But I don't understand why use innerHTML can blocked jquery submission of form...
Thank's

Ios devices, "required" field and thank you message

I would like to merge two JavaScripts. The first one is using ajax to send message and the second one to alert user about required field in the contact form.
I want to merge this two, maybe with an IF statement, so first to check all fields and then to send message.
1 with ajax JavaScript:
$('document').ready(function () {
$('form#contact-form').submit(function () {
var form = $(this);
var post_data = form.serialize(); //Serialized the form data for process.php
$('#loader').html('<img src="../spinner.gif" /> Please Wait...');
form.fadeOut(500, function () {
form.html("<h3>Thank you.").fadeIn();
$('#loader').html('');
});
// Normally would use this
$.ajax({
type: 'POST',
url: 'process.php', // Your form script
data: post_data,
success: function(msg) {
form.fadeOut(500, function(){
form.html(msg).fadeIn();
});
}
});
return false;
});
});
2 alert JavaScript:
$('document').ready(function () {
$('form#contact-form').submit(function(e) {
var ref = $(this).find("[required]");
$(ref).each(function(){
if ( $(this).val() == '' )
{
alert("Required field should not be blank.");
$(this).focus();
e.preventDefault();
return false;
}
}); return true;
});
});
From the answer below i have create the following code.
I made this link if someone wants to help. The alert works fine but the code not stop. It continue to load the rest code.
https://jsfiddle.net/L8huq1t1/

You can do this by the following code.
function checkValidation() {
var ref = $(this).find("[required]");
$(ref).each(function(){
if ( $(this).val() == '' )
{
alert("Required field should not be blank.");
$(this).focus();
//e.preventDefault();
return false;
}
});
return true;
}
$('document').ready(function () {
$('form#contact-form').submit(function () {
if(!checkValidation()) {
return false;
}
var form = $(this);
var post_data = form.serialize(); //Serialized the form data for process.php
$('#loader').html('<img src="../spinner.gif" /> Please Wait...');
form.fadeOut(500, function () {
form.html("<h3>Thank you.").fadeIn();
$('#loader').html('');
});
// Normally would use this
$.ajax({
type: 'POST',
url: 'process.php', // Your form script
data: post_data,
success: function(msg) {
form.fadeOut(500, function(){
form.html(msg).fadeIn();
});
}
});
return false;
});
});
But I give you a suggestion to use jquery.validate plugin which is better option. But if you still want to do like this, go ahead this is also works fine.

You can use jQuery Validation plugin that has a form submit handler where you can put your AJAX. Link to the plugin.
Your code should look something like this:
$('#contact-form').validate({
rules: {
your_input_name: {
required: true
}
},
messages: {
your_input_name: {
required: 'Field is required'
}
},
submitHandler: function() {
var form = $(this);
var post_data = form.serialize(); //Serialized the form data for process.php
$('#loader').html('<img src="../spinner.gif" /> Please Wait...');
form.fadeOut(500, function() {
form.html("<h3>Thank you.").fadeIn();
$('#loader').html('');
});
// Normally would use this
$.ajax({
type: 'POST',
url: 'process.php', // Your form script
data: post_data,
success: function(msg) {
form.fadeOut(500, function() {
form.html(msg).fadeIn();
});
}
});
return false;
}
});

Ajax Jquery Call for On Submit Not Working

Despite adding the prevent default option on submit, the code is not being redirected to try.php and on submit the values are being displayed on the browser like it does by GET method. I have been on this for hours now. Kindly Help!
$.ajax({
url: "try.php",
cache: false,
type :"POST",
data : {action:'John'},
success : function( data ) {
$("#show_here").val(data);
}
});
});
});

Try this if it works:
$('.please').submit( function(e) {
e.preventDefault();
//var act = $("input[name='v_year_name']").val();
$.ajax({
url : "try.php",
cache: false,
type :"POST",
data : {action:'John'},
success : function( data ) {
$("#show_here").val(data);
}
});
});

check entered url/path is correct.
$(document).ready(function(){
$('.ajaxform1').submit( function(e) {
$.ajax({
url : "try.php",
cache : false,
type :"POST",
data : {action:'John'},
success : function( data ) {
$("#show_here").val(data);
}
});
}); });

Issue with preventDefault. Submitting form

I have created this jQuery AJAX script for submitting a form:
$(document).ready(function() {
// process the form
$('#reviewForm').submit(function(e) {
$("#reviewError").hide();
$("#reviewSuccess").hide();
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'description' : $('input[name=description]').val(),
'one' : $('input[name=price]').val(),
'two' : $('input[name=location]').val(),
'three' : $('input[name=staff]').val(),
'four' : $('input[name=service]').val(),
'five' : $('input[name=products]').val(),
'shopID' : $('input[name=shopID]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'post/review.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
if ( ! data.success) {
$("#reviewError").show();
} else {
// ALL GOOD! just show the success message!
$("#reviewSuccess").show();
}
})
// stop the form from submitting the normal way and refreshing the page
e.preventDefault();
});
});
Sadly the form submits though the normal way and not though the AJAX. Im at a loss to what the issue can be. I have tried the return false and such but that didn't work at all.

I think you are missing e.preventDefault(); at the begining of the submit(); and to use e.
$(document).ready(function(e) {
// process the form
$('#reviewForm').submit(function(e) {
e.preventDefault();
$("#reviewError").hide();
$("#reviewSuccess").hide();
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'description' : $('input[name=description]').val(),
'one' : $('input[name=price]').val(),
'two' : $('input[name=location]').val(),
'three' : $('input[name=staff]').val(),
'four' : $('input[name=service]').val(),
'five' : $('input[name=products]').val(),
'shopID' : $('input[name=shopID]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'post/review.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
if ( ! data.success) {
$("#reviewError").show();
} else {
// ALL GOOD! just show the success message!
$("#reviewSuccess").show();
}
})
});
});
Hope this Helps.

$(document).ready(function() {
// process the form
$('#reviewForm').click(function(e) {
$("#reviewError").hide();
$("#reviewSuccess").hide();
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'description' : $('input[name=description]').val(),
'one' : $('input[name=price]').val(),
'two' : $('input[name=location]').val(),
'three' : $('input[name=staff]').val(),
'four' : $('input[name=service]').val(),
'five' : $('input[name=products]').val(),
'shopID' : $('input[name=shopID]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'post/review.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
if ( ! data.success) {
$("#reviewError").show();
} else {
// ALL GOOD! just show the success message!
$("#reviewSuccess").show();
}
})
// stop the form from submitting the normal way and refreshing the page
e.preventDefault();
});
});
Use 'Click' event instead of 'Submit' will work definatly

How to get return value from php to ajax

-- Ajax Code
var User = function(){
return {
init : function(){
document.getElementById('login').addEventListener('click', this.login);
},
login : function(){
var username = $("#username").val(),
password = $("#password").val();
$.ajax({
url : 'http://localhost/oc2/user_info/login',
method : 'post',
dataType : 'json',
data : {
username : username,
password : password
},
success : function(response){
alert('h'); <-- add the php return value id here.
window.location.href = "main.html";
},
error : function(response){
alert(response.responseText);
}
});
}
};
}();
-- PHP CodeIgniter
public function login()
{
$post = $this->input->post();
$where = array(
'email_address' => $post['username'], //"turbobpo.johnrey#gmail.com",
'password' => md5($post['password']) //"e10adc3949ba59abbe56e057f20f883e"
);
$user_info = $this->get_by($where);
if(isset($user_info['id']))
{
$this->session->set_userdata('user_info', $user_info);
$response = array(
'id' => $user_info['id'], <-- this i want to pass to my ajax
'success' => TRUE
);
}
else
{
$response = array(
'success' => FALSE
);
}
print json_encode($response);
}
Hello can you help me for this part i already management to went far on this php ajax i'm not used in creating this application please i need help i place a comment on the codes to see where i wanna retrieve the value from php to my ajax code so i can use it on my next retrieving of file where i use the id of a login user to get his available access in a grid form. it would be a plus if you can also show me how can i use that data to pass it back in php again the id after retrieving it on the success ajax return array value.

var User = function(){
return {
init : function(){
document.getElementById('login').addEventListener('click', this.login);
},
login : function(){
var username = $("#username").val(),
password = $("#password").val();
$.ajax({
url : 'http://localhost/oc2/user_info/login',
method : 'post',
dataType : 'json',
data : {
username : username,
password : password
},
success : function(response){
response.id; // Here is the id JQuery parses JSON for you
window.location.href = "main.html";
},
error : function(response){
alert(response.responseText);
}
});
}
};
}();