Get value from nested form inputs - javascript

I have following dynamically created form inputs:
<input class='dr-currency-rate form-control' type='text' name='dr_entry[][dr_rate]' id='dr_entry[][dr_rate]'>
What I'm trying to do is get the value from each input field with javascript fro rate calculation.
Following is not working:
.find("input[name^='dr_entry[][dr_rate]']").val();

Alternatively you can find it in document as below, since its a dynamic element:
$(document).find("input[name^='dr_entry[][dr_rate]']").val();

If the ids are generated with the same value as the name attribute, it's much faster to look up an element by id than to perform a find on an attribute value.
$('#dr_entry[][dr_rate]').val();

Related

How can i get element by id in node.js

How can i get element id: <input type="number" name="1" id="cant1" style="width:60px;" required/> in node.js?
Actually i've got this: var cant = req.param("cant1"); but i get the name's input and i need the id.
Thanks for help me.
The ID is only used client side. The name is used to generate the form data that is sent to the server.
If you need the ID then you'll need to encode it in the form data somehow. Possible approaches include:
Just using that value as the name instead of 1
Using JavaScript to copy the ID value on top of the name or the value when the form is submitted
Generate a set of hidden inputs that map the name and id values (e.g. <input name="the_id_for_1" value="cant1">)
Generate some complex data structure in JSON and post it with Ajax instead of using a regular form submission

jQuery - Change name of an input field by using value of another input field filled at the same time

I'm working on a dynamic form where you can add or delete fields, Here you can find the fiddle
The first button you find is Add Metric. From this the code generates:
Input Field Metric
Button Add Tag
Inside this field a user can add a tag with the button Add Tag, generated when you click add Metric. When you click Add Tag button, two fields are generated:
Input Field Id
Input Field Value
The Html code that I need to generate in order to serialize the entire form (this is not however the question point) will result like this:
<input type="text" name="metrics[0][name]" value="Text 0"> // Metric
<input type="text" id="TagId0" name=" "> //Tag Id
<input type="text" id="TagValue" name="metrics[0][tags][][0]">
Problem:
I need that (when I fill the field with id="TagId0") the value I select will go immediately to the field name with id="TagValue". This field must result like this:
Consider I write on TagId0 the word "hello", field will become:
<input type="text" id="TagValue" name="metrics[0][tags][hello][0]">
How, if it's possible, it can be done?
Thanks
You can use the change method to detect a change in the fields value. Then use the attr method to change the name. Hope I understood correctly. Here is the modified JSFIDDLE.
$(document).on('change', '#InputsWrapper .inputID', function(){
thisVal = $(this).val();
thisName = $(this).siblings('.inputVal').attr('name');
newName = thisName.replace('[tags][', '[tags][' + thisVal);
$(this).siblings('.inputVal').attr('name', newName);
});
Don't forget to press enter after change the field value :)
Edit: I also added two classes to the fields you are appending. .inputID and .inputVal. I hope this helps!
you can write id of field something like TagId-0 and some common class like tagfield,so that u can split the value to get the index an then access it using the class
$(".tagfield").keypress(function() {
var id=parseInt($(this).attr("id").split("-"));
$(this).siblings().attr("name","metrics["+id+"][tags]["+$(this).val()+"][0]");
});

Removal of multiple fields and labels

