How to set the value for form fields - javascript

I want save multiple individual records for a single model. So my form will have <input> elements with IDs that look like this Author0Title; Author1Title; Author2Title, etc.
I will be getting values for these input's using jQuery.getJSON() method.
I want to assign individual values for these input like these automatically.
document.getElementById('Author0Title').value = respose.data[0].title;
something like..
for(i=0;i<response.data.length; i++){
var id = 'Author' + i + 'Title';
document.getElementById(id).value = respose.data[0].title;
}
But it is not working. I appreciate any help.
Thanks.

If you're using jQuery:
for (var i = 0; i < response.data.length; i++) {
$('#Author' + i + 'Title').val(response.data[i].title);
}
That's pretty close to your example, except that you've got '0' coded in as the index instead of 'i'.
Make sure that your <input> elements really are using both an "id" and a "name" that's constructed as you expect. If they're just getting the "name" attribute set, you could do this:
$('input[name=Author' + i + 'Title]').val(response.data[i].title);

Could it be that you're misspelling respose -> response?
Otherwise, "should work". Assuming your JSON actually matches what you're looking for in this code.
Since you're using jQuery, you might want to use $('#Author' + i + 'Title').val(response.data[i].title); instead - although it does the same.

Related

Jquery - Create dynamic name selector

I have been playing with this for the last hour, but just cant get it to work.
I have a reactJS component, that renders a grid. After the grid is rendered I need to do some DOM work on the component.
There are some checkboxes that need to be checked. After the DOM is available if I run this in console:
$('[name="checkbox0"]').prop('checked', true);
It works great.
I need to iterate my objects, and based on condition check it or not.
My question is how to make the selector dynamic? How do I make checkbox0 dynamic, so I can set it to checkbox1, checkbox5... etc.
This is my latest attempt to solve the issue, and it did not work:
this.state.rows.forEach(function (index, key, value){
var test = "'[name=" + "checkbox" + key + "]'" ;
if(index.selected){
//$('[name="checkbox0"]').prop('checked', true);
$(test).prop('checked', true);
}
});
You are trying to use an attribute selector, but the syntax is way off in the dynamic string
var test = '[name="checkbox' + key + '"]'
You are wrapping the entire string with a "" where it should have only for the attribute value

jQuery Dynamic Selector

I have multiple select box on my page with id's drop_01, drop_02 and so on along with a common class.
I am writing a jQuery that whenever a select box is changed, I get the number of selected options for that select box. Following is the jQuery but its not working. Can anyone tell me what am i doing wrong.
var x = "drop_" + idnum; // (idnum contains the numeric index like 01,02 etc).
var length = $(' "#" + x option:selected').length;
But when i give the hard coded id like below, it works fine.
var length = $('#drop_02 option:selected').length;
Please help.
You aren't concatenating the string of the selector properly:
var length = $('#' + x + ' option:selected').length;
I would strongly suggest you use an editor with syntax highlighting as it makes it virtually impossible to miss errors like this.

Use jquery to generate a dynamic href and then read the class of the <a>

I am trying to use jquery to read the "class" of an and then use the result to hide/show divs. The href= is dynamically generated in php in the format href="#pop-up(number)", where the number is between 1 and approximately 60.
I have used the code
var value = $('a[href="#pop-up49"]').attr('class');
alert(value);
and I get the desired result, but when I try to substitute the #pop-49 with a built expression as follows
for ( var i = 49, limit=60; i < limit; i++ ){
var value = $('a[href="\"" + "#pop-up" + i + "\""]').attr('class');
alert(value);
}
I get the result "undefined".
Can somebody explain to me what I am doing wrong as reading this expression directly seems to give what I would expect, i.e "#pop-up49"
You need to concatenate your value properly here:
var value = $('a[href="#pop-up' + i + '"]').attr('class');

How can I update the background color of a dynamic input control?

