I'm working with Google Checkout and am creating a simple Buy Now button. The button will be on many pages and have many values for the form.
What I'm looking to do is to use Javascript, to get a value on a text_field, and replace a hidden field value.
To get the value, I have this code:
$('#payment_quantity input').keyup(function() {
var quantity = $('#payment_quantity input').val();
return false;
});
Then, in the form from google, I have this:
<input type="hidden" name="item_quantity_1" value="1"/>
What I need to be able to do, is replace the value on this hidden input, with my quantity variable. I know this is probably really easy, but I'm amazingly confused at how to do this. I should have to select the hidden field, but I don't know how to update the value?
Here ya go:
$('input[name="item_quantity_1"]').val(quantity);
You just have to construct a jQuery selector to get that field and then use the .val(xxx) method to set its value.
jQuery loves to overload the same method for different behaviors based on what you pass as arguments. In the case of .val(), if you pass no arguments, it retrieves the field value. If you pass an argument like .val(quantity), it sets that value into the field like this:
$('#payment_quantity input').keyup(function() {
var quantity = $('#payment_quantity input').val();
$("input[name='item_quantity_1']").val(quantity);
return false;
});
Related
Im working on a project that uses jquery repeater. I need to loop through the inputs elements to make my validations. So, here is an example of an input of my form:
<input name="group-fundos[0][fundo-nome]" placeholder="Nome do Fundo" type="text">
Ans you can see, its like an array. So I need to get all these elements via jquery. How do I do that?
Edit: One other detail. Im using multi-step form. So for each step, I need to loop through its own inputs. The inputs types can be varied: option selects, textfields, textareas, etc..
You could try to retrieve all values by using jQuery [serializeArray] method. For example.
// assuming that your input fields are inside a certain form
var oFormData = $('#multi-step-form').serializeArray();
for (var iIndex in oFormData) {
console.log(oFormData[iIndex].value);
}
Just make sure all your [input fields] have the [name] attributes as well.
Hope this helps for your case
if you are certain values begin at 0 and end at length, you could try something like:
var i = 0;
while($("input[name='group-fundos["+i+"][fundo-nome]']").length) {
//validate here or build a js array for later
}
Edit
Using attribute contains selector you could get elements like the one provided.
$("input[name*='group-fundos["+i+"]") would get all elements with name beginning in "group-fundos[ i ]". (Notice the *=).
I want to get the value of an input. In my application, I want to update an entry in my database for each row. So, when I click on the button, I want the values of the corresponding row.
$('.ajouter_un_sol').click(function(){
var id_sol = $(this).find('.nom_sol').value;
alert(id_sol);
});
I made a jsfiddle for you to see what I'm trying to do. I'm trying to get the value of a row.
Can someone tell me how I should do please ?
use this
$('.button').click(function(){
var age = $(this).parent().parent().children('td').find('.age').val();
alert(age);
})
use .val() in jquery.
The .val() method is primarily used to get the values of form elements
such as input, select and textarea.
var id_sol = $(this).find('.nom_sol').val();
for your scenario use
$(this).parents('tr').find('td .age').val();
Fiddle
Try
var id_sol = $(this).closest("tr").find('.nom_sol').val()
.value is a javscript property so you need to use .val().
You are trying to find the input inside button but actually it is within td so you need to find it in td within the parent tr
In your fiddle, instead of
var age = $(this).find('.age').value;
try
var age = $(this).closest('tr').find('.age').val();
closest('tr') finds the nearest ancestor of type 'tr', and then you search down for the age field from there.
The html for the textbox I was to get the value from is created from a .js file -- from javascript. I tried this to get the value that I enter into myTxtBox which is defined by a className:
<input type='text' class='myTxtBox editable' name='myTxtBox' value='' maxlength='200' size='90'/>
....
I try to retrieve the value I enter into myTxtBox as follows:
var txtval = document.getElementsByClassName('myTxtBox');
alert(txtval);
...more stuff where I set a breakpoint
the alert says I have [object htmlcollection]
intellisense does not give me .value -- I only get txtVal.valueOf, but when I break into the code and hover over txtval I get a listing for >Methods, ..., >myTxtBox. When I expand the >myTxtBox list if I scroll to the bottom of that listing I DO see "value" in >myTxtBox list and it DOES equal what I entered on the web page.
How do I retrieve that value? I have tried all sorts of options from the intellisense, but it either gives an error msg or [object htmlcollection] on the alert. How do I retrieve the value I entered? Or -- do I use something different than document.getElementsByClassName('myTxtBox') for my scenario?
You would need to return the index + value as getElementsByClassName returns a HtmlCollection so there are many elements to it.. try this:
var val = document.getElementsByClassName('myTxtBox')[0].value
alert(val)
getElementsByClassName returns a HtmlCollection which is array like. Do this like this:
var txtval = document.getElementsByClassName('myTxtBox')[0].value
alert(txtval)
I discovered that I could add an ID to my input element 'myTxtBox' and use jquery to retrieve the desired value, so I did this -- added an ID to the textbox and use jquery in the alert to do a document.getelementbyID
//--generate the html section here
"...<input type='text' class='myTxttBox editable datepicker' id='myTxtBox' name='myTxtBox' value='' size='10'/>..."
function NextButton_Click()
{
try
{
alert($("#PositionStartDateTextBox").val()); <---and this displays the value entered into this textbox
....
The whole deal is I have to evaluate some date textboxes because users can enter values in manually -- I guess the best fix would be for this textbox to not be editable. That would be another question -- how to add a datepicker and not have an editable textbox.
I have two different input fields, it uses typeahead.
In first field we enter Country and in other we should select City, depending on Country.
So I'm making a javascript/jQuery function, to pass field ID, to know, which of 3 pairs of Country+City pair am I selecting.
i'm using
$('.demoTypeAhead').typeahead({
source: getCityForCountry($(this).id)
});
in function getCityForCountry, I would like to pass a field specific id, but neither $(this), or this works, since it returns whole DOM object.
A jQuery object does not have an .id property. You either want
this.id // or
$(this).prop("id") // or even
$(this).attr("id")
$(this) on this scope does not return input as an object, but whole page as an object...
Just made jsfiddle for it:
Jsfiddle http://jsfiddle.net/s1d8nmqr/3/
I would like to reload data source of typeahead for second input, when I select first one (2 level select)
I have a dynamic form that you can add elements. Like, you type a name, and then if you have to write a new name, you click on 'Add Name', and another textbox appears.
Their names are names[]. I can process those inputs with PHP on the server-side. However, I want to make a calculation with those inputs, like writing all of them on the page as the user types.
However, because those inputs, those textboxes are created dynamically, Javascript only selects the first textbox with the name name[].
Let me make it clear. This way it'll be better. I got a textbox. I input age in there. If I want to enter a new age, I click 'Add Age' button, and a new input box pops out. I write the new age value. And as I type, on a 3rd textbox, the average of those age values get printed. But because of those input boxes, with names ages[] are created on the execution time (not the compile time, I'm not sure these are the appropriate words for those. Probably not, because nothing is compiling? - or is it?), I can't process them.
What must I do to solve this problem?
I used both
$('input[name=ages\\[\\]]').change(function(){
console.log('1');
});
and
$('input[name=ages\\[\\]]').on('input', function() {
console.log('2');
});
but it didn't work.
Thanks in advance.
There's no need to escape the square brackets (though you should enclose the whole field name in double quotes). This works for me:
$('input[name="names[]"]').on('change', function(){
console.log($(this).val());
});
Here's a jsfiddle demonstrating: http://jsfiddle.net/t7J5t/
Your problem is actually probably related to the fact that you're adding the fields dynamically. The way you're using your selector will only work on the fields that already exist. Fields that are added after that selector will not be picked up. What you want to do, then, is put the selector inside the .on, like this:
$('.container').on('change', 'input[name="names[]"]', function(){
console.log($(this).val());
});
This will bind the listener to the container, not the fields (just make sure your fields get added inside of the container; you can call it whatever you want).
Incidentally, there's no reason you have to restrict yourself from using the name attribute of fields when using jQuery selectors. For example, you could use a class:
<div class="container">
<input class="age" name="ages[]">
<input class="age" name="ages[]">
<!-- ... as many more as needed, added dynamically is OK ... -->
</div>
<script>
$(document).ready(function(){
$('.container').on('change', 'input.age', function(){
console.log($(this).val());
});
});
</script>
Here's a sample of it in action, where you can dynamically add fields, and it calculates the average:
http://jsfiddle.net/t7J5t/1/
Try to use:
$(document).on('change', 'input[name=ages\\[\\]]', function() {
console.log('2');
});