uncheck one checkbox as another is checked and submit the form - javascript

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>

Related

How to check if textbox is entered to allow user to select radio button javascript

I want to make sure user inputs text in the text field before being able to select the radio button. If the gateway field is blank, do alert the user that they haven't inputted anything in the field and return.
This is what I have so far:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="gatewayInput">
<form>
<input type="text" name="gateway" placeholder="Gateway Name"><br><br>
</form>
</div>
<div class="box1">
<form method="post" action="javascript:alert('Success')" onsubmit="validate()">
<label class="col">Air/Ground</label>
<span class="col">
<input type="radio" name="option" id="r1" value="1" />
<label for="r1">Air</label>
<input type="radio" name="option" id="r2" value="2" />
<label for="r2">Ground</label>
</span>
<span class="col">
<input type="submit" class="button"/>
</span>
</form>
</div>
<script src ="../../../jqueryDir/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function validate() {
if ((document.getElementsByName("gateway")[0].value == '')) {
alert('Response required');
return false;
}
else {
alert('Sucess');
return true;
}
}
console.log("this is my value:" + document.getElementsByName("gateway")[0].value);
$(".button").click(function(event){
if ( validate() == true ) {
event.preventDefault();
$.ajax({
url:"testexec.php",
type: "POST",
data: {option: $('input[type=radio]:checked').val()},
dataType: "text",
success:function(result){
$('#div1').html(result)
}
});
}
});
</script>
<div id="div1"></div>
</body>
I dont think this part is working, it doesnt seem to be calling my validate function:
<form method="post" action="javascript:alert('Success')" onsubmit="validate()">
Also i am checking onsubmit, is there a way to alert the user before this? Like right when they click the radio button, alert them with the message?
And validate(e) { to the function declaration and e.preventDefault(); to the beginning of the function to prevent the form from submitting before running your code.
function validate(e) {
e.preventDefault();
if ((document.getElementsByName("gateway")[0].value == '')) {
alert('Response required');
return false;
} else {
alert('Sucess');
return true;
}
}
onsubmit="validate()" is duplicated with $(".button").click(function(event).
You can merge them together:
$(".button").click(function(event){
validate();
event.preventDefault();
...
Since you have event.preventDefault(), no need action or onsubmit on form.
<form method="post">

Need to display an alert when hitting submit via radio choices

edit: I don't think the similar question mentinoed in the comments can help :(. Unless I'm just really bad at this... I can get a simple alert message to come up but can't get the alert for the the individual radio button to show.
I'm just doing a simple form with radio buttons with Javascript to give an alert after hitting submit when one of the choices is chosen. I'm brand new to Javascript so I'm not sure what else I can do...
The HTML works but the function inside of it doesn't at all. I'm lost on what else to do. Any advice would be really appreciated.
<!DOCTYPE html>
<html>
<head>
<title> Gender Check </title>
<meta charset ="UTF-8">
</head>
<body>
<form id= "form" name ="form" onsubmite="gender()">
<label>Male
<input type="radio" id="male" name="male"/>
</label>
<label>Female
<input type="radio" id="female" name="female"/>
</label>
<label>Trans
<input type="radio" id="trans" name="trans"/>
</label>
<label>Alien
<input type="radio" id="alien" name="alien"/>
</label>
<label>Boeing AH-64 Apache Attack Helicopter
<input type="radio" id="helicopter" name="helicopter"/>
</label>
<input type="submit" name="submit" value="Don't lie to me."/>
</form>
<script type="text/javascript">
function gender() {
var male=document.form[0].element[0];
var female=document.form[0].element[1];
var trans=document.form[0].element[2];
var alien=document.form[0].element[3];
var helicopter=document.form[0].element[4];
if (document.getElementById('male').checked == true)
{
alert("You are a Male.")
}
else if (document.getElementById('female').checked == true)
{
alert("You are a Feale.")
}
else if (document.getElementById('trans').checked == true)
{
alert("You are Trans.")
}
else if (document.getElementById('alien').checked == true)
{
alert("You are an...uh...Alien?")
}
else if (document.getElementById('helicopter').checked == true)
{
alert("You are definitely not a four-blade, twin-turboshaft attack helicopter with a tailwheel-type landing gear arrangement and a tandem cockpit for a two-man crew.")
}
else
{
alert("Please pick a choice")
}
}
document.forms[0].onsubmit = gender;
</script>
</body>
</html>
The errors were :
You used document.form[0].element[1] instead of document.form[1]
You wrote onsubmite instead of onsubmit
All your radio input had the same name attribute thus you were able to select multiple choices. You should use the same name for each radio button of the same group
You can reduce male.checked == true with male.checked alone
function gender() {
var male = document.form[0];
var female = document.form[1];
var trans = document.form[2];
var alien = document.form[3];
var helicopter = document.form[4];
if (male.checked) {
alert("You are a Male.")
} else if (female.checked) {
alert("You are a Female.")
} else if (trans.checked) {
alert("You are Trans.")
} else if (alien.checked) {
alert("You are an...uh...Alien?")
} else if (helicopter.checked) {
alert("You are definitely not a four-blade, twin-turboshaft attack helicopter with a tailwheel-type landing gear arrangement and a tandem cockpit for a two-man crew.")
} else {
alert("Please pick a choice")
}
}
<!DOCTYPE html>
<html>
<head>
<title>Gender Check</title>
<meta charset="UTF-8">
</head>
<body>
<form id="form" name="form" onsubmit="gender()">
<label>Male
<input type="radio" id="male" name="choice" />
</label>
<label>Female
<input type="radio" id="female" name="choice" />
</label>
<label>Trans
<input type="radio" id="trans" name="choice" />
</label>
<label>Alien
<input type="radio" id="alien" name="choice" />
</label>
<label>Boeing AH-64 Apache Attack Helicopter
<input type="radio" id="helicopter" name="choice" />
</label>
<input type="submit" name="submit" value="Don't lie to me." />
</form>
</body>
</html>
NOTE
Instead of document.form[0]; (first element of the form) you can use document.form.choice[0] which will look for the list of radio and select the first one [0]
<form id= "form" name ="form" onsubmit="gender()">
You need to associate an event known as onsubmit which will call gender() function when form is submitted.
You can prevent the submission by returning false via function and for that you will need to do something like this
onsubmit="return gender()"
If you want to submit form, change the button type to button and associate an event as onclick='gender()' and keep rest of the code unchanged.

Clear form using a checkbox

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

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

Delete Confirmation

I have a set of records which are displayed in tabular format in a form. On each record there is a delete checkbox - here is the form in simplified format:
<form method="post" action="" id="update-history-form">
Item 1 <input type="checkbox" value="1" name="History[0][delete]">
Item 2 <input type="checkbox" value="1" name="History[1][delete]">
Item 3 <input type="checkbox" value="1" name="History[2][delete]">
<input type="submit" value="Update History" name="update">
</form>
The integer value in the input 'name' attribute helps identify which records have been selected for deletion.
What I want is for a JavaScript alert confirmation to appear if any of the delete checkboxes have been ticked (upon submit).
$('#update-history-form').submit(function(){
if ( $(this).find('input:checkbox:checked').length ){
return confirm( "Really delete any of them?" );
}
});
This will cancel the form submission of the user does not OK the confirmation dialog.
If you have non-delete checkboxes in your form you may need to modify the selector to only those inputs whose name contains "delete", e.g.
$(this).find( 'input[name*="delete"]:checked' )
Using jQuery:
$('#update-history-form').submit(function(ev) {
ev.preventDefault();
if (this.find("input:checkbox:checked").length == 0 || confirm("Are you sure?")) this.submit();
});
<form method="post" action="" id="update-history-form" onsubmit='return confirmChecks(this);'>
Item 1 <input type="checkbox" value="1" name="History[0][delete]">
Item 2 <input type="checkbox" value="1" name="History[1][delete]">
Item 3 <input type="checkbox" value="1" name="History[2][delete]">
<input type="submit" value="Update History" name="update">
</form>
<script type='text/javascript'>
function confirmChecks(someForm) {
var inputList = someForm.getElementsByTagName('input');
var aCheckboxIsChecked = false;
for (var i=0; i < inputList.length; i++) {
if (inputList[i].type.toLowerCase() == 'checkbox' && inputList[i].checked) {
aCheckboxIsChecked = true;
break;
}
}
if (aCheckboxIsChecked) {
var proceed = confirm('Really delete those things?');
if (!proceed) {
return false;
}
}
return true;
}
</script>

Categories