I would like to submit a form only after checking if some of the inputs are not already existing in the database.
I use beforeSend for checking if there are some fabrics to add, if so, I create a variable with all the fabrics name, and my php script "check_fabric.php" controls if the fabrics are not already in the database.
I would like to submit the form only if the fabrics name are new.
$("#addorder").validate({
submitHandler: function(form, event) {
event.preventDefault();
var form = $("#addorder");
var id_customer = $("#id_customer").val();
$.ajax({
type: 'POST',
dataType: 'html',
url: "process.php",
data: form.serialize()+"&id_customer="+id_customer,
beforeSend: function(xhr) {
$("#submit-btn").removeClass("effet add").addClass("sending").val('Adding....').attr('disabled',true);
var nbfabric = $("#nbfabric").val();
if(nbfabric>0) {
var arrayFabric = new Array();
for (var i=0;i<nbfabric;i++) {
arrayFabric.push($('input[name="fabric_'+i+'"]').val());
}
var jsonString = JSON.stringify(arrayFabric);
$.ajax({
type: "post",
url: "check_fabric.php",
data: {data : jsonString},
success: function (data) {
if (data === "ok") {
form.submit();
} else {
alert(data);//data lists all the fabrics name already existing in the database
$("#submit-btn").removeClass("sending").addClass("effet ajout").val('Ajouter').attr('disabled',false);
event.preventDefault();
return false;
}
}
});
}
},
success: function(data) {
form.fadeOut("normal", function(){
$("#return_message").html(data).fadeIn();
});
},
}
});
}
});
Any idea ?
Related
I have a modal button inside the table for each row which is an edit button and inside the modal, there is the autocomplete query from the database.
Issue: The (jQuery) auto-complete works only for the first row of the table. It doesn't work for the next row and so on.
This is my script:
$(document).ready(function() {
$(document).on('keydown', '.second', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[2];
$('#' + id).autocomplete({
source: function(request, response) {
$.ajax({
url: "getDetails.php",
type: 'post',
dataType: "json",
data: {
search: request.term,
request: 1
},
success: function(data) {
response(data);
}
});
},
select: function(event, ui) {
$(this).val(ui.item.label); // display the selected text
var userid = ui.item.value; // selected id to input
$.ajax({
url: 'getDetails.php',
type: 'post',
data: { userid: userid, request: 2 },
dataType: 'json',
success: function(response) {
var id = response[0]['id'];
var biddernumber = response[0]['biddernumber'];
var fb_id = response[0]['fb_id'];
document.getElementById('fb_id_' + index).value = fb_id;
document.getElementById('biddernumber_' + index).value = biddernumber;
}
});
return false;
}
});
});
});
Everything works fine, the only thing I need is to make it work on all rows.
I am getting data from ajax call. But that data is coming in Jquery and I have saved it in a variable. Now I want that data to be utilized for running some php and mysql code. Can any one solve this?
$("#submit_bt").click(function () {
var name = $('#search-box').val();
var dataString = 'name=' + name;
if (name == "" ){
$('.alert').show().html('Please fill all information')
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "read_data.php",
data: dataString,
cache: false,
success: function (result) {
alert(result);
//$('.alert').show().html(result).delay(2000).fadeOut(3000);
setTimeout(function(){window.location.href = "index.php";},2000);
}
});
}
return result;
});
If what you want is to navigate to the index.php page on click of that button, then, do it this way:
$("#submit_bt").click(function () {
var name = $('#search-box').val();
var dataString = 'name=' + name;
if (name == "" ){
$('.alert').show().html('Please fill all information')
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "read_data.php",
data: dataString,
cache: false,
success: function (result) {
alert(result); //you may remove this. use console.log for debugging your js next time
setTimeout(function(){window.location.href = "index.php?result="+result;},2000); //why the timeout?
}
});
}
});
The easier and proper solution should be to re-use ajax to use this variable in another PHP file.
$("#submit_bt").click(function () {
var name = $('#search-box').val();
var dataString = 'name=' + name;
if (name == "" ){
$('.alert').show().html('Please fill all information')
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "read_data.php",
data: dataString,
cache: false,
success: function (result)
{
//AJAX code to execute your MySQL query
$.ajax({
type: "POST",
url: "read_data2.php",
data: result,
cache: false,
success: function (result)
{
//Manage your read_data2.php output
}
});
}
});
}
I have a checkbox when checked on it i want to enter the value of the checkbox into the database.Please help me to find the Ajax and php code for this.
I tried this
$(document).on('click', "input[type='checkbox']", function() {
var checkbox = $(this);
var checked = checkbox.attr('checked');
$.ajax({
url:"<?php echo base_url("contact-details-availability"); ?>",
type: 'post',
data: {
action: 'checkbox-select',
id: checkbox.attr('contact_avl'),
checked: checked
},
success: function(data) {
//alert(data);
},
error: function(data) {
// alert(data);
// Revert
checkbox.attr('checked', !checked);
}
});
});
and
public function add_contact_details_availability()
{
if($_POST['action'] == 'checkbox-select') {
$checkbox = $_POST['id'];
$checked = $_POST['checked'];
// Your MySQL code here
echo 'Updated';
}
echo 'Code ran';
}
But it won't works
Here is the working JQuery
<script>
$(document).on("change", "input[name='chk']", function () {
var checkbox = $(this);
var checked = checkbox.prop('checked');
$.ajax({
url:"<?php echo base_url("contact-details-availability"); ?>",
type: 'post',
data: {
action: 'checkbox-select',
id: checkbox.data('contact_avl'),
checked: checked
},
success: function(data) {
//alert(data);
},
error: function(data) {
// alert(data);
// Revert
checkbox.attr('checked', !checked);
}
});
});
</script>
HTML
<input type="checkbox" name="chk" id="chk" data-contact_avl="val" value="1">check
I am saying it as working because all the three values are passing.
Changes done to fix are:
1] changed var checked = checkbox.attr('checked'); to var checked = checkbox.prop('checked');
2] changed id: checkbox.attr('contact_avl') to id: checkbox.data('contact_avl')
3] changed onclick to onchange
try this:
var id = checkbox.attr('contact_avl'),
$.ajax({
url:"<?php echo base_url("contact-details-availability"); ?>",
type: 'post',
data: {
action: 'checkbox-select',
id: id,
checked: 'checked'
},
success: function(data) {
//alert(data);
},
error: function(data) {
// alert(data);
// Revert
checkbox.attr('checked', !checked);
}
});
I want to submit form throught ajax call in jquery mobile.
My script is that
<script>
function confirm(){
var user_name = $('#login_form').find('input[name="user_name"]').val();
$.ajax({
type: "POST",
url: $('#login_form').find('input[name="action"]').val(),
data: "val=" + user_name,
success: function(data){
alert(data);
}
});
}
</script>
My Form is here....
Name
Email
Password
Please it is urgent..........
function confirm(){
var frm = $('#login_form');
frm.submit(function () {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
error: function(xhr,err){
alert(err);
}
});
return false;
});
}
You can use this function to post your data...
You can try this function also...
$("#login_form").submit(function() {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $("#login_form").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
error:function(xhr,err){
alert(err);
}
});
return false; // avoid to execute the actual submit of the form.
});
$(function(){
$('.page').click(function() {
var paging = $(this).attr("name");
var dataString = 'page='+paging;
$.ajax({
type: "POST",
url: "<?php echo $backtrack; ?>shop.php",
data: dataString,
success: function(){
$('#products').load('shop.php/skateboards/ #products > *', function(){
$('#products').delay(200).fadeOut();
$('#products').delay(600).fadeIn();
});
$(".current-page").attr("class", "");
}
});
return false;
});
});
I am guessing this is not working because I am reloading the part of the page that gets the post. What I want to do is post the page number to the current page and then reload the items inside the products div, with it being the next set of items
I think you need to do something like this:
$('.page').click(function() {
$('#products').delay(200).fadeOut();
var paging = $(this).attr("name");
var dataString = 'page='+paging;
$.ajax({
type: "POST",
url: "<?php echo $backtrack; ?>shop.php",
data: dataString,
complete: function() {
$.get('shop.php/skateboards/', function(data) {
$('#products').replaceWith(data);
});
}
});
return false;
});