i am trying to output form values with inner.html
I got 2 problems with my checkboxes:
1. if i check more then 1 checkbox, only one is outputted
2. if no checkbox is checked, the input from other fields are also not outputted
How can i fix this problem?
<script>function changeText(){
var userInputname = document.getElementById('name').value;
var userInputcolor = document.querySelector('.color:checked').value;
document.getElementById('output1').innerHTML = userInputname;
document.getElementById('output2').innerHTML = userInputcolor;
return false;
}
</script>
<form method="get" onsubmit="return changeText()">
<input type="text" name="name" id="name" />
<br /><br />
<input type="checkbox" name="color" class="color" value="green">Green<br />
<input type="checkbox" name="color" class="color" value="yellow">Yellow<br />
<input type="checkbox" name="color" class="color" value="red">Red<br />
<input type="checkbox" name="color" class="color" value="blue">Blue<br />
<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />
document.querySelector only gets one single element, the first one encountered, you'd use document.querySelectorAll to get all matching elements, and you can convert that to an array and use map to return a concantenated string of the values, like this :
<script>function changeText(){
var userInputname = document.getElementById('name').value;
var userInputcolor = Array.prototype.slice.call(document.querySelectorAll(".color:checked")).map(function(el) {
return el.value;
}).join(', ')
document.getElementById('output1').innerHTML = userInputname;
document.getElementById('output2').innerHTML = userInputcolor;
return false;
}
</script>
<form method="get" onsubmit="return changeText()">
<input type="text" name="name" id="name" />
<br /><br />
<input type="checkbox" name="color" class="color" value="green">Green<br />
<input type="checkbox" name="color" class="color" value="yellow">Yellow<br />
<input type="checkbox" name="color" class="color" value="red">Red<br />
<input type="checkbox" name="color" class="color" value="blue">Blue<br />
<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />
FIDDLE
Related
How can we preserve the value of the input box whose corresponding checkbox is checked, and if the corresponding checkbox is not checked then clear input value from form?
<form onsubmit="finalSubmission">
<input type="checkbox" id="yourBox1" />
<input type="text" id="yourText1" />
<br>
<hr>
<input type="checkbox" id="yourBox2" />
<input type="text" id="yourText2" />
<br>
<hr>
<input type="checkbox" id="yourBox3" />
<input type="text" id="yourText3" />
<br>
<hr>
<input type="checkbox" id="yourBox4" />
<input type="text" id="yourText4" />
<br>
<hr>
<button type="submit">Submit</button>
</form>
I know I can do this way, but is there any other alternative approach for this. This is quite a length approach
function finalSubmission(event){
event.preventDefault();
let firstInputField;
let checkBox1 = document.getElementById("yourBox1");
if (checkBox1.checked == true){
firstInputField = true
} else {
firstInputField = false
}
if(!firstInputField){
document.getElementById('yourText').value = "";
}
}
Try this -
function finalSubmission() {
for (var i = 0; i < 4; i++) {
!document.getElementById("yourBox" + i).checked ? document.getElementById("yourText" + i).value = "" : null;
}
}
<input type="checkbox" id="yourBox1" />
<input type="text" id="yourText1" />
<br>
<hr>
<input type="checkbox" id="yourBox2" />
<input type="text" id="yourText2" />
<br>
<hr>
<input type="checkbox" id="yourBox3" />
<input type="text" id="yourText3" />
<br>
<hr>
<input type="checkbox" id="yourBox4" />
<input type="text" id="yourText4" />
<br>
<hr>
<button type="submit" onclick="finalSubmission">Submit</button>
I have a textfield which contains certain value:
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
this is the input checkbox
<input type="checkbox" name="user_id[] value="61" />
<input type="checkbox" name="user_id[] value="62" />
<input type="checkbox" name="user_id[] value="63" />
*note i run this checkbox in php thats why it contains the [] for array.
I want the checkbox to checked if there is a value of 61 inside the textfield. I want it to be dynamic because it is from database, because value can be change and it is not fixed. How do i do this?
thanks in advance
You can try something like this
let ids = $('#studID').val().split(',');
ids.forEach(function(id) {
$('input[type="checkbox"][value="'+id+'"]').prop('checked',true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />
let ids = $('#studID').val().split(',');
ids.forEach(function(id) {
$('input[type="checkbox"][value="'+id+'"]').prop('checked',true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />
plain javascript
let ids = document.querySelector("#studID").value.split(',');
ids.forEach(function(id) {
var checkbox = document.querySelector("input[name='user_id[]'][value='"+id+"']");
if(checkbox) {
checkbox.checked = true;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />
You have to iterate over the inputs and then check the condition:
document.querySelectorAll("input").forEach(function(i) {
if (i.value.indexOf("61") > -1) {
i.checked = true;
}
});
<input type="checkbox" name="user_id[]" value=" 61 " />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value=" 63" />
Add a change listener to the text field. It should loop through the checkboxes, either checking or unchecking them depending on whether their values match the input.
document.querySelector("#studID").addEventListener("change", function() {
var values = this.value.split(",");
var checkboxes = document.querySelectorAll(`input[name='user_id[]']`);
checkboxes.forEach(cb => cb.checked = values.includes(cb.value));
});
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64" />
<br>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
I want to show my checkbox value when I check it, but my code show only one value.
For example if I check 1st checkbox it show it's value at that time. If I check 2nd checkbox then it's value will display beside previous value.
What should I do?
<script>
function test(item) {
var result = $('#val').val();
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test()" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test()" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test()" />40
<br />
</html>
Please note -
You should have to use unique id
my suggestion is use class instead
Please refer this, i hope will be useful to you
$(document).ready(function(){
$('.chk_val').on('click',function(){
var result = $(this).val();
$('#course').append(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />
$('input[data-action="data-click"]').on("click", function() {
if($(this). prop("checked")==true){
var dataDisplay = "<span id='" + this.value + "'>" + this.value + "</span>";
$('div#show').append(dataDisplay + " ")
}
else {
$("#" + this.value).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
</div>
<input type="checkbox" value="20" data-action="data-click" />20
<br />
<input type="checkbox" value="30" data-action="data-click" />30
<br />
<input type="checkbox" value="40" data-action="data-click" />40
<br />
You have given same id to every checkbox so javascript finds only the first checkbox and shows its value.
You can send the clicked checkbox to the function and get its value
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val2" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val3" value="40" onclick="test(this)" />40
<script>
function test(item) {
var result = $(item).val();
$('#course').html(result);
}
</script>
function test(element) {
var result = $(element).val();
$('#course').append(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
Change $('#course').html(result); to $('#course').append(result);
Use this context and to get current checkbox
First of all, id attribute should be unique you need to always use class attribute for a group of elements.
For referring the clicked element pass this as click handler argument.
<script>
function test(item) {
document.getElementById('course').innerHTML = item.value;
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" value="40" onclick="test(this)" />40
<br />
</html>
Use class instead of id and bind the click event for class
$('.val').click(function() {
$("#course").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="val" value="20" />20
<br />
<input type="checkbox" class="val" value="30" />30
<br />
<input type="checkbox" class="val" value="40" />40
<br />
</html>
Try this one. Pass the item to the function and display the value of item. I have attached the sample code snippet.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item.value;
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
</html>
In the first Place you should never use same ID "val" to all the Check boxes you have Classes for that.
This is just a modification to previously entered code, to let you know that you don't have to pass the whole this Object to your function rather you can directly pass the value like this.value
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item;
$('#course').html($('#course').html());
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this.value)" />20
<br />
<input type="checkbox" value="30" onclick="test(this.value)" />30
<br />
<input type="checkbox" value="40" onclick="test(this.value)" />40
<br />
</html>
Hope that this helped you.
I have a form that if have checked TransientDevice, ControllingFrequency, and InterEntity then put Yes in the result input. How do I use multiple checkboxes to accomplish this? It works with one checkbox now, the "test" checkbox. I am not sure how to check for more than one checkbox.
<form id="form1" name="form1" method="post" action="add_test.asp">
<input type="checkbox" name="TransientDevice" id="TransientDevice" value="" />
<input type="checkbox" name="DynamicResponse" id="DynamicResponse" value="" />
<input type="checkbox" name="ControllingFrequency" id="ControllingFrequency" value="" />
<input type="checkbox" name="ControllingVoltage" id="ControllingVoltage" value="" />
<input type="checkbox" name="InterEntity" id="InterEntity" value="" />
<input type="checkbox" name="ReliabilityImpact" id="ReliabilityImpact" value="" />
<input type="checkbox" name="test" id="test" class="checkbox" value="" />
<input type="text" name="result" id="result" value="" />
<script type="text/javascript">
$(function(){
$('#test').change(function() {
$("#result").val(($(this).is(':checked')) ? "yes" : "");
});
});
</script>
</form>
I believe this is what you're asking for:
$('#TransientDevice, #ControllingFrequency, #InterEntity').change(function() {
$("#result").val(($('#TransientDevice').is(':checked') && $('#ControllingFrequency').is(':checked') && $('#InterEntity').is(':checked')) ? "yes" : "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post" action="add_test.asp">
<input type="checkbox" name="TransientDevice" id="TransientDevice" value="" />
<input type="checkbox" name="DynamicResponse" id="DynamicResponse" value="" />
<input type="checkbox" name="ControllingFrequency" id="ControllingFrequency" value="" />
<input type="checkbox" name="ControllingVoltage" id="ControllingVoltage" value="" />
<input type="checkbox" name="InterEntity" id="InterEntity" value="" />
<input type="checkbox" name="ReliabilityImpact" id="ReliabilityImpact" value="" />
<input type="checkbox" name="test" id="test" class="checkbox" value="" />
<input type="text" name="result" id="result" value="" />
</form>
I would like create registration form based on which country.
default address form is the default visible input
when customer click on the non-uk radio button then automatically hide uk form and oppen non-uk address form
I think I need to use javascript or JQuery for this function.
could any one give me an advice for this function.
if you think my question is not acceptable could you please don't decrease my rate.
I can remove my question if u don't like.
here is my form code
<form action="sent.php" name="form1" method="post">
Name
<input type="text" name="name" />
<br />UK
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />EU
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />Country
<input type="text" name="post_code" />
<br />
</form>
You can wrap all the input elements except the radiobuttons in two different divs so you can catch the change event for the radio buttons and show and hide two divs accordingly.
You can either add a class to represent which elements are UK address elements and which are EU or, as Élodie Petit, answered wrap them in a div and then either show or hide them depending on which radion button was selected.
Here is a JSFiddle using the latter option.
I don't think you need to show or hide the elements necessarily as the form elements seem to be the same on both 'forms', consider :
<form action="sent.php" name="form1" method="post">
Name <input type="text" name="name" /><br/>
UK <input type="radio" name="from" value="UK" > / EU <input type="radio" name="from" value="EU" ><br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</form>
And then when you request the "from" parameter, you'll know which country they're from?
I found simple solution for it with JQuery
With JQuery support
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Here is the javascript code
$(document).ready(function() {
$("input[name$='from']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#c" + test).show();
});
});
</script>
here is the html code suppurated with div
<form action="sent.php" name="form1" method="post">
<label>UK <input type="radio" name="from" value="1" ></label><br />
<label>EU <input type="radio" name="from" value="2" ></label><br />
<div id="c1" class="desc">
Name <input type="text" name="name" /> <br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</div>
<div id="c2" class="desc" style="display:none;">
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
Country <input type="text" name="post_code" /> <br />
</div>
</form>