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>
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 2 years ago.
Improve this question
This code are working fine, but when I write on "#sub_id" field then remove all existing value on "#landing" field but I can not remove, I need to add "#sub_id" after "#landing" value.
<html>
<body>
<form>
<label for="p_url">landing page</label>
<input type="text" id="landing" name="p_url" placeholder="Campaign Name" value="www.example.com?" readonly>
<label for="pi">Promotional Info</label>
<input type="text" id="sub_id" name="pi" placeholder="sub_id">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#sub_id").keyup(function(){
$("#landing").val($("#sub_id").val());
});
});
</script>
</body>
</html>
Try with:
$("#landing").val($("#landing").val() + $("#sub_id").val());
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';
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
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.
Improve this question
Trying to change the color of the text with javascript - here is what I have
<input name="text" value="black" id="black" type="radio" onclick="changetextcolor(this);">"Black"
<input name="text" value="purple" id="purple" type="radio" onclick="changetextcolor(this);">"Purple"
<input name="text" value="lightpink" id="lightpink" type="radio" onclick="changetextcolor(this);">"Light Pink"
function changetextcolor(element){
document.body.style.Color = element.value;
};
here is the web page I am working on http://www.acsu.buffalo.edu/~mariaroo/validation.html
You have to put color property in lowercase and not with capital letters.
color and not Color.
function changetextcolor(element){
console.log(element.value);
document.body.style.color = element.value;
};
<input name="text" value="black" id="black" type="radio" onclick="changetextcolor(this);">Black
<input name="text" value="Purple" id="purple" type="radio" onclick="changetextcolor(this);">Purple
<input name="text" value="lightpink" id="lightpink" type="radio" onclick="changetextcolor(this);">Light Pink
You're changing the wrong property in your code. It should be document.body.style.color (note all lowercase color).
You mixed something up.
You can not use a .text property for styling the color of your text.
Try .color instead. This should work.
function changetextcolor(element){
document.body.style.color = element.value;
};
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 years ago.
Improve this question
I want add value textbox into another textboxt when onchange
like this totorial but this tutorial save value to alert
$('#selector').change(function () {
alert($('#selector').val());
});
<input type="text" id="selector">
<input type="text" id="value">
tutorial
I want to be like this
how can I make it?
$('#selector').change(function () {
alert($('#selector').val());
$('#selector2').val($('#selector').val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="selector">
<input type="text" id="selector2">
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>