Thickbox not getting values of textbox using Jquery - php

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();

Related

Update & reload mysql using php - remove confirmation question

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;
});

redirect to php page after ajax success in jquery

i am working on search form with autocomplete function. my autocomplete is working fine. i want to send the data to another php page after autocomplete value is set.
below is my jquery for autocompleate.
function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#searchitem').val();
var search_location = $('#search_location').val();
var datastring= 'keyword='+ keyword + '&search_location='+search_location;
if (keyword.length >= min_length) {
$.ajax({
url: 'global_search.php',
type: 'POST',
data: datastring,
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
}
});
} else {
$('#search_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#searchitem').val(item);
window.location.href = 'searchtestr.php?key=' + data
// hide proposition list
$('#search_list_id').hide();
}
i tried window.location.href = 'searchtestr.php?key=' + data to redirect the page but its not working. the condition is the page should be redirect after some thing is selected from autocomplete.
You need to call your set_item method in your success handler:
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
set_item(data.item); //data.something
}
Also, you are trying to pass a variable called data to the next page but the set_item method doesn't have access to that variable. You'd have to send item e.g. window.location.href = 'searchtestr.php?key=' + item;
Also, I'm not sure if you are doing something with a SPA (guessing not)... I don't think it makes sense to modify the DOM after you redirect the page - e.g. $('#search_list_id').hide(); and $('#searchitem').val(item);. You are aware thatwindow.location.href is not triggering an AJAX call and will redirect the entire page?
try this
function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#searchitem').val();
var search_location = $('#search_location').val();
var datastring= 'keyword='+ keyword + '&search_location='+search_location;
if (keyword.length >= min_length) {
$.ajax({
url: 'global_search.php',
type: 'POST',
data: datastring,
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
},
change: function (event, ui) {
if (ui.item == null || ui.item == undefined) {
} else {
window.location.href = 'searchtestr.php?key=' + data;
}
});
} else {
$('#search_list_id').hide();
}
}
i tried like below and it worked. my concern is after value is set then redirect to php page.
function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#searchitem').val();
var search_location = $('#search_location').val();
var datastring= 'keyword='+ keyword + '&search_location='+search_location;
if (keyword.length >= min_length) {
$.ajax({
url: 'global_search.php',
type: 'POST',
data: datastring,
success:function(data){
$('#search_list_id').show();
$('#search_list_id').html(data);
}
});
} else {
$('#search_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#searchitem').val(item);
// hide proposition list
$('#search_list_id').hide();
var location = $('#search_location').val();
var search_term = $('#searchitem').val();
if(search_term != ''){
window.location.href = 'searchtestr.php?location=' + location + '&search_term='+ search_term;
}
}
Thank You all for helping me.

Jquery: Option selected not work in rendered select list

I had a countries/state chained select box pulled from database (rendered select list), however I want the specific option value remain selected when the page is redirected back by certain action. The user input fields are temporarily stored in SESSION, all fields is able to retained the value, excepted Country and State field.
I couldn't find these pulled option tag (which is rendered) appeared in view-sources, but I can view it in Chrome console and Firebug, thus I believe jquery cannot find the particular option value to perform the action, whereas when I hard-code the options, the below script is working:
Append options
function ajaxCall() {
this.send = function(data, url, method, success, type) {
type = type||'json';
var successRes = function(data) {
success(data);
};
var errorRes = function(e) {
console.log(e);
alert("Error found \nError Code: "+e.status+" \nError Message: "+e.statusText);
};
$.ajax({
url: url,
type: method,
data: data,
success: successRes,
error: errorRes,
dataType: type,
timeout: 60000
});
}
}
function locationInfo() {
//var rootUrl = "http://lab.iamrohit.in/php_ajax_country_state_city_dropdown/api.php";
var rootUrl = jsbaseurl + '/inc/api-get-location.php';
var call = new ajaxCall();
/* disabled get cities
this.getCities = function(id) {
$(".cities option:gt(0)").remove();
var url = rootUrl+'?type=getCities&stateId=' + id;
var method = "post";
var data = {};
$('.cities').find("option:eq(0)").html("Please wait..");
call.send(data, url, method, function(data) {
$('.cities').find("option:eq(0)").html("Select city");
if(data.tp == 1){
$.each(data['result'], function(key, val) {
var option = $('<option />');
option.attr('value', key).text(val);
$('.cities').append(option);
});
$(".cities").prop("disabled",false);
}
else{
alert(data.msg);
}
});
};
*/
this.getStates = function(id) {
$(".states option:gt(0)").remove();
$(".cities option:gt(0)").remove();
var url = rootUrl+'?type=getStates&countryId=' + id;
var method = "post";
var data = {};
$('.states').find("option:eq(0)").html("Please wait..");
call.send(data, url, method, function(data) {
$('.states').find("option:eq(0)").html("Select state");
if(data.tp === 1){
$.each(data['result'], function(key, val) {
var option = $('<option />');
option.attr('value', key).text(val);
$('.states').append(option);
});
$(".states").prop("disabled",false);
}
else{
alert(data.msg);
}
});
};
this.getCountries = function() {
var url = rootUrl+'?type=getCountries';
var method = "post";
var data = {};
$('.countries').find("option:eq(0)").html("Please wait..");
call.send(data, url, method, function(data) {
$('.countries').find("option:eq(0)").html("Select country");
console.log(data);
if(data.tp === 1){
$.each(data['result'], function(key, val) {
var option = $('<option />');
option.attr('value', key).text(val);
$('.countries').append(option);
});
$(".countries").prop("disabled",false);
}
else{
alert(data.msg);
}
});
};
}
$(function() {
var loc = new locationInfo();
loc.getCountries();
$(".countries").on("change", function(ev) {
var countryId = $(this).val();
if(countryId !== ''){
loc.getStates(countryId);
}
else{
$(".states option:gt(0)").remove();
}
});
/* Disabled city
$(".states").on("change", function(ev) {
var stateId = $(this).val();
if(stateId != ''){
loc.getCities(stateId);
}
else{
$(".cities option:gt(0)").remove();
}
});
*/
});
Jquery to retain selected option
<script>
$(document).ready(function(){
localStorage.setItem('selCountry', '<?php echo $cust_country_code ?>');
$('.countries').find('option').each(function(i,e){
if($(e).val() == localStorage.getItem('selCountry')){
$('.countries').prop('selectedIndex',i);
}
});
});
</script>
**the $cust_country_code is return countries id that
HTML - Options is rendered from db + jquery.
<select name="co_country" class="countries">
<option value="">Select Country</option>
<!-- HARDCODED FOR TEST, WORKING!
<option value="111">Brazil</option>
<option value="142">Germany</option>
<option value="123">Austria</option>
<option value="145">Japan</option>
-->
</select>
I was included $(document).ready() in order jquery to run while DOM is loaded, but no luck, any workaround?

Can't cancel default action on ajax form submit

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;
});

Ajax - multiple validation

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);
});
}

Categories