jQuery General function to get value of :input selector - javascript

Is there a way to get the value of an :input in jQuery that holds for all :input?
I am asking this because I have a page with select and checkbox, it is for the following code:
for (var i = 0; i < arguments.length; i++) {
var localArgument = arguments[i].trim();
data[localArgument] = $(html).find(":input[name='" + localArgument + "']").val();
$(html).on("change", ":input[name='" + localArgument + "']", function(event) {
console.log(localArgument + ": " + $(this).val());
data[localArgument] = $(this).val();
reloadTable(table, html, data);
});
}
Where arguments is an array that holds names for elements.
I know I need to do it for checkbox with .prop("checked"), however I would much rather use a general function which I know does not need to be updated in the future.

just use $('input') selector to select all input elements
If you want to get the value of each input element you can do something like
$('input').each(function() {
// use $(this).val() to get the value
})

You can safely use val() for all inputs, checkboxes, radio buttons, and selects. This is a demo: http://jsfiddle.net/FxjQB/3

Related

jQuery Multiple Append

I'm going to append multiple values from an input, curious on how I can dry the append code. Possibly into a function, thanks!
var $inputFirst = $('input:first').val();
var $inputSecond = $('input:second').val();
$('ul').append('<li>' + $inputFirst + '</li>');
$('ul').append('<li>' + $inputSecond+ '</li>');
This should work for you
$(':input').each(function(i){
$('ul').append('<li>'+$(':input').eq(i).val()+'</li>')
})
Assuming you have same number of input and li. You can iterate through the li and append the corresponding input value it.
inputs = $('input');
$('ul li').each(function(){
$this).append(inputs.eq($this).index()));
});
Note As a additional note you are using tag that will effect the whole page. It might include the element you do not want to be part of this. So use class or some other attributes to access both li and input elements.
inputs = $('.class-of-input');
$('.class-of-ul li').each(function(){
$this).append(inputs.eq($this).index()));
});
hey i have created example for you on jsfiddle:-
$(document).ready(function() {
$("#createLI").click(function() {
var lis = "";
$(".forLI").each(function() {
var vl = $(this).val();
lis += "<li>" + vl + "</li>"
});
$("ul").append($(lis));
});
});
working example link:http://jsfiddle.net/BtkCf/166/
we are using class to filter the input so it will select all the inputs while creating LI tags.
in above example you can have any number of input boxes.
just provide a class 'forLI' to input boxes it will append there text values to ul as li.
we can not select value like this $('input:second').val(); you can use $('input:eq(1)').val();
thanks

How to set filter on div html attribute

I have some divs and one button. Divs have zozo [j] attribute .
When I click on the button, I want their id to be set, but not all divs, just those that have j > k. In fact I want to use a filter.
<div zozo="sim [0]"></div>
<div zozo="sim [1]"></div>
<div zozo="sim [2]"></div>
.
. // and some div else
.
var k = 1;
I know the below code is wrong, but I want something like this:
$("div [zozo='sim ["+ > = k + "]' ]").attr('id' , k+1);
I think you are trying to do:
$("div[zozo^=sim]" ).attr('id' , function(i){ //Use attribute startswith seletor
//return i+1; //return index + 1 as the id
return +$(this).attr('zozo').match(/(\d+)/).pop() + 1;
});
Or just set a common class name to all those elements and use class selector
$("div.myClass" ).attr('id' , function(i){ //Use attribute startswith seletor
return i+1; //return index + 1 as the id
});
Also remember that zozo is not a valid attribute, prefix it with data-* would be more appropriate.
Demo
Ok, so what you'll have to do here is iterate over each element and then do your calculations on the value of each one individually. You're talking about a selector based on some arithmetic calculation - I don't believe that exists.
Here is how I would do it:
var k = 1;
$( "div[zozo^='sim']" ).each( function(){
var value = $( this ).attr( "zozo" ).match(/(\d+)/)[1]; // remove all except the number
value = parseInt( value ); // convert it into an actual number
if ( value >= k ){
// if a condition is met - we update the attribute of the current element
$( this ).attr( "id", (value + k ) );
}
});
I'm using jquery's "attribute starts with" selector here that matches all elements that have a zozo class value that starts with the string "sim".
Note that in your example you're wanting setting the id attribute to k+1. This will always remain the same number and so you'll be setting multiple elements with the same id. You don't want to be doing that. In my example I've made sure that each id attribute is unique.
Check out this demo, you'll see that all but the first red box have their id set.
Assuming the value of data-zozo is always in the same format, and assuming I've understood your question correctly, this should work. You'd want to use a more specific selector, of course.
$('div').click(function () {
var myK = $(this).attr('data-zozo');
myK = myK.charAt(5);
myK = parseInt(myK);
if (myK >= 1) {
$(this).attr('id',myK + 1);
}
});
http://jsfiddle.net/isherwood/5g7yU/
Something like this? WARNING, UGLY CODE
$('#parentdiv > div').each(function () {
var $that = $(this);
var zozo = parseInt($that.attr('zozo').replace('sin[', '').replace(']', ''));
if (zozo >= k)
$that.id = k + 1;
});

