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 4 years ago.
Improve this question
I am using materialize framework and i have to populate this form using java script. I am not sure how to access them in my js file
<div class="row col s10 offset-s1" id="questionArea" style="display:none">
<blockquote class="flow-text"> Select the capital of the country shown below.</blockquote>
<div class="input-field col s6">
Question <span id="quesTextSpan"></span><p>
<input name="qOptions" type="radio" id="optionId0" class="with-gap qOptionClass" />
<label for="optionId0"></label>
</p>
<p>
<input name="qOptions" type="radio" id="optionId1" class="with-gap qOptionClass" />
<label for="optionId1"></label>
</p>
<p>
<input name="qOptions" type="radio" id="optionId2" class="with-gap qOptionClass" />
<label for="optionId2">d</label>
</p>
<p>
<input name="qOptions" type="radio" id="optionId3" class="with-gap qOptionClass" />
<label for="optionId3"></label>
</p>
</div>
</div>
You can access the values of the radio buttons like this:
var radioVal = document.getElementById('optionId0').checked;
You can then perform logic on them by using conditionals and functions.
To gather them all quickly I would recommend doing this.
var radios = document.querySelectorAll('input[type="radio"]');
This will give you an array with each of the elements.
You may then go through and change the value to true or false depending on how you want to populate them.
Example)
radios[0].checked = true // Sets the first radio button to be on.
Edit)
To display the div use:
document.getElementById('questionArea').style.display = '';
To hide the div use:
document.getElementById('questionArea').style.display = 'hidden';
Related
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 7 months ago.
Improve this question
Can anyone tell me how to print the selected value in the same web page in JavaScript for below code please?
<form>
What color do you prefer?
<input type="radio" name="colors" id="red">Red
<input type="radio" name="colors" id="blue">Blue
</form>
Well you can console.log it or add it inside another element on page. The following is an example.
document.querySelectorAll("input").forEach(function(elem) {
elem.addEventListener("input", function(ev) {
var value = elem.closest("label").innerText
console.log(value)
// or
document.getElementById("output").innerText = value
})
})
<form>
What color do you prefer?
<label><input type="radio" name="colors" id="red">Red</label>
<label><input type="radio" name="colors" id="blue">Blue</label>
</form>
<p id="output"></p>
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 1 year ago.
Improve this question
I am trying to create a html form with required input fields. but its not responding. below is the code
<div class="col-sm-6">
<label for="city" class="form-control">city
<input name="city" type="text" id="city" class="form-control" required>
</label>
<div class="invalid-feedback">
valid city is required
</div>
</div>
If by "not responding" you mean that a user can submit the form without entering a "City" value, it may be because you need a <form> element around form controls in order to allow browsers' default behavior for required inputs to work correctly.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I just started with HTML/CSS/JavaScript and running into a (hopefully) small obstacle while testing Bootstrap.
My code:
<div class="form-group">
<div class="col-sm-2">
<input type="text" class="form-control" id="text1" name="text1" value="Initial Value" readonly>
</div>
<div class="checkbox col-sm-10">
<label>
<input type="checkbox" id="checkbox" data-toggle="collapse" data-target="#collapse3rdParty"
aria-expanded="false" aria-controls="collapse3rdParty">
Select to change value
</label>
</div>
</div>
<div class="collapse" id="collapse3rdParty">
<div class="form-group form-group-lowermargin">
<div class="col-sm-offset-2 col-sm-10">
<input type="text" class="form-control" id="inputName" name="inputName" placeholder="Name">
</div>
</div>
</div>
Live Demo also on JSFiddle.
What I already managed to achieve is 'collapsing out' an input field when the checkbox is checked.
What I couldn't find was any info on how to make that same checkbox change the value of the read-only text input (or maybe I didn't get it).
By default, i.e. when loading the page, it should have an initial value. When the checkbox gets checked, the value of the text input should get altered (so e.g. changing 'value="Initial Value"' to 'value="New Value"').
Is this possible without having to use JavaScript?
Any help on how to do this (either by CSS or JS) is highly appreciated ;-)
It is impossible to change the value of the text input without JavaScript. The following uses the jQuery framework, as opposed to the solution by #Lg102 which uses pure JavaScript.
This will change the input field once:
$('#checkbox').on('change', function(){
if (this.checked) {
$('#text1').val('New value');
}
});
This will toggle between the initial value and the new value based on whether the checkbox is checked:
$('#checkbox').on('change', function(){
if (this.checked) {
$('#text1').val('New value');
} else {
$('#text1').val('Initial value');
}
});
It could be done in CSS by using the :checked selector, combined with ~, but only if the field is after the checkbox in the DOM, so I wouldn't recommend it.
In (plain, no jQuery) JavaScript:
var initial = document.getElementById('text1'),
checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', function(){
initial.value = this.checked ? 'CHECKED' : 'NOT CHECKED';
});
You need to use javascript. You could do it like this :
document.getElementById('checkbox').onchange = function() {
document.getElementById('inputName').setAttribute('placeholder', this.checked ? 'new name' : 'name')
}
https://jsfiddle.net/d0fyxg8e/
jQuery version :
$('#checkbox').change(function() {
$('#inputName').attr('placeholder', this.checked ? 'new name' : 'name')
})
https://jsfiddle.net/594s2mtf/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Im trying to make a simple quiz like so:
I would like to use a custom alert box, not the usual JavaScript one. So just a div that appears with my message inside.
Apologies if I do not have more to work with than the screenshots - I've looked at many other questions and bits of scripts, but I'm really interested in something simple that can push me in the right direction.
Thanks!
You could try with JQuery. Then you could show or hide the divs simply by using $("#mydiv").show() or $("#mydiv").hide().
.correct{max-width:100px;opacity:0}
input:checked.right ~div.correct{position:relative;background-color:yellow;top:-20px;left:70px;opacity:1;}
<div >
Which country is commonly called the U.S.A ?<br>
England<input type="radio" name="one" value="UK" /><br>
America<input type="radio" name="one" value="US" class="right"/><br>
<div class="correct">Correct</div></div>
<div >
Which country is commonly called the U.S.A ?<br>
England<input type="radio" name="two" value="UK" /><br>
America<input type="radio" name="two" value="US" class="right"/><br>
<div class="correct">Correct</div></div>
<div >
Which country is commonly called the U.S.A ?<br>
England<input type="radio" name="three" value="UK" /><br>
America<input type="radio" name="three" value="US" class="right"/><br>
<div class="correct">Correct</div></div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I recently laid out a fairly simple quiz question with jQuery (show / hide, addclass and a variable to count attempts and respond if attempts = 2), and I'm trying to figure out the best practice for replicating the same code on multiple questions. Would the best practice be to change all the variables for both the HTML layout and the jQuery? Or is there a more efficient way to add a second / third.. etc question?
Here's how I laid out the first question.
<form class="ra">
<div class="cor">
<input type="radio" name="question1" class="c1" />A. Choice A<span class="hiddencorr">Correct answer</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i1" />B. Choice B<span class="incorr">Your choice</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i2" />C. Choice C<span class="incorr">Your choice</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i3" />D. Choice D<span class="incorr">Your choice</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i4" />E. Choice E<span class="incorr">Your choice</span>
</div>
</form>
<p class="rationale1"><b>Rationale:</b>
<br />
<br /><span class="rattext">Explanation of what was done wrong.</span>
</p>
<button id="radiochk1" class="checkhide">Check your answer</button>
<button id="resetq1" class="reset">Reset</button>
JS / CSS & functionality in fiddle.
http://jsfiddle.net/YSSWL/97/
Class values related to initial style and layout typically should not differ among like elements (though those indicating state could). Instead, increment your name and ID attributes using jQuery, similarly to what you're doing now for class.