I'm successfully creating some dynamic input textboxes using the following javascript:
var type = "Textbox";
var foo = document.getElementById("fooBar");
for (i = 1; i <= totalQty; i = i + 1) {
var textbox = document.createElement("input");
//Assign different attributes to the element.
textbox.setAttribute("type", type + i);
//textbox.setAttribute("value", type + i);
textbox.setAttribute("name", type + i);
textbox.setAttribute("id", type + i);
textbox.setAttribute("style", "width:300px");
textbox.setAttribute("width", "300px");
//Append the element in page (in span).
var newline = document.createElement("br");
foo.appendChild(newline);
foo.appendChild(textbox);
}
Everything works fine with that. Once the user keys in data and clicks submit however, I need to go back and set the background-color of any textboxes with an error to red. I found some code to do the actual coloring:
textbox.style.backgroundColor = "#fa6767";
...and I know the exact name of the textbox with the error (i.e. "Textbox1", "Textbox2", "Textbox3", etc) but I'm not sure how to programatically assign this background color code to the specific textbox. I can't use something like this, since all code is dynamically generated:
errorTextbox = $("#Textbox1");
Any suggestions?
It looks like you're building a form validation script. Here's an easier way to do this:
1) Create an entry in your stlyesheet for your error class. Adding and removing a class requires fewer steps than assigning properties individually.
.error {
background-color: #ff0000;
}
2) Give all the textboxes you wish to validate a unique class name "valMe", for example.
3) Then loop through them during the validation step:
$('.valMe').each(function() {
$(this).removeClass('error');
if($(this).text=='') {
$(this).addClass('error');
}
})
By using "this" you refer to the current element, so you don't even need to know the ID of the element.
If you already know the name (in this case identical to the id) of the element, you can use jQuery to select the element by forming the selector using string concatenation. Assuming you have a variable that stores the name/id of the text box that has the error, then it's a relatively simple process:
var errorTextboxName = 'Textbox1';
$('#' + errorTextboxName).css('background-color', 'red');
I ended up going with the following:
document.getElementById('Textbox1'.style.backgroundColor = "#fa6767";
I originally didn't think I would be able to capture my "Textbox1" control in this fashion since when I viewed the html source code, there was no "Textbox1" due to the fact I dynamically created it.
Thanks.

Getting a dynamic textbox name using javascript

Please forgiving if the title is a little non-descriptive. Here is what im doing. Im making dynamic textboxes in a table using javascript. For example i add one row to the table, give the textbox a name for instance tname, i want to make each textbox unique so i add a row number to the end of it, so the textbox name is tname1, next would be tname2...etc. Now I want to create another function to loop through this table to get all of the values. Here is the code im using to get the value of the textbox below. I didnt put the for loop b/c I know that the loop works, b/c i got the correct number of rows.
txt = document.getElementById('tname' + a)
alert(txt.value)
I know that there is a function that you put around this: ('tname' + a) to let javascript know that your concatenating it together b/c i did it before just cant remember the function. If any can help, it would be very much appreciated
If you assigned the id (not name) then dirty pure JavaScript work around is:
var a = 1;
while (true) {
var id = 'tname' + a;
var txt = document.getElementById(id);
if (txt == null)
break;
alert("value of " + id + " is: " + txt.value);
a++;
}
This will keep looking for elements, until it can't find any - hope this makes sense.
You need to use ID and name. For example,
<input type="text" name="tname1" />
should be
<input type="text" name="tname1" id="tname1"/>
Use JQuery. It simplifies tasks like this:
$('input[type="text"]').map(function(){
return (this.value.length > 0) ? this.value : null;
}).get().join(',');
Working demo: http://jsfiddle.net/AlienWebguy/wLteQ/
Have you tried:
var els = document.getElementsByName(...);
// Or if you only focusing on newer browsers:
var els = document.querySelectorAll(..);
// els is now a HTMLCollection / NodeList
console.log(els[0].value);

Categories

Resources