i am creating a few input fields in a foreach loop:
<?php foreach($this->results as $value){?>
<td>View Detail
<input name="processor" id="processor" type="text" value="<?php echo $value['processor']; ?>">
<input name="auth_code" class="auth_code" type="hidden" value="<?php echo $value['auth_code']; ?>"></td>
<? } ?>
is will give me something like:
<td>
View Detail
<input name="processor" class="processor" type="text" value="19">
<input name="auth_code" class="auth_code" type="text" value="4">
</td>
<td>
View Detail
<input name="processor" class="processor" type="text" value="9">
<input name="auth_code" class="auth_code" type="text" value="11">
</td>
...
then i try to get the values:
$('.buttonDetails').live("click", function (){
var processor = $('.processor').val();
alert(processor);
$.ajax({
type: 'POST',
dataType: 'json',
url: '/decline/list',
async: false,
data: {
processor: processor,
processor: auth_code
},
success: function(json) {
$('#details').html(json.processor);
}
});
return false;
});
the problem i have is that my alert gets the same number (usually the first value from the first input) when i click on any link.
any ideas ho to fix this? i've tried replacin classes with id's and 'click' with 'live' but still nothing
edit:
i believe i need to differentiate the classes so he links will know what value to pull..??
edit: what if i want to get the 'auth_code ' also?
Try:
$('.buttonDetails').live("click", function (){
var processor = $(this).next(".processor").val();
alert(processor);
/* snip */
});
Use next to get the input next to the link that was clicked.
Update (due to comment).
You could find auth_code similarly using nextAll instead:
var auth_code = $(this).nextAll(".auth_code").val();
Also, are you sure you're supplying the correct values to your AJAX call? It looks like you're specifying processor twice. The first value specified for processor will be overwritten.
If you just want the next item you can use jquery next()
$('.buttonDetails').live("click", function (){
var processor = $(this).next().val();
alert(processor);
return false;
});
here is a fiddle
http://jsfiddle.net/znge4/1/
data: {
processor: processor,
processor: auth_code
},
the 'auth_code' line will overwrite the 'processor' line, effectively making it
data: {
processor: auth_code
},
only. You can't have a single key with two different values in a associate array/object. For submitting same-name fields to PHP, use its fieldname[] notation, which tells PHP to treat that particular form field as an array.
<input name="processor[]" ...>
<input name="processor[]" ...>
and pass the data to JQuery via
data : $(this).serialize()
use Jquery .next() which should give you the next element
You get the same value no matter which anchor tag was clicked because of this line:
var processor = $('.processor').val();
You're searching the entire DOM for all elements with class 'processor', which returns every input, and then .val() will return the value of the FIRST match (the first input).
Try this instead:
var processor = $(this).next('.processor').val();
All you need to do is get the value from the element they clicked. Using Jquery's 'this' keyword should solve your problem.
$('.buttonDetails').live("click", function (){
var processor = $(this).next().val();
alert(processor);
The 'this' will select the 'a' they clicked on, then next will iterate to the next sibling, in this case your input, and the val retrieves that value as before.
Related
I have a series of Form Elements each with different names, I'll post one as an example. I cannot hard code the name into Jquery because unless I inspect the element, I won't know the name.
With that aside heres the element:
<label class="checkbox">
<input type="checkbox"
name="aisis_options[package_Aisis-Related-Posts-Package-master]"
value="package_Aisis-Related-Posts-Package-master" checked="" />
Aisis-Related-Posts-Package-master
(Disable)
</label>
The catch is to do this:
Grab the name of this element - upon clicking disable - and do two things, one - if the element is checked, which in this case it's not, unchecked it, two pass the name to a php variable, which then can do processing.
How would I do this? Jquery is not my strong area.
Here is a example without knowing more of your code:
$(function () {
$('input:checkbox').click(function () {
$(this).prop('disabled', true);
var iName = this.name;
$.ajax({
url: "file.php",
data: {
'inputname': iName
},
success: function (data) {
alert(data.returned_val);
}
})
})
})
Demo here
If you want to reach the input via name directly you need to use double backslasshes to escape the square brackets and reach that input via name. Use:
$('input[name=aisis_options\\[package_Aisis-Related-Posts-Package-master\\]]')
You can add an onchange with checkbox
onchange="f(this);"
in js f() function you can use this.name to get the name, this.value to get value etc and do whatever you want.
To check/unckeck, you can use $element.prop('checked', true/false); like this (fiddle):
HTML
<input
type="checkbox"
name="aisis_options[package_Aisis-Related-Posts-Package-master]"
value="...."
checked="checked"
/> Aisis-Related-Posts-Package-master
(Disable)
JS
$('.trigger').click (function () {
closest_checkbox = $(this).siblings('input[type=checkbox]');
closest_checkbox.prop('checked', !closest_checkbox.prop('checked'));
});
JS part 2: AJAX
You can build an object with all your name:value combinations using the jQuery plugin serializeObject, your form submission event handler would be something like:
$('form').submit( function (e) {
// Prevent the form from being sent normally since we want it ajaxified
e.preventDefault();
// Send request to php page
$.ajax({
type: "POST",
url: "some.php",
data: $('form').serializeObject() // <== Magic happens here
});
});
PS. Don't forget to include the serializeObject plugin and give a unique id to the form, $('#unique_id') is way better than $('form') which will match all the forms in the page.
To grab the value of name attribute, you can use:
$(this).attr('name');
is it possible that when nepali date is inserted on one textbox will be changed into eng date and be seen on other text box without refreshing any page?
i have a function on PHP that changes nep date to eng and vice-versa i just want that to be run on the particular textbox when anyone inserts nepali date on other textbox
i call my function for changing date is
PHP Functions
NepToEng()
EngToNep()
HTML Elements
<input type="text" name="dobnep" size="26" maxlength="300" />
<input type="text" name="empdobeng" size="26" maxlength="300" />
Scenario :
when anyone writes nepali date of birth on dobnep will be converted into english and be shown on empdobeng
var input1 = $('[name="dobnep"]'),
input2 = $('[name="empdobeng"]');
input1.on('keyup', function() {
NepToEng(this.value).done(function(data) {
input2.val( data );
});
});
input2.on('keyup', function() {
EngToNep(this.value).done(function(data) {
input2.val( data );
});
});
function NepToEng(val) {
return $.ajax({
url : 'link/to/script_that_converts_to_eng.php'
data: {date: val}
});
}
function EngToNep(val) {
return $.ajax({
url : 'link/to/script_that_converts_to_nep.php'
data: {date: val}
});
}
I would highly suggest reimplementing those functions in Javascript, otherwise you could be making a lot of HTTP requests to your server and degrading the performance of your application for what I imagine is a simple calculation that a browser could handle very quickly.
PHP functions cannot be executed based on user actions. One solution is to use Ajax function that sends the value of dobnep and retrieves its empdobeng in english.
there you go...if you have the entire functionality ready,You just need a little bit of ajax magic in your code.
fetch the value of your engDATE(lets say FETCHED_VALUE) and in responsetext of ajax put this code,
document.getElementById(id).value="FETCHED_VALUE"
note:allot an id for the text box with name=empdobeng and use function keyup
this was my code and it helped me... which i mixed
Javascript
function add() {
num1=$("#dobnep").val();
$.ajax({
type: "POST",
url: "change.php",
data: "dobnep="+num1,
success: function(html){
document.getElementById('empdobeng').value=html;
}
})
}
HTML
<input type="text" name="dobnep" id="dobnep" onblur="add()" size="26" maxlength="300" />
<input type="text" name="empdobeng" id="empdobeng" size="26" maxlength="300" />
PHP
$date=UTF8toEng($_POST['dobnep']);
echo EngtoUTF8(NepToEng($date));
I'm posting dynamically added form elements to PHP via AJAX.
I can see that the serialised form data is posted to the php, but when I try to access the data within it, some of the fields come up NULL i.e. var_dump in the PHP below shows NULL.
this is the Jquery that adds the dynamic elements:
$(function(){
var count=0;
$('#more_edu').click(function(){
count ++;
$('#education_add').append('<br><br><label>University/Institution: </label><input type="text" class="searchbox" id="edu_inst'+count+'" name="edu_inst[]" maxlength="200" value="">);
event.preventDefault();
});
});
and the Jquery posting to php:
function profileSub(){
var myform;
event.preventDefault();
myform = $('form').serialize();
$.ajax({
type: 'POST',
url: 'tutorprofileinput.php',
data: {"form": myform},
success:function(data, response, xhr){
console.log(response);
console.log(data);
console.log(xhr);
},
error:function(){
// failed request; give feedback to user
$('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
}
});
}
This is the original form:
<form id="tutor_profile_input" onsubmit="return false;">
<label>University/Institution: </label>
<input type="text" class="searchbox" id="edu_inst" name="edu_inst[]" maxlength="200" value=""> </br></br>
<label>Subject:</label>
<input type="text" class="searchbox" id="edu_subj" name="edu_subject[]" maxlength="200" value=""></br></br>
<label> Level </label>
<select id="edu_level" name="edu_level[]">
and the PHP itself:
<?php
if (isset($_POST['form'])){
$form = $_POST['form'];
var_dump($_POST["edu_inst"]);?>
This is the var dump of the whole $_POST:
location=&price=&tutorname=&edu_inst%5B%5D=Uni1&edu_subject%5B%5D=subje1&edu_level%5B%5D=BA&edu_inst%5B%5D=uni2&edu_subject%5B%5D=subj2&edu_level%5B%5D=BA&bio=%09&exper
The form you've posted has an ID of #tutor_profile_input, where as the one you're appending to in the jQuery function is #education_add - Unless I've misunderstood?
Otherwise I'd look at specifying a more specific target in the AJAX request - You're just targetting $('form') at the moment which could be any form on the page..
Have discovered the answer so thought I would share - The Jquery serialize() function encodes the data into a string, which is then posted to PHP as an array with the key of "form".
In order to deal with this in php I had to first use the urldecode function in PHP to convert the string encoded elements (%5B%5D) from the name attributes. This was because there might be multiple values in these so they were declared in the form as an array ("name="edu_insts[]"). Then use parse_str to split the string into an array.
<?php
$querystring = $_POST['form'];
$querystring = urldecode($querystring);
parse_str($querystring, $params);
$insts = $params['edu_inst'];
echo $insts[0]."<br>";
echo $insts[1]."<br>";
?>
This will create an array named $params with keys corresponding to the form name attributes.
Note that if you have multiple values within the same name, then each one will be placed within an array itself, so with the above text you will have $insts[0] = University 1
and $insts[1] = University 2 etc.
Hope this helps anyone with the same problem.
I need to pass an array to a php page with AJAX. This array of input elements gets sent to the other page:
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith" size="117" >
This is how I prepare it for sending:
var txtCoursesNamewith = $.serialize($('#txtCoursesNamewith').val());
But I get this error when running the script:
TypeError: $.serialize is not a function
How can I send an array with AJAX?
I am facing same problem and, i am just using code like this.
but first of all please insert one hidden field and set textbox id like this:
<input type="hidden" name="txt_count" id="txt_count" value="3" />
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith1" size="117" >
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith2" size="117" >
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith3" size="117" >
<script type="text/javascript">
var txt_count= $('#txt_count').val();
for (i=1; i<=txt_count; i++){
queryString += "&txtCoursesNamewith%5B%5D=" + $('#txtCoursesNamewith'+i).val();
}
</script>
finally we can pass queryString variable to ajax, and you can print array.
<?php
echo "<pre>";
print_r($_GET); // or print_r($_POST);
?>
var textBoxes;
$('input[name="txtCoursesNamewith[]"]').each(function() {
textBoxes+=$(this).val()+"|||";
});
Now the textBoxes have all the values of text field with ||| separated and pass to php script and use explode() function to split each input value . may it helps u
You don't need to use .val() because .serialize() works on a the field itself, not on the value. (because it needs to get the name and the value from the field)
You can also call serialize() directly on a jQuery object, rather than using the jquery object as a parameter. Do it like this:
var txtCoursesNamewith = $('#txtCoursesNamewith').serialize();
Hope that helps.
Because $.serialize($('#txtCoursesNamewith').val()) is a string and not a jQuery object, it doesn't have the serialize function.
If you want to serialize the input (with its value), use $('#txtCoursesNamewith').serialize();
$.ajax({
type: 'POST',
url: your url,
data: $('#'+form_id).serialize(),
success: function(data) {
$('#debug').html(data);
}
});
Then in php
<?php
print_r($_POST);
?>
I have one problem...
These are names of some my html form elements:
name="password"
name="meta[naziv_firme]"
This is my jQuery
var data = {action: 'edit', form: $('input', 'form#edit-klijent-form').serialize()}
console.log(data);
$.get('/index.php/admin-ajax', data,
function(response){
// Success
$('div#edit-klijent-div,.tipsy').hide();
$('div#klijent-edit-success').show();
});
Console.log gives me result:
action edit
form userID=12&password=&password-match=&email=test15%5Bmeta%5Bnaziv_firme%5D=test15&meta%5Bkontakt_osoba%5D=test156&meta%5Bkontakt_telefon%5D=test157&meta%5Bkontakt_email%5D=test158
So everything look OK!
Now in PHP I have var_dump($_GET); and the result is:
string(165) "userID=12&password;=&password;-match=&email=test15&meta;[naziv_firme]=test15&meta;[kontakt_osoba]=test156&meta;[kontakt_telefon]=test157&meta;[kontakt_email]=test158"
Why does PHP put ; after password, in &meta;[... ??
And ideas? What am I doing wrong?
Thank you!
In your HTML form element, add:
<input type="hidden" name="action" value="edit">
And change this line:
var data = {action: 'edit', form: $('input', 'form#edit-klijent-form').serialize()}
Into this:
var data = $('input', 'form#edit-klijent-form').serialize();
Can't really test it since I don't have your HTML or server configuration, but I think it should work.
Update:
To clarify #AnthonyGrist's comment above, let's observe what serialize does:
<form>
<input type="text" name="input1" value="foo">
<input type="text" name="input2" value="bar">
</form>
<script>
var data = $('form input').serialize();
// data is now: 'input1=foo&input2=bar'
</script>
If you assign the value returned above to a query parameter (which PHP accesses using $_GET), you're basically telling PHP that $_GET['form'] equals the string above, which is not what you intended. PHP would not parse the contents of $_GET['form'] to give you $_GET['input1']... The value returned by serialize() should be used as the 2nd argument to $.get() directly.
Change your code from:
var data = {action: 'edit', form: $('input', 'form#edit-klijent-form').serialize()}
To:
var data = "action=edit&" + $('input', 'form#edit-klijent-form').serialize();
I think it is what you're trying to achieve.