Clear form using a checkbox - javascript

I am trying to use a checkbox to clear a form but I do not want the reset to clear the checkbox itself. The code I am using is as follows:
<input name="no_cage" id="no_cage" type="checkbox" value="1" onclick="this.form.reset();">
When I click on the checkbox it clears the form fine but unfortunately, also clear itself too.
The checkbox also updates a db with a 1 if checked or a 0 if unchecked. So I need it within the form and it needs to be able to toggle between checked and unchecked.

There are two ways to do this:
Create a javascript function to reset the form and then check the checkbox again to true.
Using JQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
if(this.checked) {
document.getElementById("client").reset();
this.checked = true;
}
});
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" value="1"> CLEAR
</form>
Using Javascript:
<script type="text/javascript">
function clearform(){
if (document.getElementById("no_cage").checked == true){
document.getElementById("client").reset();
document.getElementById("no_cage").checked = true;
}
}
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" onclick="javascript:clearform();"> CLEAR
</form>
OR,
keep the checkbox out of the form
<script type="text/javascript">
function clearform(){
document.getElementById("client").reset();
}
</script>
<form id="client">
<input type="text">
</form>
<input id="no_cage" type="checkbox" value="1" onclick="javascript:clearform();"> CLEAR

I don't know if you want it this way, but I change the code that if checkbox is checked than clear form else it won't. Here the code
<form id ="myForm" name = "test">
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
</form>
<input name="no_cage" id="no_cage" type="checkbox" onclick="resetForm()">
<script type="text/javascript">
function resetForm()
{
if (document.getElementById("no_cage").checked == true)
{
document.getElementById("myForm").reset();
}
}
</script>

<form id="myForm">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="checkbox" id="box"onclick="myFunction()" value="Reset form">reset
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
document.getElementById("box").checked = true;
}</script>
hope it helps

Related

JS setCustomValidity not work at first time

