Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I want to get this "data" multidimensional array value in my javascript function. How can I get it?
Here is my code: https://jsfiddle.net/tanzilamohita/7nhv5h8h/
function getJSarray(){
var data = new Array;
data = document.getElementsByName("data[]");
alert(data.length);
//alert(hidden_courses[2].value);
}
Simply by using starts-with selector $('[name^="data["]') in jquery
function getJSarray() {
var data = new Array;
data = $('[name^="data["]');
alert(data.length);
console.log('Alternatively use querySelectorAll '+document.querySelectorAll("input[name^='data[']").length);
return false;
//alert(hidden_courses[2].value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" onsubmit="return getJSarray()">
A1<input type="radio" name="data[0][]" value="1" /><br /> A2
<input type="radio" name="data[0][]" value="2" /><br /> B1
<input type="radio" name="data[1][]" value="3" /><br /> B2
<input type="radio" name="data[1][]" value="4" /><br />
<br /><br />
<input type="submit" name="save" value="Save" />
</form>
Alternatively, use querySelectorAll() like, document.querySelectorAll("input[name^='data[']");
To get the checked elements use :checked-selector like
function getJSarray() {
var data = new Array;
data = $('[name^="data["]:checked');
alert(data.length);
return false;
//alert(hidden_courses[2].value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" onsubmit="return getJSarray()">
A1<input type="radio" name="data[0][]" value="1" /><br /> A2
<input type="radio" name="data[0][]" value="2" /><br /> B1
<input type="radio" name="data[1][]" value="3" /><br /> B2
<input type="radio" name="data[1][]" value="4" /><br />
<br /><br />
<input type="submit" name="save" value="Save" />
</form>
Related
This question already has answers here:
jQuery access input hidden value
(9 answers)
Closed 1 year ago.
console.log($('.package_ids').val());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="package_ids[]" name="package_ids[]" value="6" />
<input type="hidden" class="package_ids[]" name="package_ids[]" value="775" />
<input type="hidden" class="package_ids[]" name="package_ids[]" value="7207" />
I'm getting the right results when submitting this as a form. But when I get the value using jQuery I'm getting undefined.
I'm hoping to get something like an array [6, 775, 7207].
package_ids[] cannot be a class name. To get the expected array, you can use .map as follows:
const arr = $('.package_ids').map((i,elem) => +$(elem).val()).get();
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="package_ids" name="package_ids[]" value="6"/>
<input type="hidden" class="package_ids" name="package_ids[]" value="775"/>
<input type="hidden" class="package_ids" name="package_ids[]" value="7207"/>
You could select the items with their name property, e.g.:
let values = [];
$('[name="package_ids[]"]').each(function (i, v) {
values.push($(v).val());
});
console.log(values);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="package_ids[]" name="package_ids[]" value="6" />
<input type="hidden" class="package_ids[]" name="package_ids[]" value="775" />
<input type="hidden" class="package_ids[]" name="package_ids[]" value="7207" />
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have a form and I want to retrieve the values by their id's. Instead of writing var itemnamehere = document.getElementById('theid'); multiple times, I want to be able to loop through the inputs in the form and create variables within a for loop.
This is what I have so far
var gsItems = document.getElementsByClassName('gsinput').getAttribute('id');
for(var i = 0; i < gsItems.length; i++){
//create new variable here
}
Because getElementsByCLassName returns an nodelist you can't use getAttribute on it because that method is reserved for single elements only. BUT you also don't need the id either if I understand your question. You can simply iterate over the nodelist you get with getElementsByCLassName and do whatever you need to with the inputs, like grab their values.
Here's how you might approach it with ES6:
const gsItems = document.getElementsByClassName('gsinput');
[...gsItems].forEach(item => {
console.log(item.value);
});
<input class="gsinput" value="1" />
<input class="gsinput" value="2" />
<input class="gsinput" value="3" />
<input class="gsinput" value="4" />
<input class="gsinput" value="5" />
If you wanted to use ids you might want to create a map of ids against values. You could do something like this with reduce:
const gsItems = document.getElementsByClassName('gsinput');
const obj = [...gsItems].reduce((obj, item) => {
obj[item.id] = item.value;
return obj;
}, {});
console.log(obj);
<input class="gsinput" id="steve" value="1" />
<input class="gsinput" id="daisy" value="2" />
<input class="gsinput" id="tina" value="3" />
<input class="gsinput" id="dennis" value="4" />
<input class="gsinput" id="bob" value="5" />
And here's the ES5 method:
const gsItems = document.getElementsByClassName('gsinput');
Array.prototype.forEach.call(gsItems, function (item) {
console.log(item.value);
});
<input class="gsinput" value="1" />
<input class="gsinput" value="2" />
<input class="gsinput" value="3" />
<input class="gsinput" value="4" />
<input class="gsinput" value="5" />
Id is not perfect approach to get multiple form input values when using a loop.
function getSubmitValue(params) {
var formObject = document.theForm;
var itemnamehere = [];
if (formObject.length) {
for (var i = 0; i < formObject.length; i++) {
if (formObject[i].value !== "") {
itemnamehere.push(formObject[i].value);
}
}
} else {
alert("Please check your form input value")
}
}
<form id="myForm" name="theForm">
<input type="text" name="user" id="user" value="Arsalan" />
<input type="text" name="occopation" id="occopation" value="doctor" />
<input type="number" name="age" id="age" value="27" />
<input type="text" name="email" id="email" value="johndoe#test.com" />
<textarea name="message" id="message">Enter Your Message Her</textarea>
<button type="submit" onClick="getSubmitValue()">Place Order</button>
</form>
This question already has answers here:
AngularJS group check box validation
(4 answers)
Closed 8 years ago.
I wouldn't be surprised if this is a duplicate however I can't find anything simple along the lines of what I need.
All I need is the user to be required to choose at least one checkbox but I'm baffled how to accomplish this.
<input type="checkbox" ng-model="myForm.first" /> First <br />
<input type="checkbox" ng-model="myForm.second" />Second <br />
<input type="checkbox" ng-model="myForm.third" /> Third
<input type="checkbox" ng-model="myForm.first" ng-required="myForm.first || myForm.second || myForm.third" /> First <br />
<input type="checkbox" ng-model="myForm.second" ng-required="myForm.first || myForm.second || myForm.third"/>Second <br />
<input type="checkbox" ng-model="myForm.third" ng-required="myForm.first || myForm.second || myForm.third"/> Third
HTML
<div ng-app="myApp" ng-controller="myCrtl as myForm">
<input type="checkbox" ng-required="myForm.selectedOptions" ng-model="myForm.selectedOptions.first" ng-change="myForm.onCheckBoxSelected()" /> First <br />
<input type="checkbox" ng-required="myForm.selectedOptions" ng-model="myForm.selectedOptions.second" ng-change="myForm.onCheckBoxSelected()"/>Second <br />
<input type="checkbox" ng-required="myForm.selectedOptions" ng-model="myForm.selectedOptions.third" ng-change="myForm.onCheckBoxSelected()"/> Third<br/>
<span style="color:red;" ng-if="!myForm.selectedOptions ">Required</span>
</div>
JS
angular.module('myApp',[])
.controller('myCrtl',function(){
var myForm=this;
myForm.onCheckBoxSelected=function(){
var flag=false;
for(var key in myForm.selectedOptions){
if(myForm.selectedOptions[key]){
flag=true;
}
}
if(!flag){
myForm.selectedOptions = undefined;
}
};
});
JS fiddle : http://jsfiddle.net/fodyyskr/
Hi I have the following page:
<input type="checkbox" name="fruit1" id="1" class="box">Banana<br /><br />
<input type="checkbox" name="fruit2" id="2" class="box">Cherry<br /><br />
<input type="checkbox" name="fruit3" id="3" class="box">Strawberry<br /><br />
<input type="checkbox" name="fruit4" id="4" class="box">Orange<br /><br />
<input type="checkbox" name="fruit5" id="5" class="box">Peach<br /><br />
<input type="button" id="groupdelete" value="clickme"><br />
$(document).ready(function(){
$('#groupdelete').on('click', function(){
var names = [];
$('input:checked').each(function() {
names.push($('input:checked').attr("name") + $('input:checked').attr('id'));
});
console.log(names);
})
})
What I am trying to do is the following:
To add the checked checkboxes in the array. And after that, I would like to be able to pass the value in php variable.
When I excecute the code now, I am getting result like this:
["fruit22", "fruit22", "fruit22"]
Any help will be deeply appreciated.
Regards, Zoreli
You need to use this rather than 'input:checked' inside the .each() function to refer to the current element in the set being examined. If you re-use the selector you're getting the set again, then only ever getting the attributes from the first element in the set.
$('input:checked').each(function() {
names.push($(this).attr("name") + this.id);
});
Change your html to
<input type="checkbox" name="fruits[]" id="1" class="box">Banana<br /><br />
<input type="checkbox" name="fruits[]" id="2" class="box">Cherry<br /><br />
<input type="checkbox" name="fruits[]" id="3" class="box">Strawberry<br /><br />
<input type="checkbox" name="fruits[]" id="4" class="box">Orange<br /><br />
<input type="checkbox" name="fruits[]" id="5" class="box">Peach<br /><br />
<input type="button" id="groupdelete" value="clickme"><br />
And now, look to jQuery/Javascript
$(document).ready(function(){
$('#groupdelete').click(function() {
var marked = new Array();
var k = 0;
$('input:checked').each(function(index,value) {
marked[k] = value;
k++;
});
alert(marked[0].id);
});
});
alert is just giving you the demo by accessing the direct access on the array's index.
I have a jQuery vote script that allows a user to vote on a poll that is displayed on a page. On a particular page there are many polls being displayed (via forms) and the jQuery grabs the values of the inputs in a particular form and send the data over to a query.php page.
This is what a sample poll page looks like:
QUESTION 1:<br />
<div class="poll_area">
<div id="poll">
<form method="POST" action="" class="poll_query">
<input type="hidden" value="favorites" name="page" />
<input type="hidden" value="user1" name="to" />
<input type="hidden" name="pid" value="1"/>
<input name="" type="radio" value="yes" /> Yes<br />
<input name="" type="radio" value="no" /> No<br />
</form>
</div>
<div class="result"> </div>
</div>
QUESTION 2:<br />
<div class="poll_area">
<div id="poll">
<form method="POST" action="" class="poll_query">
<input type="hidden" value="favorites" name="page" />
<input type="hidden" value="user2" name="to" />
<input type="hidden" name="pid" value="2"/>
<input name="" type="radio" value="yes" /> Yes<br />
<input name="" type="radio" value="no" /> No<br />
</form>
</div>
<div class="result"> </div>
</div>
And this is the jQuery Script I'm running:
var ajax_load = "<img src='images/ajax-loader.gif' alt='loading...' />";
$("form.poll_query > input[type='radio']").click(function(e) {
e.preventDefault();
var form= $(this).closest("form");
var pid = $("input[name='pid']", form).val();
var ans = $(this).val();
var page = $("input[name='page']", form).val();
var to = $("input[name='to']", form).val();
$(this).closest("#poll").html(ajax_load);
$.post(
"query.php?module=vote",
{answer: ans, pid: pid, to: to, page: page},
function(responseText){
$("#poll").hide(0,function() {
$(".result").html(responseText).fadeIn(1500);
});
},
"html"
);
});
When voting in the first poll everything renders correctly. The 'responseText' that is returned is displayed in the page where it is supposed to. But for every subsequent poll on the page the 'ajax_load' loads correctly where it is supposed to but the 'responseText' is loaded in the .result class of the FIRST poll.
This is what the page initially looks like:
Question 1?
o YES
o NO
Question 2?
o YES
o NO
if a particular user votes on question 2 this is what the page should look like:
Question 1?
o YES
o NO
Question 2
o YES : XXXXXXXXX 60%
o NO : XXXXXX 40%
Instead this is what actually happens (even though the user voted on question 2):
Question 1?
o YES : XXXXXXXXX 60%
o NO : XXXXXX 40%
Question 2
o YES
o NO
But if the user votes on question 1 the results is loaded properly:
Question 1?
o YES : XXXXXXXXX 60%
o NO : XXXXXX 40%
Question 2
o YES
o NO
I've tried changing $(".result").html(responseText).fadeIn(1500); to $(this).closest(".result").html(responseText).fadeIn(1500);
But still no luck.
You have duplicate element IDs for poll. You should use a class instead, then make your selectors in the callback more precise. You're on the right track with $(this).closest().
You'll need to do something like:
var pollArea = $(this).closest(".poll_area");
$.post(... , function(responseText) {
pollArea.find(".poll").hide(0,function() {
pollArea.find(".result").html(responseText).fadeIn(1500);
});
Note that the .poll and .result selectors are now scoped by the .poll_area that encloses the clicked radio button.
I'd suggest using an element based on an ID rather than a class. Therefore wrap each question into a div with a unique ID
<div id="q1">
QUESTION 1:<br />
<div class="poll_area">
<div id="poll">
<form method="POST" action="" class="poll_query">
<input type="hidden" value="favorites" name="page" />
<input type="hidden" value="user1" name="to" />
<input type="hidden" name="pid" value="1"/>
<input name="" type="radio" value="yes" /> Yes<br />
<input name="" type="radio" value="no" /> No<br />
</form>
</div>
<div class="result"> </div>
</div>
$("#q1 .result").html('...');