Im building a simple form where im trying to pass values from check boxes...
<div class="checkboxclass">
<input name="form[paperdesign][]" value="150" id="paperdesign0" type="checkbox">
<label for="paperdesign0">text 1</label>
<input name="form[paperdesign][]" value="100" id="paperdesign1" type="checkbox">
<label for="paperdesign1">text 2</label>
<input name="form[paperdesign][]" value="50" id="paperdesign2" type="checkbox">
<label for="paperdesign2">text 3</label>
<input name="form[paperdesign][]" value="50" id="paperdesign3" type="checkbox">
<label for="paperdesign3">text 4</label>
</div>
...using this function:
function calculate(){
var sela=document.querySelectorAll("div.checkboxclass input");
resultsel.value=0;
resultsel.value=parseInt(resultsel.value);
for(i=0;i<sela.length;i++)
resultsel.value=parseInt(resultsel.value)+parseInt(sela[i].value);
}
And it works OK apart from the fact that it's passing this all the values at this same time.
Could comeone please help me out on this one?
many Thanks in advance
Dom
If I understand the question, you mean that you only want to include the values for the checked items. In this case, you should be able to use the :checked selector:
var sela=document.querySelectorAll("div.checkboxclass input:checked");
I think you want it to only calculate selected checkboxes.
You have to check for checkbox selection:
function calculate(){
var sela=document.querySelectorAll("div.checkboxclass input");
var total = 0;
for(i=0;i<sela.length;i++) {
if(sela[i].checked)
total += parseInt(sela[i].value);
}
resultsel.value = total;
}
Related
function getUrlVars(){
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value){
vars[key] = value;
});
return vars;
}
var getBt = getUrlVars()["bt"];
According to the getBt variable here, how can I do 'checked' from the options below to the value equal to value?
So, for example, if the value of getBt is 2, I want to select the radio option with value 2.
<div class="card-body">
<label class="custom-control custom-radio">
<input type="radio" name="Filter[type][]" checked="" value="0" class="custom-control-input">
<div class="custom-control-label">All</div>
</label>
<label class="custom-control custom-radio">
<input type="radio" name="Filter[type][]" value="1" class="custom-control-input">
<div class="custom-control-label">option1</div>
</label>
<label class="custom-control custom-radio">
<input type="radio" name="Filter[type][]" value="2" class="custom-control-input">
<div class="custom-control-label">option2</div>
</label>
<label class="custom-control custom-radio">
<input type="radio" name="Filter[type][]" value="3" class="custom-control-input">
<div class="custom-control-label">option3</div>
</label>
</div>
Let's assume your method of parsing URL is working fine, and variable getBt contains the value that you wanted to be checked in radio button, there are couple of solution that you might try.
1. Using Vanilla JS
We can use attribute selector in DOM by using document.querySelector() and document.querySelectorAll() methods.
let getBt = 2; // value populated by parsing URL
let radioButton = document.querySelector(`[name="Filter[type][]"][value='${getBt}']`);;
radioButton.checked = true;
2. Using jQuery
JQuery makes DOM manipulation easier, and for including that in your project, include the following in your project html file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Now in JS file, just write this:
$(`input[value=${getBt}]`).attr("checked", "checked")
PS: You can choose any solution to solve the issue. Hope it works.
You can find both version of solution in this Stackblitz link
I want to store the correct answer(option) and the other 3 options as well. But for the other 3 options I will store those in database saying is_correct(column) 0/no/False. But for that, I'll have to have such logic that will figure out which radio button is for which input field. How do I bind/map a radio input field to a text input field?
I can, extract values out of these elements but can't figure out the logic.
<div id="option" class="form-group">
<input type="radio" name="option" required/><input type="text" name="option_1" required/><br/><br/>
<input type="radio" name="option" required/><input type="text" name="option_2" required/><br/><br/>
<input type="radio" name="option" required/><input type="text" name="option_3" required/><br/><br/>
<input type="radio" name="option" required/><input type="text" name="option_4" required/>
</div>
I just can't figure out the next step! Seen similar types of posts but not so similar tbh despite the concept being same.
First off, I really don't understand why you use radio buttons and a input text. In my opinion, just switch the input text to labels, or if you want the user to type the answer just give him 1 input text.
That being said, keeping the design you've made:
HTML:
<div id="options" class="form-group">
<input type="radio" id="option_text" required/><input type="text" id="option_1" required/><br/><br/>
<input type="radio" id="option_text2" required/><input type="text" id="option_2" required/><br/><br/>
<input type="radio" id="option_text3" required/><input type="text" id="option_3" required/><br/><br/>
<input type="radio" id="option_text4" required/><input type="text" id="option_4" required/>
<button type="submit" id="sub">
Press me
</button>
</div>
<div id="output1">
</div>
<div id="output2">
</div>
<div id="output3">
</div>
<div id="output4">
</div>
Javascript:
$("#sub").on('click',function(){
let eachone=[];
eachone[0]=$("#option_1").val();
eachone[1]=$("#option_2").val();
eachone[2]=$("#option_3").val();
eachone[3]=$("#option_4").val();
$("#output1").html(eachone[0]+" - "+$("#option_text").prop("checked"))
$("#output2").html(eachone[1]+" - "+$("#option_text2").prop("checked"))
$("#output3").html(eachone[2]+" - "+$("#option_text3").prop("checked"))
$("#output4").html(eachone[3]+" - "+$("#option_text4").prop("checked"))
})
If you want to alter something, or test for your exact test case, here is the fiddle
Jfiddle.
Note I'm using jQuery, just for ease of code, you can change most of the jquery references to document.getElementById
Edit:
Updated fiddle with checkboxes: JFiddle
Edit2:
Updated fiddle with single option checkboxes:
Jfiddle2
Warning: the event created might break some other input type checkboxes you have in your code!
First I think you should use the value attribute of the radioButtons instead of the second input, just put the text in a span or a label :
<input type="radio" id="option1" name="option" value="option1">
<label for="option1">8</label>
then you can get the selected value by doing:
var selectedOption = null;
if (document.getElementById('option1').checked) {
selectedOption = document.getElementById('option1').value;
}
After that, you can query the db to see if the selected option is correct or not.
How about instead of submitting the form with form data, you submit a JSON string/object?
So, your object for question can be something like
{
"question" : "How many planets orbit around the sun?",
"options" : [{
"name" : "1",
"value" : "7",
"isAnswer" : false
}, {
"name" : "2",
"value" : "8",
"isAnswer" : true
}]
}
Now, what's left is to create this object when the submit button is clicked.
To do that, you can have ids such as
<input type="radio" id="radio-1" name="option" required/>
<input type="text" id="text-1" required/>
These elements can be created dynamically, or manually if you are making the page just for a single question.
Now, when the button to submit the form, is clicked, you can run the below code which constructs a JSON object.
let question = {};
question.question = $("#question").val(); //Assuming you are using jQuery and id for question input box is question.
question.options = [];
for(i=0; i<4; i++) {
let option = {};
option.name = (i+1); //convert to ascii if you want alphabets
option.value = $("#text-"+(i+1)).val();
option.isAnswer = $("#radio-"+(i+1)).checked;
question.options.push(option);
}
You can now send this question object to your server.
I cannot make the input name same or value same. The second and third inputs come from a loop using c# razor. I have 2 sets of radio inputs first one is one set and second and third are another set. Because the second and third have the same name, checking one makes the other unchecked. I want the same for all of them together so it would be like I have one set of 3 radio buttons. Like I said above I am not able to make the name or value same due to back-end data display issue. Here is my attempt below.
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
<script>
$(document).ready(function () {
if ($('#dcenter-listradio').prop("checked", true)) {
$('#dcenter-allradio').prop("checked", false);
}
if ($('#dcenter-allradio').prop("checked", true)) {
$('#dcenter-listradio').prop("checked", false);
}
});
</script>
If you can give them all the same class, then you can just use jQuery to detect when a change has occurred and then uncheck other items in the same class.
$(document).ready(function() {
var selector = ".groupTogether";
// or if you can't give same class, you could use "#unrelatedRadio, input[name='related']"
$(selector).change(function()
{
if(this.checked)
{
$(selector).not(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="unrelatedRadio" name="unrelated" type="radio" class="groupTogether">unrelated</input>
<input id="relatedA" name="related" type="radio" class="groupTogether">Related A</input>
<input id="relatedB" name="related" type="radio" class="groupTogether">Related B</input>
Or, if you can't give them the same class, just replace the selector with something that selects both sets (in my example, "#unrelatedRadio, input[name='related']")
let radios = document.querySelectorAll("input");
for (let i of radios){
i.name="same"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
I have a form element like this:
<div id="myformelement">
<input type="radio" id="option1">
<label for="option2">Option 1</label>
<input type="radio" id="option2">
<label for="option2">Option 2</label>
<input type="radio" id="option3">
<label for="option3">Option 3</label>
<input type="radio" id="option4">
<label for="option4">Option 4</label>
</div>
I want to hide the input fields "option2" and "option3" and their labels.
I can hide the input bullets by addressing the id. Unfortunately the corresponding labels to the input fields only have a "for" tag with the id in it.
How can I do this with javascript (no jquery).
I found this question (Find html label associated with a given input), but this seems only to work with one label within an ID, I can not use this.
Thanks in advance!
Kind regards,
Malte
In pure JavaScript you can use querySelector:
document.querySelector("label[for='option2']").style.display = "none";
You can do it with nextSibling:
var rdo = document.getElementById("option2");
var lbl;
rdo.style.display = "none";
for (lbl = rdo.nextSibling; lbl && lbl.nodeName.toUpperCase() !== "LABEL"; lbl = lbl.nextSibling) {
}
if (lbl) {
lbl.style.display = "none";
}
But I have a better option for you: It seems to be a well-kept secret that label elements can contain the input they relate to, and when they do no for is required at all. So if you change your HTML to:
<div id="myformelement">
<label><input type="radio" id="option1"> Option 1</label>
<label><input type="radio" id="option2"> Option 2</label>
<label><input type="radio" id="option3"> Option 3</label>
<label><input type="radio" id="option4"> Option 4</label>
</div>
...it gets a lot easier:
document.getElementById("option2").parentNode.style.display = "none";
You just find the input, traverse up to its parent which is the label, and hide that (which will hide the input as well).
I have many checkboxes in a dynamically produced (ASP) photo gallery. Each checkbox has the name 'photos' and contains a photo ID in the value, like this:
<form name="selectForm" id="selectForm">
<input type="checkbox" onclick="selectPhoto(<%=rs1.Fields("photoID")%>)" id="checkbox_<%=rs1.Fields("photoID")%>" class="photos" name="photos" value="<%=rs1.Fields("photoID")%>">
</form>
Without submitting a form, when the user clicks the checkbox, I need to create a comma (,) separated list of all the checked values for the checkbox named 'photos'. So this is what I tested but it alerts 'undefined'! The ASP is correct, for those not familiar with it.
function selectPhoto(id) {
... other stuff that uses id ...
var allValues = document.selectForm.photos.value;
alert(allValues);
}
But as I said above, this returns 'undefined' and I can work out why. When a user selects a photo, I simply need to display a list of all the photo ID's that have been clicked e.g. 1283,1284,1285,1286...
Any ideas what I am doing wrong here? Or is there another way to achieve this?
Try this:
var allValues = [];
$('input.photos').each(function(){
allValues.push($(this).val());
});
alert(allValues.join(','));
I believe that the problem comes from the fact that "document.selectForm.photos" is not an input but an array. I have some code for you that worked:
<script>
function selectPhoto(id) {
var allCheckbox = document.selectForm.photos;
var allValues = []
for (var i=0; i<allCheckbox.length; i++){
if (allCheckbox[i].checked){
allValues.push(allCheckbox[i].value)
}
}
alert( allValues.join(',') )
}
</script>
<form name="selectForm" id="selectForm">
<input type="checkbox" onclick="selectPhoto(1)" id="checkbox_1" class="photos" name="photos" value="1">
<input type="checkbox" onclick="selectPhoto(2)" id="checkbox_2" class="photos" name="photos" value="2">
<input type="checkbox" onclick="selectPhoto(3)" id="checkbox_3" class="photos" name="photos" value="3">
<input type="checkbox" onclick="selectPhoto(4)" id="checkbox_4" class="photos" name="photos" value="4">
<input type="checkbox" onclick="selectPhoto(5)" id="checkbox_5" class="photos" name="photos" value="5">
</form>