I want to make a custom validity message to my form, and there are some problem.
The validity message will show after click two times.
and if I don't input correct word "text" first time, then it will not submit anymore.
what's the problem in my code.
JS:
function a(){
jQuery("#text")[0].setCustomValidity("");
if (jQuery("#text").val() == "text"){
return confirm('sure?');
}
jQuery("#text")[0].setCustomValidity("Incorrect");
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/" method="post" onsubmit="return a();">
<input type='text' id="text"/>
<input type="submit" value="submit"/>
</form>
Please try to check below solution:
$(document).on('click',"#submit_btn", function()
{
if($("#text").val() === "text")
return confirm('sure?');
else
$("#text")[0].setCustomValidity("Incorrect");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/" method="post">
<input type='text' id="text"/>
<input type="submit" value="submit" id="submit_btn"/>
</form>

get data-attr from a form input checkbox using JS

If someone puts a checkmark, I want to get the data-price attribute. Nothing is appearing in the console.log. I tried using .prop('checked'), .data('checked'), and .attr('checked'). I am assuming something is wrong with the Syntax?
This articleGet data-price jquery code as below does not seem to work:
$(document).ready(function(){
if $('#pizzaOption').click(function() {
var price=$(this).data('price');
console.log(price);
});
<form action="" id="pizzaOption" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
Used this article to no success. https://medium.com/js-dojo/check-if-a-checkbox-is-checked-with-jquery-2843f97d4954 Code is below:
<script type= text/javascript>
$(document).ready(function() {
if ($('input[type=checkbox]').attr('checked') {
var price=$(this).data('price');
console.log(price);
}
}
</script>
You have lots of mistake in your code.
$(document).ready(function(){ {
if $('#pizzaOption').click(function() {
var price=$(this).data('price');
console.log(price);
});
You have { { in callback function of $(document).ready() and it is not closed with }); And you have if in your click event which results syntax error.
In your second code
<script type= text/javascript>
$(document).ready(function() {
if ($('input[type=checkbox]').attr('checked') {
var price=$(this).data('price');
console.log(price);
}
}
</script>
You have checked the attr('checked') but there is no event binded on it and will always result false because no checkbox is checked onload event and $(this).data('price'); is undefined because data-price on the parent element of the clicked checkbox.
And you have click event on '#pizzaOption' according to your question you need to bind the click event on checkbox here is an example:
$(document).ready(function(){
$('#pizzaOption>input[type="checkbox"]').click(function() {
var price=$(this).closest("#pizzaOption").data('price');
console.log(price);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="pizzaOption" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
Another example:
$(document).ready(function(){
$('#pizzaOption>input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
var price=$(this).closest("#pizzaOption").data('price');
console.log(price);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="pizzaOption" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
<form action="" id="pizzaOptions" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
<script>
// wait until document is ready
$(document).ready(function(){
// For every checkbox checked inside form
$('#pizzaOptions input[type="checkbox"]').click(function(){
// display value
console.log($(this).val())
// now if you want to get the price you should
console.log($('#pizzaOptions').attr('data-price'))
})
})

Enable the input form type based check box input using Javascript

I'm trying to Enable or Disable the input type based on the Check or Uncheck using the Java Script.
I'm using the following code..
<script language="JavaScript">
<!--
function enable_text(status)
{
status=!status;
document.f1.other_text.disabled = status;
}
//-->
</script>
<body onload="enable_text(false)";>
<form name="f1" method="post">
<input type="checkbox" onclick="enable_text(this.checked)" ><br>
Name
<input type="text" name="other_text">
</form>
</body>
But now my requirement is every input type will have corresponding Check box.
If I select one check box only corresponding input should activate.
Can anyone help for this requirement.
you can do like this
<script language="JavaScript">
<!--
function enable_text(status,inputName)
{
if(!inputName) {
var inputs = document.f1.getElementsByTagName('input');
for(var i in inputs) {
var input = inputs[i];
if(input.type == 'text')
input.disabled = true;
}
return;
}
status=!status;
document.f1[inputName].disabled = status;
}
//-->
</script>
<body onload="enable_text(false)";>
<form name="f1" method="post">
<input type="checkbox" onclick="enable_text(this.checked,'other_text')" ><br>
Name
<input type="text" name="other_text">
<input type="checkbox" onclick="enable_text(this.checked,'other_text1')" ><br>
Name
<input type="text" name="other_text1">
</form>
</body>

How to radio button change form action address

How to make radio button change the form action address
I got a form which have the following
and a radio button
<b>Would you like to to make payment ? <input type="radio" name="choice" value="yes">Yes <input type="radio" name="choice" value="no" checked>No</b>'
If user selection is no (default checked) the form action will still be register_page4.php
but if user selected yes and press the submit button:
<input id="btnSubmit" type="submit" value="Next" />
I would like the form action to be payment.php instead of register_page4.php, how do I achieve it.
I make the changes and this is what I type
<html>
<head>
</head>
<body>
<form name="form1" method="post" action="register_page4.php">
Would you like to make an appointment for collection ?
<input type="radio" name="collection" value="yes">Yes
<input type="radio" name="collection" value="no" checked>No
<input id="btnSubmit" type="submit" value="Next" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(document).ready(function($) {
var form = $('form[name="form1"]'),
radio = $('input[name="choice"]'),
choice = '';
radio.change(function(e) {
choice = this.value;
if (choice === 'yes') {
form.attr('action', 'payment.php');
} else {
form.attr('action', 'register_page4.php');
}
});
});
</script>
</body>
</html>
But the result is still going to register_page4.php even I click on the radio button with yes, I try click on both and both still go to register_page4.php
Here is an example using a javascript solution. Basically, when changing the radio button, the attribute of the form (here with id #yourForm) is altered with the correct action.
jQuery(document).ready(function($) {
var form = $('form[name="form1"]'),
radio = $('input[name="collection"]'),
choice = '';
radio.change(function(e) {
choice = this.value;
if (choice === 'yes') {
form.attr('action', 'payment.php');
} else {
form.attr('action', 'register_page4.php');
}
});
});
depending on whether you are using POST or GET method, it's either:
$nextPage = ($_POST['choice']=='yes') ? 'payment.php' : 'register_page4.php';
OR
$nextPage = ($_GET['choice']=='yes') ? 'payment.php' : 'register_page4.php';
then simply redirect to $nextPage
$("input[name=choice]").change(function(){
if ($("input[name=choice]").val() == 'yes'){
$("#formId").attr("action","payment.php");
}
else
{
$("#formId").attr("action","register_page4.php");
}
});
Disable Submit button if checked = No
Working JSFiddle DEMO
HTML
<form action="payment.php" method="POST">
<input name="choice" type="radio" id="choiceyes" value="yes" />Yes
<input name="choice" type="radio" id="choiceno" value="no" checked="checked" />No
<input id="btnSubmit" name="btnSubmit" type="submit" value="Next" /></form>
Script
$(function () {
var $join = $("input[name=btnSubmit]");
var processJoin = function (element) {
if(element.id == "choiceno") {
$join.attr("disabled", "disabled");
}
else {
$join.removeAttr("disabled")
}
};
$(":radio[name=choice]").click(function () {
processJoin(this);
}).filter(":checked").each(function () {
processJoin(this);
});
});
Add Document Ready
<script>
$(document).ready(function(){
$("input[name=choice]").change(function(){
if ($("input[name=choice]").val() == 'yes'){
$("#form1").attr("action","payment.php");
}
else
{
$("#form1").attr("action","register_page4.php");
}
});
});
</script>
If continue the issue try to remove the action:
Remove action from form.
<form name="form1" method="post" action="register_page4.php">
Correct
<form name="form1" method="post">
Use the following code:
<body>
<form name="form1" id="form1" method="post" action="register_page4.php">
Would you like to make an appointment for collection ?
<input type="radio" name="collection" value="yes" onChange="if(this.checked){document.getElementById('form1').action='payment.php'}">Yes
<input type="radio" name="collection" value="no" checked>No
<input type="submit">
</form>
</body>
Here is a demo

uncheck one checkbox as another is checked and submit the form

I am trying to combine two javascript functions into one function.
So, I have this chunk of code:
<form name="form1" action="testing_page2.php" method="GET">
<p><input id="Main" type="checkbox" name="Main" value="1" onClick="javascript:uncheckSecondary(this);" />Main</p>
<p><input id="Secondary" type="checkbox" name="Secondary" value="2" />Secondary</p>
</form>
<script language="javascript" type="text/javascript">
function uncheckSecondary(obj)
{
if (obj.checked == true)
{
document.getElementById("Secondary").checked = false;
}
}
</script>
Here, when the page loads, the Secondary checkbox will be checked (I have an if clause there, but it is not related to my question) , but Main is not checked.
As I check the Main checkbox, Secondary is unchecked.
And also I have another piece of code:
<script language="javascript">
function checkRefresh(value)
{
document.form1.submit();
}
</script>
<form name="form1" action="testing_page2.php" method="GET">
<p><input id="Main" type="checkbox" name="Main" value="1" onClick="this.form.submit();"/>Main</p>
<p><input id="Secondary" type="checkbox" name="Secondary" value="2" onClick="this.form.submit();"/>Secondary</p>
</form>
Here, as I check/uncheck any of checkboxes, the form is submitted.
Edited:
What I want is to combine function checkRefresh(value) and function uncheckSecondary(obj) , so that when I check Main, the Secondary is unchecked and form is submitted, and vice versa.
Try this piece of code...
<script>
function checkRefresh(value)
{
document.form1.submit();
}
function uncheck(check)
{
var prim = document.getElementById("Main");
var secn = document.getElementById("Secondary");
if (prim.checked == true && secn.checked == true)
{
if(check == 1)
{
secn.checked = false;
checkRefresh();
}
else if(check == 2)
{
prim.checked = false;
checkRefresh();
}
}
}
</script>
<form name="form1" action="#" method="POST">
<p><input id="Main" type="checkbox" name="Main" value="1" onClick="uncheck(1);"/>Main</p>
<p><input id="Secondary" type="checkbox" name="Secondary" value="2" onClick="uncheck(2)"/>Secondary</p>
</form>
It will submit the form only when the condition applies as you stated.
Welcome to Javascript.
<form name="form1" action="#" method="POST">
<p><input id="Main" type="checkbox" name="Main" value="1" onClick="if (this.checked) document.getElementById('Secondary').checked = false; this.form.submit();"/>Main</p>
<p><input id="Secondary" type="checkbox" name="Secondary" value="2" onClick=""/>Secondary</p>
</form>

Categories