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 *=).
Related
I am kinda drawing a blank on this one facet, and I can't seem to quite figure it out.
So I have a simple HTML select => option element which is populated from the back-end (not really relevant tho)
My question is this:
Let's say I have a pre-made object such as this:
{
keyName1: 450,
keyName2: 800,
keyName3: 300
}
What I want to do is to check if the key name matches a name of an option value in my multi-select dropdown (the values come from an array, using 'ng-repeat' on the option), and if the option value matches the key, add the number value to some sort of increment variable, so I can display the total number of 'keyNames' found.
For example - if a user selects 'keyName1' the incrementer value will total 450. If a user selects 'keyName1' and 'keyName2' the incrementer value will total 1,250.
I am lost on how to accomplish this - right now it is reading only the very first item in the dropdown.
Here is the code doing that:
_.forEach($scope.widget.instance.settings.serviceContractTypes, function (type) {
// if item in array matches what is selected in multi-select option
if(type === $('#contractType:selected').text().trim()) {
// do stuff
}
});
Hope this all made sense, and thanks very much for any direction you might offer...
(does not have to utilize lodash, I'm just used to using it)
jQuery's :selected selector only works for HTML options:
"The :selected selector works for elements. It does not work for checkboxes or radio inputs; use :checked for them."
(https://api.jquery.com/selected-selector/)
You say "I have a simple HTML select => option element which is populated from the back-end (not really relevant tho)"
This could be relevant. By default, an HTML option tag does not support multiple selections; it has to explicitly be created as a select multiple in order to support that. Can you share the HTML code for the option to make it clear whether that's a problem or this is a red herring?
Also, can you echo $scope.widget.instance.settings.serviceContractTypes and share to make sure it's actually matching what's available in the text of the options?
ADDENDUM - Wait, I think I figured it out!
The $('#contractType:selected') selects all the selected options in #contractType and concatenates them. Then $('#contractType:selected').text().trim() trims this down to the first word, which is just the first selected option. You should do something like $('#contractType:selected').text().split(" ") and then check if each type is in the resulting list.
I'm trying to get the control which is inside of a cell table; in my table I have different controls, labels, checkboxes, etc.
I basically need to get the control which is used in that table
var x = document.getElementById('myTable').rows[0].cells;
alert(x[0].innerText);
//alert(x[3].innerHTML);
if (x.Control == checkbox) {
x.checked = true;
}
This will be in a loop but for now I just need to be able to check the checkbox by grabbing the control and setting that control to true
Any hints/help would be great
I doesn't really understand what you exactly need is it
document.getElementById("checkbox").checked = true;
here checkbox is the id of a particular checkbox
I would put a unique id on the form element instead and use that to grab it. In this way you can change the structure in the future. Example: perhaps you no longer want to use a table grid, but a grid of divs.
When you use innerHTML you will might also grab textnodes and other things you put in the cell.
An alternative - if you really want to find a specific cell in a table - is to give each cell a unique id on the form "cell-4-5" where 4 is the row and 5 is the column.
[EDIT]
If you want to have the cell contents returned as a DOM-object then childNodes can be used:
var x = document.getElementById('myTable').childNodes[0].childNodes[0].childNodes
If you want to have the cell contents returned as a string then innerHTML can be used:
var x = document.getElementById('myTable').childNodes[0].childNodes[0].innerHTML
To check if the checkbox is checked you need to keep it as a DOM element and thus use the first version.
Hi I have a datatables based table that holds data. I need to be able to get the values out of the following string that I have been able to do so far.
<input name="jobNo" value="job_no_123" />job_no_123
I need to be able to get the name and the value and store into separate variables that I then pass off to do something else.
However I do also have another 4 fields on the page that I need to capture too:
<input name="item_1" value="data1" />data1
<input name="item_2" value="data2" />data2
<input name="item_3" value="data3" />data3
<input name="item_4" value="data4" />data4
And of top of this, this would only be the data from one row, and I need to do this for multiple rows too. But I need to start somewhere.
Please help.
Thanks
I am not sure what are your needs but here is a code that should help
$('input').each(function(i, val){
$(this).attr('name'); // will get the attribute name
$(this).attr('value'); // will get the attribute value
$(this).attr('text'); // will get the text inside the input
});
This regex can find the values from your code. However, it assumes that the input is strictly in that format, with no variations in even whitespace.
<input name="(.*)" value="(.*)" />
The values will be in captured groups 1 and 2.
Note: I am aware that regex should not be used to parse HTML, but if the input is strict enough, it works.
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;
});
On my aspx page I dynamically create html controls on client side using javascript. For example, after page load you can click button in a browser, by clicking button html input and select elements appear. You may click once again, and this elements (input and select) will added again. So, you can create so many inputs and selects as you want (all this using javascript, no postbacks)
After user created some inputs and selects and entered some information in it, he posted form. I want on server side to find all this dynamically added elements and perform some actions depends on values in this controls.
How can I find dynamically added elements, and what is the best and elegant way to achieve this?
Thanks in advance.
In the Javascript that creates the new elements, increment a counter each time an element is created. Add the value of the counter to the name of the input element so each element has a unique name.
Add the final value of the counter to a hidden form field when the form is posted.
In your server side code, create a loop that starts at zero and continues until you have reached the value of the counter. Within the loop, fetch the posted value of the corresponding form field.
When you add the elements, assign unique IDs to them, and then retrieve their values using Request.Form["UniqueIdHere"] (C#) or Request.Form("UniqueIdHere") (VB.NET).
Create a loop that loops through each input and select object, that grabs the name/id of the current object and its corresponding value. Then add those items to an array and once the loop is completed, pass those values to your aspx file.
You can view an example with this approach at: http://jsfiddle.net/euHeX/. It currently just alerts the values, but you could easily modify it to pass the values as a parameter via ajax to your handler aspx file. The code will add new inputs or select boxes based off of the input provided. This would of course be modified to reflect your current setup.
HTML:
<div id="dynamic"></div>
<input type="button" id="submit-form" value="Submit>>">
JavaScript (using jQuery):
function createInput(type){
for(var i=0; i<5; i++){
if(type==0){
var obj = '<input type="text" id="'+i+'" class="dynamicContent">';
}else if(type==1){
var obj = '<select id="'+i+'" class="dynamicContent"><option>--Select--</option></select>';
}
$("#dynamic").append(obj);
}
}
function getContent(){
var inputArray = [];
$(".dynamicContent").each(function(k,v){
var o = $(this);
var oType;
if(o.is("input")){ oType = "input"; }
if(o.is("select")){ oType = "select"; }
var oID = oType+o.attr("id");
var oValue = o.val();
inputArray.push(oID+'='+oValue);
});
alert(inputArray);
}
$("#submit-form").click(function(){
getContent();
});
// Set type to 0 for input or 1 for select
var type = '1';
createInput(type);
If you're using jQuery you can use .live() to achive this like a peace of cake!
http://api.jquery.com/live/
I don't know if your controls will survive the postback the way you're creating them, but a good technique for accessing dynamically generated controls (assuming that you've figured out how to persist them) is to do something like the following:
Add a panel to your page. Add your dynamically created controls to this panel.
In the OnClick event handler (or other method), do something like the following:
foreach (DropDownList ddl in Panel1.Controls.OfType<DropDownList>())
{
//put code here
}
foreach (TextBox txt in Panel1.Controls.OfType<TextBox>())
{
//put code here
}