My question is, how to determine if user press to 'yes' or 'no'
Here is a html
<form id="delFrm" method="post">
<label>Do you want delete?</label>
<input type="submit" name="yes" id="yes" value="yes" />
<input type="submit" name="no" id="no" value="no" />
</form>
and here is jquery/js
<script type="text/javascript">
$(document).ready(function() {
$('#delFrm').submit(function(){
var yes = true;//how to define it??????
if(yes) {
//sent ajax to delete the data
} else {
//close close the form on a fancybox
}
return false;
});
});
</script>
Thank you
Change slightly your markup: since the 'no' button doesn't need to perform an ajax call you could simply write
<form id="delFrm" method="post">
<label>Do you want delete?</label>
<input type="submit" name="yes" id="yes" value="yes" />
<button type="button" id="no">No</button>
</form>
and your js code could be simplified as
<script type="text/javascript">
$(document).ready(function() {
$('#delFrm').submit(function(evt){
evt.preventDefault();
//sent ajax to delete the data
});
});
</script>
then create another handler for the 'no' button (which closes your fancybox)
Try this if you have to call execute some statements to close the ajax form:
<form id="delFrm" method="post">
<label>Do you want delete?</label>
<input type="submit" name="yes" id="yes" value="yes" />
<input type="button" name="no" id="no" value="no" />
</form>
And
<script type="text/javascript">
$(document).ready(function() {
$('#delFrm').submit(function(){
//sent ajax to delete the data
return false;
});
$('#no').click(function(){
//close close the form on a fancybox
return false;
});
});
</script>
Hope it helps :)
you dont need to change your html just do the following
<script type="text/javascript">
$(document).ready(function() {
var answer = "";
$('input[type=submit]').click(function(e) {
e.preventDefault();
answer = $(this).attr('name');
if(asnwer == 'yes') {
// sent ajax to delete the data
} else {
// close close the form on a fancybox
}
return false;
});
});
</script>
It is simple like this..
Related
I propose you my following problem: I would like to make sure that the textbox (which appears and disappears according to the radioButton choice) is used to receive a data that will be used to perform a mkdir ...
Let me explain better the case that the value of the txtBox is "Hello" when I press the button (submit) must automatically create a folder (via mkdir) and must redirect to the address contained in the function javascript controll () ..
I want to understand if it is possible to have everything on the same page and not having to create other pages for PHP
this is one of my attempts .. but it does not work :(
<html>
<body>
<fieldset>
<strong>Did you want to insert another ?</strong>
<form action="test()" method="POST" name="prova" onsubmit="return controlla();">
YES<input type="radio" name="scelta" value="yes" />
<input type="text" id="myInput" style="display: none;"><br>
NO<input type="radio" name="scelta" value="no" /><br />
<button type="submit">Submit</button>
</form>
</fieldset>
<script language="javascript">
function controlla() {
console.log("oie");
x = document.prova;
if (x.scelta.value == "yes") {
window.location.href = '../affidatario.php?idCantiere=<?php echo $idCantiere?>'
return false;
}
if (x.scelta.value == "no") {
alert("NO");
window.location.href = '../inserimentoCantiere.php'
return false;
}
}
document.querySelectorAll('input[name="scelta"').forEach(function(a) {
a.addEventListener("change", function() {
let textBox = document.getElementById("myInput");
if (textBox) textBox.style.display = this.value === "yes" ? "block" : "none";
})
});
</script>
<?php
function test(){
$var = $_POST["myInput"];
if(mkdir("prova/".$date."_".$var.'/Mezzi di Trasporto'))
{
echo "DirectoryCreated";
}
echo "<script type='text/javascript'>alert('$var');</script>";
}
?>
</body>
</html>
Maybe by doing redirection directly in PHP ?
Be careful, my solution (untested) uses header, you have to be sure there is no data sent to client before !
<html>
<body>
<fieldset>
<strong>Did you want to insert another ?</strong>
<form action="#" method="POST" name="prova">
YES<input type="radio" name="scelta" value="yes" />
<input type="text" id="myInput" style="display: none;"><br>
NO<input type="radio" name="scelta" value="no" /><br />
<button type="submit">Submit</button>
</form>
</fieldset>
<script language="javascript">
document.querySelectorAll('input[name="scelta"').forEach(function(a) {
a.addEventListener("change", function() {
let textBox = document.getElementById("myInput");
if (textBox) textBox.style.display = this.value === "yes" ? "block" : "none";
})
});
</script>
<?php
function test(){
$var = $_POST["myInput"];
if(mkdir("prova/".$date."_".$var.'/Mezzi di Trasporto'))
{
//Header redirection
header('Location: ../affidatario.php?idCantiere='+ $idCantiere);
} else {
header('Location: ../inserimentoCantiere.php');
}
//Call the function if there is an input :
if(isset($_POST["myInput"])){
test();
}
?>
</body>
</html>
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 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 have situation where i need to track which submit button click in order to do set variables according to that. Below is the test code,
<script>
function submitForm(form) {
alert(document.getElementById('sb').value);
if (document.getElementById('sb').value=="One") {
//Do something
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);">
<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">
</form>
The alert always shows One even if i click button Two or Three. But the url change with clickable parameter. How to alert the value which is in the clickable submit button?
Note: I want a solution with out JQuery
EDIT: I change the code bit which the onsubmit call the submitForm(this);
The problem is even use document.forms[0].sb.value its undefined because document.forms[0].sb return a node list of all submit buttons as its same as with document.getElementById('sb')
Here is what I think is a simpler solution to this problem. It does not require any extra events.
<script>
function submitForm(form) {
console.log(document.activeElement.value);
if (document.activeElement.value == 'One') {
console.log("Have one.");
return false;
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);">
<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">
</form>
jsfiddle
What I would like an answer to is how the form is getting the query set to "?sb={value}".
I would suggest you to use buttons, instead of multiple submit buttons. In the onclick attribute of the buttons, submit the form using javascript.
You can try like this,
<form>
<input class="myButton" type="submit" name="sb" value="One">
<input class="myButton" type="submit" name="sb" value="Two">
<input class="myButton" type="submit" name="sb" value="Three">
</form>
<script type="text/javascript">
$(".myButton").on('click', function() {
alert($(this).val());
});
</script>
I'm a bit new to javascript; please forgive me if I'm wrong on this. Wouldn't it make a difference if your if statement had a 3rd = sign?
Should it be:
if (document.getElementById('sb').value === "One") {
//Do something
}
return true;
Continuing the answer above:
<script>
function m(value) {
alert(value);
}
</script>
<input type="button" value="One" onClick="m(this.value)">
<input type="button" value="Two" onClick="m(this.value)">
<input type="button" value="Three" onClick="m(this.value)">
You can of course see what's the id:
<input type="button" id='myId' value="Three" onClick="m(this.id)">
you can try with jquery something like :
$(":submit").live('click', function() {
alert($(this).val());
})
This is a non-jquery, simple solution for detecting which submit button was clicked.
<script>
function submitForm(form) {
console.log(document.getElementById('btn_clicked').value);
if (document.getElementById('btn_clicked').value === 'One') {
console.log("Have one.");
return false;
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);" ;">
<input type="hidden" name="btn_clicked" id="btn_clicked" value="">
<input type="submit" name="sb" value="One" onclick="document.getElementById('btn_clicked').value='One';">
<input type="submit" name="sb" value="Two" onclick="document.getElementById('btn_clicked').value='Two';">
</form>
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