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>
Related
I have 2 radio buttons. All of them have different values. I also have one text field, in case I need a different value, I can enter that value on that text field.
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="url" value="https://example.com/fee/25"> $25
<input type="radio" name="url" value="https://example.com/fee/50"> $50
<input type="submit" value="Submit">
</form>
and here is the Javascript I've found to make radio buttons working
<script type="text/javascript">
function doSubmit(form) {
var urls = form['url'];
var i = urls && urls.length;
while (i--) {
if (urls[i].checked) {
window.location = urls[i].value;
}
}
document.getElementById("amount").value;
return false;
}
</script>
I have one text field:
<input type="text" name="amount" size="10" id="amount" value="">
Ok. If the amount is entered, then I need to use this code:
document.getElementById("amount").value
But how to make it working with radio buttons? I have created this JS code:
<script type="text/javascript">
var link = "https://example.com/fee/";
var input= document.getElementById('amount');
input.onchange=input.onkeyup= function() {
link.search= encodeURIComponent(input.value);
};
</script>
What I'm doing wrong? Thanks in advance for your time. I love and enjoy learning from experts.
I would create a separate radio button for the text input:
var options = Array.from(document.querySelectorAll("[name=url]"));
amount.addEventListener('focus', function() {
options[0].checked = true; // If textbox gets focus, check that radio button
});
options[0].addEventListener('change', function() {
amount.focus(); // if first radio button gets checked, focus on textbox.
});
function doSubmit(form) {
// get checked value, replace empty value with input text
var value = options.find( option => option.checked ).value || amount.value;
window.location = "https://example.com/fee/" + value;
return false;
};
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="url" value="" checked>
$<input type="text" name="amount" size="5" id="amount" value="" >
<input type="radio" name="url" value="25"> $25
<input type="radio" name="url" value="50"> $50
<input type="submit" value="Submit">
</form>
Instead of using the url as the value for the radio buttons, consider using the value you wish to pass to the url:
function doSubmit(form) {
var endpoint = "https://example.com/fee/";
// gets the values of input elements that were selected
var checkedValues = Array.from(form.amounts)
.filter(radio => radio.checked)
.map(radio => radio.value);
// if a radio button was checked, use its value
// otherwise, use the value in the text field
var amount = checkedValues.length ?
checkedValues[0] : form.amount.value;
console.log('redirecting to: ', endpoint + amount);
return false;
}
// uncheck radio buttons when text is entered
function uncheck() {
Array.from(document.querySelectorAll('input[name="amounts"]'))
.forEach(radio => radio.checked = false);
}
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="amounts" value="25"> $25
<input type="radio" name="amounts" value="50"> $50
<input type="text" name="amount" onkeyup="uncheck()">
<input type="submit" value="Submit">
</form>
Edit: Wow I completely forgot you could use the :checked attribute as a css selector. In this case, the code becomes quite simple:
function doSubmit(form) {
// select checked inputs with the specified name attribute
var checkedRadio = document.querySelector('input[name="amounts"]:checked')
// if we have a radio button that is checked, use its value
// otherwise, use the text input's value
var amount = checkedRadio ? checkedRadio.value : form.amount.value;
window.location = 'https://example.com/fee/' + amount;
return false;
}
// uncheck radio buttons when text is entered
function uncheck() {
Array.from(document.querySelectorAll('input[name="amounts"]'))
.forEach(radio => radio.checked = false);
}
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="amounts" value="25"> $25
<input type="radio" name="amounts" value="50"> $50
<input type="text" name="amount" onkeyup="uncheck()">
<input type="submit" value="Submit">
</form>
I create the modern radio buttons with iCheck and there are four options. When user change radio button, I popup a confirm message "Are you sure?"
If confirm return false, I want to back the previous radio button, but now It don't back to the previous radio.
This is a part of code:
<form action="#" method="post">
<div style="padding-left:20px; line-height:2;">
<input type="radio" id="main-category1" name="main-category" value="1" > 1. <br>
<input type="radio" id="main-category2" name="main-category" value="2" > 2. <br>
<input type="radio" id="main-category3" name="main-category" value="3" > 3. <br>
<input type="radio" id="main-category4" name="main-category" value="4" > 4. <br>
<input type="radio" id="main-category5" name="main-category" value="5" > 5. <br>
</div>
</form>
<scirpt>
$('input').on('ifClicked', function(event){
msg = confirm('Are you sure?');
var cual= this;
if(msg == false) {
$('#main-category3').iCheck('check'); // It's check to new value and check to 3rd radio, but I want to check only 3rd radio.
}
});
</script>
<script>
$('input').on('click', function(event) {
msg = confirm('Are you sure?');
var cual = this;
if (msg == false) {
$('#main-category3').attr("checked",true);
// It's check to new value and check to 3rd radio, but I want to check only 3rd radio.
}
});
</script>
I created a plunk for your code and made a correction
http://plnkr.co/edit/gist:1986619?p=preview
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
I need to make a form, example:
<form id="myform" name="myform" method="get">
<input type="radio" checked="checked" name="Answer" value="yes" />Yes
<input type="radio" name="Answer" value="no" />No
<input id="submit" name="submit" src="images/submit.jpg" type="image" />
</form>
Questions:
1. How can I set a URL to the submit button (on click)?
2. How can i change this URL depending on when the user selects either the Yes or No answer?
Set the form action attribute to the YES URL
$('input:radio').on('click', function(){
if($(this).val() == "yes"){
$('#myform').attr('action', 'YES_URL');
}
else {
$('#myform').attr('action', 'NO_URL');
}
});
A submit button fires the event submit to a adress that is defined in the action attribute from form tag. So here comes one option:
<script type="text/javascript">
function mytarget ()
{
var myFormObject = document.myforma;
var chk = false;
for (i = 0; i < myFormObject.Answer.length; i++)
{
if (myFormObject.Answer[i].checked && myFormObject.Answer[i].value == 'yes')
{
myFormObject.action = "http://urltforthevalueYes.com";
chk = true;
break;
} else if (myFormObject.Answer[i].checked && myFormObject.Answer[i].value == 'no') {
myFormObject.action = "http://urltforthevalueNo.com";
chk = true;
break;
}
}
if (chk == true) {myFormObject.submit();} else {alert("Please select an option");}
}
</script>
Update:
I had to change my javascript code because there was two mistakes in there. Also added the new HTML code.
Changes you have to do:
add the action attribute to the open form tag <form id="myform" name="myform" method="get" action="">
Change the name of your submit button. The use of submit creates a conflict between your button and the javascript function <input id="send" name="send" src="images/submit.jpg" type="image" />
Add at you submit button the attribute onClick with the reference to the method mytarget() <input id="send" name="send" src="images/submit.jpg" type="image" onClick="mytarget()"/>
I usually work with PHP so sadly don't have some basic JS principles down. This is all I want to accomplish--I've seen many posts on this topic but they are usually beyond what I need.
Here is my form:
<input type="checkbox" name="checkbox" value="check" />
<input type="submit" name="email_submit" value="submit" onclick="----??----" />
The checkbox is a simple "I agree". I want the submit button to be pressed and it will only submit if that check box is selected.
Here's the thing: I want the simple, cheating way -- no methods -- just some inline code in that form (assuming its not overly long?). This is not a public page, I just need something quick and simple with that type of validation. If its unchecked, it will throw an alert(); if its checked it will submit via post through php and go on as normal.
You could use:
if(!this.form.checkbox.checked)
{
alert('You must agree to the terms first.');
return false;
}
(demo page).
<input type="checkbox" name="checkbox" value="check" />
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}" />
Returning false from an inline event handler will prevent the default action from taking place (in this case, submitting the form).
! is the Boolean NOT operator.
this is the submit button because it is the element the event handler is attached to.
.form is the form the submit button is in.
.checkbox is the control named "checkbox" in that form.
.checked is true if the checkbox is checked and false if the checkbox is unchecked.
For now no jquery or php needed. Use just "required" HTML5 input attrbute like here
<form>
<p>
<input class="form-control" type="text" name="email" />
<input type="submit" value="ok" class="btn btn-success" name="submit" />
<input type="hidden" name="action" value="0" />
</p>
<p><input type="checkbox" required name="terms">I have read and accept SOMETHING Terms and Conditions</p>
</form>
This will validate and prevent any submit before checkbox is opt in. Language independent solution because its generated by users web browser.
You can do something like this:
<form action="../" onsubmit="return checkCheckBoxes(this);">
<p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p>
<p><input type="SUBMIT" value="Submit!"></p>
</form>
<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
if (
theForm.MyCheckbox.checked == false)
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
} else {
return true;
}
}
//-->
</script>
http://lab.artlung.com/validate-checkbox/
Although less legible imho, this can be done without a separate function definition like this:
<form action="../" onsubmit="if (this.MyCheckbox.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }">
<p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p>
<p><input type="SUBMIT" value="Submit!"></p>
</form>
You can do the following:
<form action="/" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('please agree'); return false; }">
<input type="checkbox" name="checkbox" value="check" id="agree" />
<input type="submit" name="email_submit" value="submit" />
</form>
Here is a working demo - http://jsfiddle.net/Ccr2x/
If your checkbox has an ID of 'checkbox':
if(document.getElementById('checkbox').checked == true){ // code here }
HTH
var confirm=document.getElementById("confirm").value;
if((confirm.checked==false)
{
alert("plz check the checkbox field");
document.getElementbyId("confirm").focus();
return false;
}
If the check box's ID "Delete" then for the "onclick" event of the submit button the javascript function can be as follows:
html:
<input type="checkbox" name="Delete" value="Delete" id="Delete"></td>
<input type="button" value="Delete" name="delBtn" id="delBtn" onclick="deleteData()">
script:
<script type="text/Javascript">
function deleteData() {
if(!document.getElementById('Delete').checked){
alert('Checkbox not checked');
return false;
}
</script>
Another simple way is to create a function and check if the checkbox(es) are checked or not, and disable a button that way using jQuery.
HTML:
<input type="checkbox" id="myCheckbox" />
<input type="submit" id="myButton" />
JavaScript:
var alterDisabledState = function () {
var isMyCheckboxChecked = $('#myCheckbox').is(':checked');
if (isMyCheckboxChecked) {
$('myButton').removeAttr("disabled");
}
else {
$('myButton').attr("disabled", "disabled");
}
}
Now you have a button that is disabled until they select the checkbox, and now you have a better user experience. I would make sure that you still do the server side validation though.
Another Simple way is to create & invoke the function validate() when the form loads & when submit button is clicked.
By using checked property we check whether the checkbox is selected or not.
cbox[0] has an index 0 which is used to access the first value (i.e Male) with name="gender"
You can do the following:
function validate() {
var cbox = document.forms["myForm"]["gender"];
if (
cbox[0].checked == false &&
cbox[1].checked == false &&
cbox[2].checked == false
) {
alert("Please Select Gender");
return false;
} else {
alert("Successfully Submited");
return true;
}
}
<form onload="return validate()" name="myForm">
<input type="checkbox" name="gender" value="male"> Male
<input type="checkbox" name="gender" value="female"> Female
<input type="checkbox" name="gender" value="other"> Other <br>
<input type="submit" name="submit" value="Submit" onclick="validate()">
</form>
Demo: CodePen
Target it by id and then use this code:
function check(){
if(document.getElementById('yourid').checked
{
return false;
}
else
{
alert ("checkbox not checked");
return false;
}
}
var testCheckbox = document.getElementById("checkbox");
if (!testCheckbox.checked) {
alert("Error Message!!");
}
else {
alert("Success Message!!");
}
Guys you can do this kind of validation very easily. Just you have to track the id or name of the checkboxes. you can do it statically or dynamically.
For statically you can use hard coded id of the checkboxes and for dynamically you can use the name of the field as an array and create a loop.
Please check the below link. You will get my point very easily.
http://expertsdiscussion.com/checkbox-validation-using-javascript-t29.html
Thanks