I'm very new to jQuery and have been stumped by particular issue. I am dynamically adding 2 checkbox fields to a screen form using the code below:
var summon_search = "<br><br><br><label for='summon_search'>Search this resource from compatible products*</label><input type='checkbox' id='summon_search' >";
var summon_link = "<br><br><label for='summon_link'>Link direct from content items in compatible products*</label><input type='checkbox' name='summon_link'>";
$(summon_search+summon_link).insertAfter("#jstor_selection");
However I have had limited success when I want to remove these fields AND labels (which is dependant on another value) and replace them with new fields. The code below shows my best attempt so far. It does appear to remove the labels and first field, but for some reason the last field remains. Could someone please advise if they can spot anything I've done wrong, or perhaps supply a better example of handling this ?
if ($("#summon_search").length > 0 ) {
//Removal of Label and Field (Attempted)
$("label[for=summon_search]").remove();
$("label[for=summon_link]").remove();
$("#summon_search").remove();
$("#summon_link").remove();
Any feedback much appreciated.
Change name='summon_link' to id='summon_link', because #summon_link expects an id.
if you see your code the summon_link variable give it a id instead of name like in the summon_search variable
name=summon_link change it to id='summon_link'
if your intention is to add these HTML string after object with Id 'jstor_selection', you can use like this
$("#jstor_selection").append(summon_search+summon_link);
you should give the for= value in quotes.
EDIT: to remove extra <br>, normally it is suggested not to use <br>
$("label[for='summon_search']").prev('br').remove()
$("label[for='summon_link']").prev('br').remove()
$("label[for='summon_search']").remove();
$("label[for='summon_link']").remove();
also in the suman_link input element you have given as name
<input type='checkbox' name='summon_link'>
either change this to
<input type='checkbox' id='summon_link'/>
or
$("#summon_link").remove();
to
$("input[name='summon_link']").remove();

Selecting the correct input field using jquery

I'm trying to select the id's of dynamic input fields in my code. When clicking a button, the form will create a form field like this:
<td><input type="text" id="field_a_1"></td>
<td><input type="text" id="field_b_1"></td>
<td><input type="text" id="field_c_1"></td>
When I click on the button again I get this:
<td><input type="text" id="field_a_2"></td>
<td><input type="text" id="field_b_2"></td>
<td><input type="text" id="field_c_2"></td>
What I want to do is select only the field id that I need to pull the value from that particular input and pass it to a variable like this:
var example = $(":input:eq(0)").val();
I know that by adding the :eq(0) after the :input selector it will only grab the id for field_a_1, so how do I set it up so that I can pull just the field that I need to assign it to a variable?
That is what the ID is for. So you can single out a particular element.
$('#field_b_2').val(); // Will return the element with that ID.
The # indicates that you are looking for an element with an ID, as opposed to . which would look for an element (or elements) with a class:
$('.someClass').val(); // Will return elements with that class
Please remember that IDs may not be shared among elements. Only one element may have a particular ID.
Classes, on the other hand, can be shared among as many elements as you need.
If you want only the id of the element you should do:
var example = $(":input:eq(0)").attr("id");
And then you can access the field again later with:
$("#" + example).show(); //or whatever you want to do
your Input Ids keep changing like :
When you click first time it will All: field_a_1 then , field_a_2, etc.
you simply using this to getting the correct values.
$('input[id^=field_]').each(function(){
alert($(this).val());
});

JQuery attributes

the following is my HTML DOM element...
<input type="text" style="width: 200px;" id="input1"/>
I want to keep the date value in it..But somewhere i need to specify that it is going to hold date value in the Dom element..
How can i do so..Please suggest me
JQuery is returning the runtime type of the input element from the DOM. Since "date" isn't a valid type for a form input, it is returning the default value : "text".
These are the valid input types:
* "text"
* "password"
* "checkbox"
* "radio"
* "submit"
* "reset"
If you try the same code snippet with one of the above instead of "date", it works fine.
Looks like you are trying to hide data inside the control.
An easier way would be to assign a css class to the element.
and jquery has lots of methods for retrieving the class names out of an element.
Or you could go with the html 5 standard for adding data like this:
<input id='ctrl' type='text' data-attr='date' />
Then you can retrieve the attribute value like this:
var value = $("#ctrl").attr("data-attr");
According to w3c standard there are no input controls with "date" type. Check it on W3C Forms in HTML documents
What does it display instead?
It could be that date is a non standard form type. I think it is coming in HTML 5, but currently it is not supported.
Could you accidentally have 2 elements with that Id ? That code looks like it should work.
Try this
$("#input1").css( {border: '1px solid red'} );
To ensure it is matching the right element. If the correct element doesn't gain a red border, then your selector is probably incorrect.

Categories