JavaScript For loop appending 4 times

I have a JavaScript program that isn't properly functioning. For some reasons before it appends what it is actually getting from the checked radio box it appends three times with noting in the append except the styling. I'm not sure what I'm doing wrong.
$(document).delegate('#add-owner', 'pageinit', function () {
loadOwners();
$('#add-owner-save').bind('click', function () {
var permission = $('#editing-permissions option:selected').text();
var selection = $("input[type='radio']:checked") || [];
if (selection.length > 0) {
for (var i = 0; i < selection.length; i++) {
console.log($('#label-' + selection[i].id).find('.owner-name').text());
console.log($("input[type='radio']:checked").val());
$('.display-owners').append('<div class="ui-grid-a"><div class="ui-block-a">' + $('#label-' + selection[i].id).find('.owner-name').text() + '</div><div class="ui-block-b" style="text-align:right">' + permission + '</div></div>');
}
$('.display-owners').trigger('create');
}
$('.display-owners').show();
$('#add-owner').dialog('close');
$('input[name=contribute-radio]').attr('checked', false).checkboxradio("refresh");
return false;
});
});
I think the problem is that I have multiple radio areas on this page. How do I specify that I just want these radio buttons are the ones I want it to checked?
This code:
... + $('#label-' + selection[i].id).find('...
should be like this:
... + $('#label-' + selection[i].attr('id')).find('...
because what you have in selection array are jQuery objects, not DOM elements objects.
Thanks Esalija for pointing out my assumption was not correct.
Since said you have multiple sets of radio buttons, the selector you're using is finding all of them on the page so that is why you have multiple "checked" radio buttons.
This:
var selection = $("input[type='radio']:checked") || [];
To this:
var selection = $("input[name='radioset1']:checked") || [];
Then just name each radio set different and replace "radioset1" with the set you need for this one.

Altering the value of an option (select) element?

I'm attempting to select the selected value of a <select> form element, and append the value with -R. (This will be for regex matching later on). Anyway, so far I've tried the following:
Attempt 1:
var country = $('select[name=g_country\\['+value+'\\]]').val();
$('select[name=g_country\\['+value+'\\]]').find('option[value=' + value +']').val(country + '-R');
Attempt 2:
var country = $('select[name=g_country\\['+value+'\\]]').val();
$('select[name=g_country\\['+value+'\\]]').val(country + '-R');
I can tell that the selection of the correct form element (using delete_x, where x is a number) works fine, as the form elements to disable when .select-delete is clicked, however the value setting doesn't. The commented portion down the bottom is what I've been using to check the value of the <select> element post-value change (or what should be post-value change).
Here's a link to my jsFiddle: http://jsfiddle.net/gPF8X/11/
Any help/edits/answers will be greatly appreciated!
Try this:
$('.select-delete').click( function() {
var value = $(this).attr('id');
value = value.replace('delete_', '');
var country = $('select[name=g_country\\['+value+'\\]] option:selected').val() + '-R';
alert(country);
$('select[name=g_country\\['+value+'\\]] option:selected').val(country);
$('select[name=g_country\\['+value+'\\]]').attr('disabled','1');
$('input[name=g_url\\['+value+'\\]]').attr('disabled','1');
$(this).css('display', 'none');
var check = $('select[name=g_country\\['+value+'\\]]').val();
$('#test').append(check);
});
There is an issue with your HTML as well.
Finally came up with the right selector, props to #gjohn for the idea.
Here's my final working code, that appropriately adds -R to the end of g_country[x]:
$('.select-delete').click( function() {
var value = $(this).attr('id');
value = value.replace('delete_', '');
var country = $('select[name=g_country\\['+value+'\\]]').val();
$('select[name=g_country\\['+value+'\\]] > option:selected').val(country + '-R');
$('select[name=g_country\\['+value+'\\]]').attr('disabled','1');
$('input[name=g_url\\['+value+'\\]]').attr('disabled','1');
$(this).css('display', 'none');
});

Jquery Load global function partially working

Here is the code.
function product_analysis_global() {
$(':checkbox:checked').each(function() {
$('#product_' + this.alt).load(this.title);
$('#product_quantity_PRI_' + this.alt).value = this.value;
});
}
All working except the last line that is not working, any ideas. Should return the value of the current checkbox to the appropriate field '#product_quantity_PRI_' + this.alt
Many Thanks.
.value isn't a jQuery object property (it's a DOM object one), it should be .val() like this:
$('#product_quantity_PRI_' + this.alt).val(this.value);
Or (more for illustration), the direct jQuery-less DOM method:
document.getElementById('product_quantity_PRI_' + this.alt).value = this.value;
Use the val() function.
var $this = $(this)
$('#product_quantity_PRI_' + $this.attr('alt')).val($this.val());

Categories