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>
Related
I'm trying to set a radio button to be checked (or NOT checked) based on the results of a PHP variable. I want this to be done when the page is loaded so that it requires zero interaction from a user. The problem I'm having is I cannot seem to get a radio button to the checked status.
Below is some extra info
the radio button has 2 pieces. member & non-member. Based on what the user selected when they registered, my PHP variable will contain either Member or non-Member. this the data I want to use to determine which 1 of my radio buttons should be checked when the page is loaded. (AKA is variable = Member, member radio button checked = true. etc.)
Note: I have tested the PHP variable and it is holding the proper data.
Here is my html form's code:
<form name="registration" action="accountSF.php" method="post">
<div id="leftSideForm"> <!-- Left side of the Registration Form -->
Are you a member of an attending clubs? <br />
<input type="radio" name="clubMember" id="member" value="Member" onload="return isClubMember();" onMouseDown="this._chckd = this.checked" onclick="if (this._chckd) this.checked = false; return validateClubInfo();" />Club Member
<input type="radio" name="clubMember" id="nonMember" value="Non-Member" onload="return isClubMember();" onMouseDown="this._chckd = this.checked" onclick="if (this._chckd) this.checked = false; return validateClubInfo();"/>Non Member<br /> <br />
<button type="submit" onclick="" style="width:100px;" >Save Changes</button>
</div> <!-- end of Left sideform -->
</form>
Here is my JavaScript function (contained below the form):
<script type="text/javascript">
function isClubMember()
{
var IsMember = "<?php echo $U_Club_Member; ?>";
if(IsMember == "Member")
{
document.getElementById("member").checked = true;
document.getElementById("nonMember").checked = false;
return true;
}
else if(IsMember == "Non-Member")
{
document.getElementById("member").checked = false;
document.getElementById("nonMember").checked = true;
return true;
}
else
{
return false;
}
}
Any help in this matter would be greatly appreciated.
If you can pass the PHP variables into the form's view, the code can be simplified. Instead of:
<input type="radio" name="clubMember" id="member" value="Member" onload="return isClubMember();" onMouseDown="this._chckd = this.checked" onclick="if (this._chckd) this.checked = false; return validateClubInfo();" />Club Member
... plus a ton of Javascript, just do something like:
<input type="radio" name="clubMember" id="member" value="Member" <?= $U_Club_Member == "Member" ? 'checked' : '' ?> ... /> Club Member
You should also look at simplifying your Js. Having a bunch of onclick/onMouseDown events directly in the HTML isn't very easily readable or editable!
Instead, if you're using jQuery, you can use the events:
$('#member').on('click', function() { ... });
$('#member').on('mousedown', function() { ... });
You can do the automatic checking and non cheking of checkboxes using php
<input type = "checkbox" <?php if($isMember == 'Member') { echo "checked; "} ?>>
Just add attribute checked in the input
You may want to refer here
Remove return from your onloads, and from the ifs in your code (you don't have to, but they aren't necessary):
<form name="registration" action="accountSF.php" method="post">
<div id="leftSideForm"> <!-- Left side of the Registration Form -->
Are you a member of an attending clubs? <br />
<input type="radio" name="clubMember" id="member" value="Member" onload="isClubMember();" onMouseDown="this._chckd = this.checked" onclick="if (this._chckd) this.checked = false; return validateClubInfo();" />Club Member
<input type="radio" name="clubMember" id="nonMember" value="Non-Member" onload="isClubMember();" onMouseDown="this._chckd = this.checked" onclick="if (this._chckd) this.checked = false; return validateClubInfo();"/>Non Member<br /> <br />
<button type="submit" onclick="" style="width:100px;" >Save Changes</button>
</div> <!-- end of Left sideform -->
</form>
would be your new html.
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 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>
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..