I need some help.
I have two form input and one checkbox, like this :
When the user insert Address (Id Card) and Check the checkbox below, then Address(domicile) should be filled with the value same as address(id_card), form input in address (domicile) auto input same as in form input address (id card).
How to fix it?
Thank you
Tyr using checkbox onclick event.
function copyAddress(e) {
const checkboxValue = document.getElementById('copy-address').checked;
if(checkboxValue) {
document.getElementById('contact-address').value = document.getElementById('primary-address').value;
document.getElementById('contact-address').disabled = true;
} else {
document.getElementById('contact-address').disabled = false;
}
}
<h1>Address Details</h1>
<input type="text" id="primary-address" placeholder="Primary Address">
<label for="primary-address"> Primary Address</label><br>
<input type="checkbox" id="copy-address" name="copy" onclick="copyAddress(this)">
<label for="copy-address"> Copy address</label><br>
<input type="text" id="contact-address" placeholder="Contact Address">
<label for="contact-address"> Contact Address</label><br>
I'd handle clicks on the checkbox. In the handler, I'd copy a value from one field to the other if it's checked and clear the 2nd address if it isn't.
"use strict";
function byId(id){return document.getElementById(id);}
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
byId('addrsAreSameCb').addEventListener('click', onAddrsAreSameCbClicked, false);
}
function onAddrsAreSameCbClicked(evt)
{
if (this.checked == true)
{
byId('addr2').value = byId('addr1').value;
}
else
{
byId('addr2').value = '';
}
}
<input id='addr1'/><br>
<label><input type='checkbox' id='addrsAreSameCb'/>Addr 2 is same as Addr1</label></br>
<input id='addr2'/>
Related
This might be a fairly easy problem. I have found similar posts on this however, i tried them and it's not working for me. I have a checkbox and onclick of that checkbox i want to fill the remaining boxes with same value. I tried it using two different ways. This one just fills out one input box only.
function autoFunction() {
if (document.getElementById("checkbox").checked) {
var disk = document.getElementById("value").value;
document.getElementById("used").value = disk;
}
else {
document.getElementById("used").value = "";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div align="left">Input Value <input type="text" size="5" id="value" >
<input type="checkbox" id="checkbox" name="checkbox" onchange="autoFunction()"/> Use Default Value</div>
<br>
<div>
<div><input type="text" class="used" id = "used" name= "used" value=""></div>
</div>
<div>
<div><input type="text" class="used" id = "used" name= "used" value=""></div>
</div>
<div>
<div><input type="text" class="used" id = "used" name= "used" value=""></div>
</div>
<div>
<div><input type="text" class="used" id = "used" name= "used" value=""></div>
</div>
I tried it with jQuery also. However, it won't display anything.
jQuery(document).on("change", ".checkbox", function() {
if(this.checked) {
alert("checked ");
//get the values of the filled fields
var value = jQuery(".value").val();
jQuery(".used").val(value);
}
else{
jQuery('.used').val('');
}
});
Any help is appreciated. Thank you.
I just replaced if (this.checked) with if (jQuery('.checkbox').is(':checked')) and it worked.
jQuery(document).on("change", ".checkbox", function() {
if (jQuery('.checkbox').is(':checked')) {
//get the values of the filled fields
var disksheettcsn = jQuery(".disksheettcsn").val();
// then add those values to your billing infor window feilds
jQuery(".used").val(disksheettcsn);
// then form will be automatically filled ..
}
else{
jQuery('.used').val('');
}
});
You need to change the Jquery selector to "#" instead of "." for value and Checkbox control. this link explain you the the difference
jQuery(document).on("change", "#checkbox", function() {
if(this.checked) {
alert("checked ");
//get the values of the filled fields
var value = jQuery("#value").val();
jQuery(".used").val(value);
}
else{
jQuery('.used').val('');
}
});
I am trying to set a value in a text box based on whether the checkbox is checked or not
The function is attached to onclick of the checkbox
This simple thing is not working :(
<div>
MyCheckbox
<input type="checkbox" id="Check1" name="FirstCkName"
onclick="testCheckbox(Check1,TextBx1)" />
</div><br>
<div>
CheckBx Text Box
<input id="TextBx1" name="CheckBxName" type="text" />
</div><br>
<script>
function testCheckbox(oCheckbox,oTxtbox)
{
if (oCheckbox.checked == true)
{
document.getElementById("oTxtbox").value=1;
}
else
{
document.getElementById("oTxtbox").value="";
}
}
</script>
Link to JSfiddle https://jsfiddle.net/JS_learner/2750639m/30/
Do something like.
var checkBox = document.getElementById("Check1");
checkBox.addEventListener("click", function(e) {
if (e.target.checked) {
document.getElementById("TextBx1").value = 1;
} else {
document.getElementById("TextBx1").value = "";
}
});
<div>
MyCheckbox
<input type="checkbox" id="Check1" name="FirstCkName" />
</div><br>
<div>
CheckBx Text Box
<input id="TextBx1" name="CheckBxName" type="text" />
</div>
The problem is this line:
onclick="testCheckbox(Check1,TextBx1)"
Here you're inventing your own parameters. That won't Work. The 'click' event is a predefined Mousevent, which will give an 'event' argument.
The 'event.target' will be the element you clicked.
This is how you should define this eventhandler:
onclick="testCheckbox"
Now you can write your script like this:
function testCheckbox(event)
{
if (event.target.checked == true)
{
document.getElementById("oTxtbox").value=1;
}
else
{
document.getElementById("oTxtbox").value="";
}
}
I'm Javascript beginner, writing JS function to validate a radio button group and a checkbox group; if either of them are completely unchecked, respective alert(s) show and stop the form submitting.
I copied code for radio button group validation, then adjusted it by adding a 2nd 'splitter' function which takes radio and checkbox names as 2 arguments, then sends both names in sequence to the 'validate' function.
This works, but is there more compact way to do this in one function, JS version of select case or something?
<script>
function splitter(mainst, Cst) {
validate(mainst);
validate(Cst);
}
//'unchecked' counts number of unchecked boxes or buttons
//then compares this to total number in the group, and if same
//this means nothing is checked, therefore show alert and return false.
function validate(grpname) {
var unchecked = 0, selectgroup=document.getElementsByName(grpname)
for(i=0;i<selectgroup.length;i++) {
if(selectgroup.item(i).checked == false) {
unchecked++;
}
}
if(unchecked == selectgroup.length) {
if (grpname == 'mainstreet') {
alert("Please select a main street");
return false;
}
else {
alert("Please select your C street(s)");
return false;
}
} else {
return true;
}
}
</script>
Example form here:
<form action="" method="post" onsubmit="return splitter('mainstreet', 'Cstreet')">
Street:
<input type="radio" name="mainstreet" value="jones"> jones street
<input type="radio" name="mainstreet" value="bones"> bones street
<input type="radio" name="mainstreet" value="drones"> drones street
<input type="radio" name="mainstreet" value="foobar"> foobar street
<br /><br />
Side street:
<input type="checkbox" name="Cstreet" value="barfoo"> barfoo street
<input type="checkbox" name="Cstreet" value="candoo"> candoo street
<input type="checkbox" name="Cstreet" value="cantdo"> cantdo street
<input type="checkbox" name="Cstreet" value="canoe"> canoe street
<input type="checkbox" name="Cstreet" value="wahoo"> wahoo street
<input type="submit" value="Submit" />
</form>
<script>
function splitter(mainst, Cst) {
if(document.querySelector('input[name="'+mainst+'"]:checked') == null ){
alert("Please select a main street");
return false;
}
else if (document.querySelector('input[name="'+Cst+'"]:checked') == null) {
alert("Please select your C street(s)");
return false;
}
}
</script>
I am trying to create a form which will (a) prompt user to fill in the missing fields and (b) prompt user to check at least one checkbox. But somehow the prompt textbox.setCustomValidity('Choose at least one.'); is always overwritten by e.target.setCustomValidity("Fill in the missing field");.
And there is one more problem in Chromium. It looks like I have to click Submit button twice to be able to submit...
//Function that checks if any input text field is empty and prompts user
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Fill in the missing field");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
});
//Functions which checks if at least one checkbox is checked and prompts user to check at least one
function chooseKrozek() {
if (document.querySelectorAll('input[name="krozek"]:checked').length > 0){
document.querySelector("#krozki-checkbox-placeholder").value = document.querySelector('input[name="krozek"]:checked').value;
}
else {
document.querySelector("#krozki-checkbox-placeholder").value = "";
}
}
function promptIzberiKrozek(textbox) {
if (textbox.value == ''){
textbox.setCustomValidity('Choose at least one.');
}
else {
textbox.setCustomValidity('');
}
}
<form target="_blank">
name:<br>
<input class="vnos" type="text" name="ime" value="" required><br>
surname:<br>
<input class="vnos" type="text" name="priimek" value="" required>
<br><br>
checkboxes:<br>
<!-- placeholder to be able to display the prompt on invalid value -->
<input id="krozki-checkbox-placeholder" type="text" value="" oninvalid="promptIzberiKrozek()" required style="width:5px;height:5px;opacity:0;position:absolute;"/>
<!-- On checkbox click function chooseKrozek() is called -->
<input type="checkbox" name="krozek" onClick="chooseKrozek()" value="linux-c-arm">LINUX/C/ARM™
<input type="checkbox" name="krozek" onClick="chooseKrozek()" value="linux-desktop">LINUX/DESKTOP™
<input type="checkbox" name="krozek" onClick="chooseKrozek()" value="linux-office">LINUX/OFFICE™
<br><br>
<input type="submit" value="Submit">
</form>
I am trying to make javascript check if a specific Radio button is checked among the other radio buttons.
The validation method for checking if any radio button works perfectly:
This is a snippet the HTML code containing the radio buttons:
<form id = "buy" name = "buy" onsubmit = "return valiform()">
<input type="radio" name="Card_type" value="visa" > Visa </input>
<input type="radio" name="Card_type" value="mastercard" > Mastercard</input>
<input type="radio" name="Card_type" value="paypal" > Paypal </input>
<input type="submit" value="Confirm order">
</form>
This is the snippet of the Javascript code regarding the radio buttons:
<script type = "text/javascript">
function valiform(){
var visa = document.buy.Card_type;
var mastercard = document.buy.Card_type;
var paypal = document.buy.Card_type;
var message = "Error!\n";
function validateRadio (radios)
{
for (i = 0; i < radios.length; ++ i)
{
if (radios [i].checked) return true;
}
return false;
}
if(validateRadio (document.buy.Card_type))
{
}
else
{
message+= "Please select card.\n";
}
if(message != "Error!\n"){
alert(message);
return false;
}
}
</script>
So far the code works perfectly, but I want the code to check if specifically the Paypal radio button is selected. I cannot do it without inducing an error. Any ideas how to do it?
First change the paypal line to:
<label><input id="paypalRadio" type="radio" name="Card_type" value="paypal"> Paypal </label>
This use this code which will return true if a given radio button is checked:
document.getElementById('paypalRadio').checked
or you could do this without changing anything:
$("td[name=Card_type]")[2].prop("checked", true)
Instead of returning just true, you could have validateRadio() return the value of the checked button. Then you can assign this to a variable.
var selected = validateRadio(document.buy.Card_type);
if (selected == 'paypal') {
...
}
<input type="radio" name="Card_type" value="visa" > Visa </input> is invalid html; <input> is an empty element , where content is not permitted. You can use .addEventListener(), submit event attached to <form> element, .querySelectorAll(), Array.prototype.some(), check the element at index 2 from result of .querySelectorAll() to determine if input element having value equal to "paypal" is checked
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form id="buy" name="buy">
<input type="radio" name="Card_type" value="visa" />
<input type="radio" name="Card_type" value="mastercard" />
<input type="radio" name="Card_type" value="paypal" />
<input type="submit" value="Confirm order">
</form>
<script type="text/javascript">
function valiform(event) {
event.preventDefault();
var radios = this.querySelectorAll("input[type=radio]")
var message = "Error!\n";
function validateRadio(radios) {
return Array.prototype.some.call(radios, function(input) {
return input.checked
})
}
if (validateRadio(radios)) {
if (radios[2].checked) {
alert(radios[2].value + " radio is checked")
}
event.target.submit();
} else {
message += "Please select card.\n";
}
if (message != "Error!\n") {
alert(message);
return false;
}
}
document.getElementById("buy").addEventListener("submit", valiform)
</script>
</body>
</html>