When I submit it asks to confirm, I have tried to remove the bit of code but wont work.
I want to submit and it updates with out been asked.
$('body').on("change",'.guests_left',function(){
var value = $(this).val();
var id = $(this).data("id");
var location = 'updateLeftGuests.php?sheet_id='+id+'&guests_left='+value;
var txt;
var r = confirm("This will change remaining guests, Are you sure?");
if (r == true) {
window.location.href = location;
} else {
location.reload();
}
});
}
} );
</script>
use this instead:
$('body').on("change",'.guests_left',function(){
var value = $(this).val();
var id = $(this).data("id");
var location = 'updateLeftGuests.php?sheet_id='+id+'&guests_left='+value;
var txt;
window.location.href = location;
});
Related
I have a form and a piece of javascript code to create AJAX forms. The weird thing is when i submit my form in Internet Explorer the only thing that displays is [object Object]. The form works fine in Google Chrome. Here is my code:
Form header:
<form id="page-details-form" class="ajax-form" name="page-details-form" method="POST" action="/pages/save/1">
Javascript listener:
<script>
$(function(){
$(document).on("submit",".ajax-form",function(e){
if (window.event) {
window.event.returnValue = false;
}
e.preventDefault ? e.preventDefault() : e.returnValue = false;
$('.form-message').remove();
if($('#onSubmitJsEval').html() && $('#onSubmitJsEval').html().length > 0)
{
eval($('#onSubmitJsEval').html());
}
var submitBtnValue = $('#submitBtn').html();
var formId = $(this).attr('id');
var postData = $(this).serializeArray();
$('#submitBtn') .html('<img src="images/ajax-loader.gif" />');
$('p.has-error') .remove();
$('div.has-error') .removeClass('has-error');
$.post($(this).attr('action'), postData, function(jsonResponse)
{
var jsonObject = jQuery.parseJSON(jsonResponse);
if(jsonObject.success == true)
{
$('<div class="<?=MESSAGE_SUCCESS_CLASS?>"><?=MESSAGE_SUCCESS_PREFIX?>'+jsonObject.message+'</div>' ).insertBefore( "#" + formId + " h2" );
if(jsonObject.insertedId > 0)
{
var stringPath = window.location.pathname.substr(window.location.pathname.length - 1);
document.location.href = window.location.pathname + ((stringPath != "/") ? "/" : "") + jsonObject.insertedId;
}
}
else
{
$('<div class="<?=MESSAGE_ERROR_CLASS?>"><?=MESSAGE_ERROR_PREFIX?>'+jsonObject.message+'</div>' ).insertBefore( "#" + formId + " h2" );
$.each(jsonObject.errors, function(index, value){
$('[name='+index+']').parent().addClass('has-error');
$('[name='+index+']').after('<p class="has-error help-block">'+value+'</p>');
})
}
$('#submitBtn').html(submitBtnValue);
});
});
});
</script>
I tried several options besides the current option:
if (e.preventDefault) e.preventDefault();
e.returnValue = false
e.returnValue = false after e.preventDefault
Does anyone have a idea? If i need to publish more code please let me know. I can post all the code if you want.
Many thanks!
You will need a combination of e.preventDefault() and return false, with handling code inbetween.
$(document).on("submit", ".ajax-form", function(e) {
e.preventDefault();
//Do your stuff here
return false;
});
How do I get multiple textbox values that are dynamically created in jquery
Sample code:
<?php
$i=1;
while($i<10)
{
echo "<input type='textbox' class='qty' id='qty_$id'>";
echo "<input type='textbox' class='item' id='item_$id'>";
$i++;
}
echo '<input class="btn_transaction" id="btn_update" type="button" style="width:auto" value="Update">';
?>
jquery
<script>
jQuery(document).ready(function(e){
$("#btn_update").click(function() {
$.each($('.qty'), function() {
var qty = $(this).val();
alert(qty); // im getting qty here. In the same way i want item also, how to get item value here
jQuery.post('../ajax/ajax_cart.php',{section:'update_tocart',qty:qty},function(data){
});
});
});
});
</script>
thanks in advance :)
DEMO
Try this
$("#btn_update").click(function() {
$(".qty").each(function() {
var qty = $(this).val();
alert(qty);
});
});
Hope this helps,Thank you
jQuery(document).ready(function(e){
$("#btn_update").click(function() {
var data = {};
$( "input" ).each(function() {
data[$(this).attr('id')] = $(this).val();
jQuery.post('../ajax/ajax_cart.php',{section:'update_tocart',data:data},function(data){
});
});
});
});
Try above!! You can find all input elements! You can then store it in a json object and pass to ajax call.
Try this
$.each($('.qty'), function() {
var qty = $(this).val();
var item = $(this).siblings('input.item').val();
});
Try with .next() like
var item = $(this).next('.item').val();
So it would be
$('.qty').each(function() { // Or $.each('.qty' , function() {
var qty = $(this).val();
var item = $(this).next('.item').val();
});
See the FIDDLE And FIDDLE2
try
$('.qty').each(function() {
var qty = $(this).val();
var item = $(this).closest('.item').attr('value'); })
add class to all your textbox e.g textbox
<script type="text/javascript">
var Work = [];
var textboxes = document.getElementsByClassName('name_list');
var boxlengt = document.getElementsByClassName('name_list').length;
for(var i=0;i<boxlengt;i++){
Work.push(textboxes[i].value)
}
Work = Work.toString();
</script>
All the values are being stored in the items array. Now its up to you how you want each values to be used.
I have set up some ajax code to validate multiple fields inside a form using php. The code works like a charm, but I wanna minimize the javascript used.
As you can see at the code below, Im getting the getElements('input') ... that validates all input fields and then getElements('textarea') that validates... ya u know! ;o) Textarea is the last line in the code below and the javascript after that is the same as inpt
I'm validating the input, textarea, selection list, checkbox, etc. in my controller using php, but the code after getting the elements is the EXACT SAME.
So I was thinking that I might could make a switch case or if else with javascript to loop the elements and only write the duplicated javascript once....
Could that be done?
window.addEvent('domready', function(){
$('container').getElements('input').addEvent('keyup', function(e){
//stop the input-tag event
e = new Event(e).stop();
//identify which item was activated
var querystring = this.title;
var value = this.value;
var myXHR = new XHR({
method: 'get',
onSuccess: function(e){
var myString = myXHR.response.text;
var myStringArray = myString.split("###RAWR###");
$(myStringArray[1]).innerHTML = '<em class="checking"> </em>';
setTimeout( ajax , 3500 );
function ajax(){
$(myStringArray[1]).innerHTML = '<em class="'+myStringArray[2]+'">'+myStringArray[0]+'</em>';
}
}
});
myXHR.send('index2.php?option=com_component&task=validate&value='+value, querystring);
});
$('container').getElements('textarea').addEvent('keyup', function(e){
You can put the tagnames in an array loop it and call a function with your validation.
window.addEvent('domready', function(){
var tagNames = ["input", "textarea", "select"];
for (var i = 0; i < tagNames.length; i++)
{
validate(tagNames[i]);
}
});
function validate(tag)
{
$('container').getElements(tag).addEvent('keyup', function(e){
//stop the input-tag event
e = new Event(e).stop();
//identify which item was activated
var querystring = this.title;
var value = this.value;
var myXHR = new XHR({
method: 'get',
onSuccess: function(e){
var myString = myXHR.response.text;
var myStringArray = myString.split("###RAWR###");
$(myStringArray[1]).innerHTML = '<em class="checking"> </em>';
setTimeout( ajax , 3500 );
function ajax(){
$(myStringArray[1]).innerHTML = '<em class="'+myStringArray[2]+'">'+myStringArray[0]+'</em>';
}
}
});
myXHR.send('index2.php?option=com_component&task=validate&value='+value, querystring);
});
}
I used thickbox components in Joomla. I am submitting form using jQuery ajax but jQuery not getting values after click on submit buttons. I used
and created script.js file containing :
jQuery(document).ready(function(){
jQuery('.wp_btn').click(function() {
var id = $j(this).attr('id');
var url = $j(this).attr('value');
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
jQuery("#dwnlnk").val(url);
TB_show('', '/#TB_inline?KeepThis=true&id=9876asdvfrty54321&height=250&width=350&inlineId=mypopup&caption=Subscription', '');
}else{
window.location = url;
}
});
//
jQuery(document).on('submit', '#subscription',function(){
return false;
});
jQuery(document).on('click', '#btnSubmit',function(){
var url = jQuery('#dwnlnk').val();
var txtname = $j('input[name=txtname]').val();
var txtemail = $j('input[name=txtemail]').val();
jQuery.ajax({
type: 'POST',
url: 'whitepapers/',
data: jQuery('#frmsubscription').serialize(),
success: function(data) {
alert(data);
//if(data == 'true') {
window.location = url;
//}
}
});
});//end click
});
I already tried document.getElementById('txtname').value but its not getting value of textbox. When I entered static value then its getting value.
You have to use jQuery or $ to select an element.
Try this
var txtname = jQuery('input[name="txtname"]').val();
var txtemail = jQuery('input[name="txtemail"]').val();
OR
var txtname = $('input[name="txtname"]').val();
var txtemail = $('input[name="txtemail"]').val();
i want to be able to make the submit button in jquery form plugin disabled and then when the response is retrieved, it should become enable. i am trying thru the code below but as soon as in the onlick event i disabled the button it somehow stops the submission. although i am able to change the class of the button.
what am i doing wrong?
code is like this:
function timing(){
d=Math.round(new Date().getTime() / 1000);
$('input[name=timedate]').val(d);
var btn1 = $('#post_global');
btn1.val('posting');
btn1.removeClass('t_s').addClass('t_sDisabled');
btn1.prop('disabled',true);
}
(function() {
$('form').ajaxForm({
dataType: 'json',
beforeSubmit: validate,
success: processResponse
});
})();
function processResponse(data) {
document.getElementById('upfile').value = "";
document.getElementById('fileinfo').innerHTML = "";
document.getElementById('txt1').value="post anything...";
var status = $('#status');
if(data.errors == ""){
status.hide().html(data.htmlResponse).fadeIn(1000);
} else{
alert(data.errors);
}
var btn2 = $('#post_global');
btn2.val('post');
btn2.removeClass('t_sDisabled').addClass('t_s');
btn2.prop('disabled',false);
}
This is the answer that I think you're looking for. If you want more, just comment what you want below:
$("#btn2").click(function() {
$('#btn2').attr("disabled", true);
//Do the request here
$('#btn2').attr("disabled", false);}
Possibly this?
function timing(){
d=Math.round(new Date().getTime() / 1000);
$('input[name=timedate]').val(d);
var btn1 = $('#post_global');
btn1.val('posting');
$('#btn2').attr("disabled", true);
}
(function() {
$('form').ajaxForm({
dataType: 'json',
beforeSubmit: validate,
success: processResponse
});
})();
function processResponse(data) {
document.getElementById('upfile').value = "";
document.getElementById('fileinfo').innerHTML = "";
document.getElementById('txt1').value="post anything...";
var status = $('#status');
if(data.errors == ""){
status.hide().html(data.htmlResponse).fadeIn(1000);
} else{
alert(data.errors);
}
var btn2 = $('#post_global');
btn2.val('post');
$('#btn2').attr("disabled", false);
}