I have created the following code.
for some reason its skips my if event when the radiobutton changes.
the if statment is whitin a FORM i dont think this matters?
<p><?php echo $rijden[$lan][0];?></p><input type="radio" name="JA" id="waarde1" value="waarde1" onClick="gestuurdjanee();"><b>Ja</b> <input type="radio" name="JA" value="waarde0" id="waarde0" onClick="gestuurdjanee();" ><b>Nee</b></br>
<?php
function gestuurdjanee() {
if(document.getElementById("waarde0").checked == true) {
//nee?>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen"/></p>
<p><?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing"/></p>
<?php
}elseif(document.getElementById("waarde1").checked == true) {
//ja?>
<p><?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig"/></p>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="onstype"/></p>
<p><?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas"/></p>
<?php
}
else {
// niksingevuld
?>
<?php echo"Vink een van de optie's aan"?>
<?php
}
}
Combining JS and PHP like that won't work. As been commented, the PHP will only run once on the server. When it's done, it shows the result in the browser. Then the Javascript will run.
Instead create three divisions with different classes.
Then bind an event on changing the input.
Also see the comments in my code:
$(function() {
$('.div1, .div2').hide(); // hide div1 and div2 on page load
$('[name=JA]').on('change', function() { // bind an onchange function to the inputs
if( $('[name=JA]:checked').val() == 'waarde1' ) { // get the value that is checked
$('.div1').show(); // show div1
$('.div2, .div3').hide(); // hide other divs
}
else {
$('.div2').show(); // show div2
$('.div1, .div3').hide(); // hide other divs
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<?php echo $rijden[$lan][0];?>
</p><input type="radio" name="JA" id="waarde1" value="waarde1"><b>Ja</b>
<input type="radio" name="JA" value="waarde0" id="waarde0"><b>Nee</b></br>
<div class="div1">
DIV1
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen" /></p>
<p>
<?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing" /></p>
</div>
<div class="div2">
DIV2
<p>
<?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig" /></p>
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="onstype" /></p>
<p>
<?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas" /></p>
</div>
<div class="div3">Vink een van de optie's aan</div>
Related
I want to be able to get the inputs that a user enters in my HTML form and be able to print them later on my website. I would love to be able to print all the user info with the selections they have made to there pizzas. I have been trying for the last few hours to do this and no luck :( Looking to get the date, first name, last name, address and phone.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Daves Pizza</title>
<link href="new.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="pizza.js"></script>
</head>
<body>
<div align="center">
<h5>Today is: <span id="dtfield"></span></h5>
</div>
<br>
<div align="center">
<h1>Dave's Pizza Place</h1>
</div>
<div align="center">
<div class="user">
<form id="contact_form" action="mailto: david.genge#edu.sait.ca" name="userInfo" method="POST" enctype="text">
<br>
<div>
<label for="datetime">Date:</label>
<input type="date" name="user_date" />
</div>
<div>
<label for="firstname">Firstname:</label>
<input type="text" pattern="[A-Za-z-']+" name="firstname" value="Firstname" maxlength="20"/>
</div>
<div>
<label for="lastname">Lastname:</label>
<input type="text" pattern="[A-Za-z-']+" name="lastname" placeholder="Lastname" maxlength="20"/>
</div>
<div>
<label for="mail">Address:</label>
<input type="text" name="user_mail" placeholder="Full Address"/>
</div>
<div>
<label for="tel">Phone#:</label>
<input type="tel" pattern="[0-9]+"" name="user_phone" placeholder="(403)123-1234"/>
</div>
</form>
</div>
</div>
<div align="center">
<div class="pizza">
<form name="costEstimation">
<table border="0">
<tr valign="middle">
<td>
<br>
<b>Choose Your Pizza Type<b><br>
<input type="radio" name="pizzasize" value="8" checked>Small $8<br>
<input type="radio" name="pizzasize" value="10">Medium $10<br>
<input type="radio" name="pizzasize" value="15">Large $15<br>
<input type="radio" name="pizzasize" value="18">Extra Large $18<br></td>
<td></td>
</tr>
<tr>
<td>
<b>Specialities<b><br>
<input type="radio" name="special" value="3">Super Cheesy $3<br>
<input type="radio" name="special" value="5">Extra Meaty $5<br>
<input type="radio" name="special" value="2">Really Veggie $2<br></td>
<td>
<b>Extra Toppings </b>
<br>
<input type="checkbox" name="cheese" value="1.5">Extra Cheese $1.50<br>
<input type="checkbox" name="pepperoni" value="1.5">Pepperoni $1.50<br>
<input type="checkbox" name="mushrooms" value="1.5">Mushrooms $1.50<br>
<input type="checkbox" name="bacon" value="1.5">Bacon $1.50<br>
<input type="checkbox" name="olives" value="1.5">Olives $1.50<br>
</td>
</tr>
</table>
</form>
<h2>Pizza Cost: </h2><h2><span id="result"></span></h2>
<input type=button value="Price Your Pizza" onClick="pizza(); return false;">
<button type="submit">Send your message</button>
<br><br><br>
<table>
<tr>
<td>
<figure>
<center>
<img src="cheese.jpg" alt="cheese" height="100" width="100">
</center>
</figure>
</td>
<td>
<figure>
<center>
<img src="veg.jpg" alt="veg" height="100" width="100">
</center>
</figure>
</td>
<td>
<figure>
<center>
<img src="meat.jpg" alt="meat" height="100" width="100">
</center>
</figure>
</td>
</tr>
</table>
</div>
<br>
<br>
<br>
</div>
</body>
</html>
You need to use form for saving the input values entered by user. you can do it by either GET or POST method. here is the sample demo with Validation:
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
// check if URL address syntax is valid (this regular expression also allows dashes in the URL)
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&##\/%?=~_|!:,.;]*[-a-z0-9+&##\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field.</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name" value="<?php echo $name;?>">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email" value="<?php echo $email;?>">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website" value="<?php echo $website;?>">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
<br><br>
Gender:
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
you need to use any server side language to get input from user.
Use this statement
<form method="GET or POST" action="file_location/file_name(on which you want to get input)">
Php is very simple language you can learn it easly
i am giving you an example:
index.html
<form method="GET" action="localhost://getdata.php">
<input type="text" name="UserName" />
<input type="button" value="Submit" />
</form>
Focus on name tag i used in input statement "UserName" your data will be send by binding user input in it and then you can display data using php with this name as showing below
getdata.php
<?php
echo "$_GET['UserName']";
?>
if you want to get the data using javascript then,
HTML:
<input type="text" name="name" id="uniqueID" value="value" />
<span id="output"></span>
JS:
var nameValue = document.getElementById("uniqueID").value;
document.getElementById("output").innerHTML=nameValue;
will work for you !
This is my code. Here Iam closing the popupbox using 'x'. But I want it to be closed by clicking on any radio button.
HTML:
<span>Book now <!--<div class="disp"><p>-->
<div id="light_<?php echo $vid;?>" class="white_content">
<label>Email:</label>
<?=$vehicle->Email; ?>
</p><p>
<label>Mobile:</label>
<?=$vehicle->Mobile; ?></p>
<p>
<form id="form_<?php echo $vid;?>" name="form1" method="post" action="">
<?php //echo $_REQUEST['email'];?>
<p>
<input type="hidden" name="vehicleid" value="<?php echo $vid;?>" id="vehicleid" />
<label>
<input type="radio" name="RadioGroup1_<?php echo $vid;?> " value="1" id="bstatus<?php echo $vid;?>" onClick="idForm(<?php echo $vid;?>)" />
Conform
</label>
<br />
<label>
<input type="radio" name="RadioGroup1<?php echo $vid;?>" value="0" id="bstatus1<?php echo $vid;?>" onClick="idForm(<?php echo $vid;?>)" />
Not Conform
</label>
<br />
</p>
</form>
<b>X</b>
</div>
<div id="fade" class="black_overlay"></div>
</div></span>
JS:
function idForm(str) {
var light = 'light_' + str;
var fade = 'fade' + str;
document.getElementById(light).style.display = 'none';
document.getElementById(fade).style.display = 'none';
var confirmval = 'bstatus' + str;
var unconfirmval = 'bstatus1' + str;
if (document.getElementById(confirmval).checked) {
var selectvalue = document.getElementById(confirmval).value;
}
It seems that the the body of the document doesn't see the javascript functions when im ca. I tried different ways: applying a function on the element from the head (form.addEventListener("submit", submitEvent)); and onsubmit but none of them works. Could you help me to solve the problem, please?
<html>
<head>
<Title>Adminostrative interface</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function getInput(cssSelector){
var input= ducument.querySelector(cssSelector);
return input;
}
function submitEventAddTour(event){
var count=true;
var inp_nonD= getInput(".nonDigits");
var inp_D= getInput(".digits");
if((inp_nonD.value=="")|| (!isNaN(name.value)){
count=false;
}
if((inp_D.value=="") || (isNaN(name.value)){
count=false;
}
if(count==false){
event.preventDefault();
alert ("Incorrect input! Check each of the gaps");
}
}
var form=getInput("formNewTour");
form.addEventListener("submit", submitEvent);
</script>
</head>
<body>
<h3>Hello, <?php echo $_SESSION['name']; ?></h3>
<h3>Add new tour</h3>
<form method="POST" action="" class="formNewTour" >
<p><label>Country:</label>
<input type="text" name="country" class="nonDigits"
value= "<?php if(isset($error_country)){echo $_POST["country"];}?>"/>
</p>
<?php if (isset($error_country)){ echo $error_country;
} ?>
<p><label>Tour name:</label>
<input type="text" name="tourName" class="nonDigits"
value="<?php if(isset($error_tourName)){echo $_POST["tourName"];}?>"/>
</p>
<?php if (isset($error_tourName)){ echo $error_tourName;
} ?>
<p><label>Tour path:</label>
<input type="text" name="path" class="nonDigits"
value="<?php if(isset($error_path)){echo $_POST["path"];}?>"/>
</p>
<?php if (isset($error_path)){ echo $error_path;
} ?>
<p><label>Amount of days:</label>
<input type="text" name="days" class="digits" value= "<?php if(isset($error_days)){echo $_POST["days"];}?>"/>
</p>
<?php if (isset($error_days)){ echo $error_days;
} ?>
<p><label>Hotel:</label>
<input type="text" name="hotel" class="nonDigits"
value="<?php if(isset($error_hotel)){echo $_POST["hotel"];}?>"/>
</p>
<?php if (isset($error_hotel)){ echo $error_hotel;
} ?>
<p><label>Hotel price(single room):</label>
<input type="text" name="priceSingleRoom" class="digits"
value="<?php if(isset($error_priceSingleRoom)){echo $_POST["priceSingleRoom"];}?>"/>
</p>
<?php if (isset($error_priceSingleRoom)){ echo $error_priceSingleRoom;
} ?>
<p><label>Hotel price(double room):</label>
<input type="text" name="priceDoubleRoom" class="digits"
value="<?php if(isset($error_priceDoubleRoom)){echo $_POST["priceDoubleRoom"];}?>"/>
</p>
<?php if (isset($error_priceDoubleRoom)){ echo $error_priceDoubleRoom;
} ?>
<p><label>Breakfast price:</label>
<input type="text" name="priceBreakfast" class="digits"
value="<?php if(isset($error_priceBreakfast)){echo $_POST["priceBreakfast"];}?>"/>
</p>
<?php if (isset($error_priceBreakfast)){ echo $error_priceBreakfast;
} ?>
<p><label>Lunch price:</label>
<input type="text" name="priceLunch" class="digits"
value="<?php if(isset($error_priceLunch)){echo $_POST["priceLunch"];}?>"/>
</p>
<?php if (isset($error_priceLunch)){ echo $error_priceLunch;
} ?>
<p><label>Dinner price:</label>
<input type="text" name="priceDinner" class="digits"
value="<?php if(isset($error_priceDinner)){echo $_POST["priceDinner"];}?>"/>
</p>
<?php if (isset($error_priceDinner)){ echo $error_priceDinner;
} ?>
<p><label>Total tour price: </label>
<input type="text" name="totalTourPrice" class="digits"
value="<?php if(isset($error_totalTourPrice)){echo $_POST["totalTourPrice"];}?>"/>
</p>
<?php if (isset($error_totalTourPrice)){ echo $error_totalTourPrice;
} ?>
<input type="submit" value="Add new tour" name="submitNewTour"/>
</p>
</form>
<form method="POST" action="" class="formNewDate">
<p>Add new date: Tour name: <input type="text" name="newDateTour"
value="<?php if(isset($error_newDateTour)){echo $_POST["newDateTour"];}?>"/>
Date: <input type="text" name="newDate"
value="<?php if(isset($error_newDate)){echo $_POST["newDate"];}?>">
Amount of places:<input type="text" name="places"
value="<?php if(isset($error_newPlaces)){echo $_POST["places"];}?>"/></p>
<p><input type="submit" value="Add new date" name="addDate"/></p>
<p><?php if (isset($error_newDateTour)){ echo $error_newDateTour;
} ?></p>
<p><?php if (isset($error_newDate)){ echo $error_newDate;
} ?></p>
</p><?php if (isset($error_newPlaces)){ echo $error_newPlaces;
} ?></p>
</form>
I have this form and this Script but the Script doesn't work. I used it like a month ago and it worked, but it doesn't work now.
<form method="post">
<input type="hidden" name="depName" value="<?php echo $_GET['var'];?>">
<input type="hidden" name="personStat" value="Espera">
<div class="input1">FirstName :<input type="text" name="fname" class="in1" value="<?php echo $nombre;?>"> <span class="error1">* <?php echo $nombreErr;?></span> </div>
<div class="input2">LastName :<input type="text" name="lname" class="in2" value="<?php echo $apellido;?>"> <span class="error2">* <?php echo $apellidoErr;?></span> </div>
<div class="input3">2LastName :<input type="text" name="Slname" class="in3" value="<?php echo $segundoAppellido; ?>"> <span class="error1"><?php echo $segundoAppellidoErr; ?></span> </div>
<div class="input4">Student Id :<input type="text" name="studentId" class="in4" value="<?php echo $idEstudiante;?>"> <span class="error2"><?php echo $idEstudianteErr; ?></span> </div>
<input class="buttonClr" type="button" value="Clear">
</form>
Script
<script> //Funtion that works on buttonClr click
$(".buttonClr").live('click',function(){
$(this).parents('form').find('input[type="text"]').val(''); //Clear all textboxes
$('Select').val(''); //Clear the multiple select
});
</script>
I would guess that you have updated your jquery to version 1.7 or above, so live() no longer works. Here's the explanation from jQuery documentation
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Change your script as below
<script> //Funtion that works on buttonClr click
$(".buttonClr").on('click',function(){
$(this).parents('form').find('input[type="text"]').val(''); //Clear all textboxes
$('Select').val(''); //Clear the multiple select
});
</script>
Working demo: http://jsfiddle.net/16nu4aom/
Try this script, for clearing the input fields:
$(".buttonClr").bind('click',function(){
$(this).parents('form').find('input[type="text"]').val(''); //Clear all textboxes
$('Select').val(''); //Clear the multiple select
});
I suggest you to use reset button instead of JS. Example:
<form method="post">
<input type="hidden" name="depName" value="<?php echo $_GET['var'];?>">
<input type="hidden" name="personStat" value="Espera">
<div class="input1">FirstName :<input type="text" name="fname" class="in1" value="<?php echo $nombre;?>"> <span class="error1">* <?php echo $nombreErr;?></span> </div>
<div class="input2">LastName :<input type="text" name="lname" class="in2" value="<?php echo $apellido;?>"> <span class="error2">* <?php echo $apellidoErr;?></span> </div>
<div class="input3">2LastName :<input type="text" name="Slname" class="in3" value="<?php echo $segundoAppellido; ?>"> <span class="error1"><?php echo $segundoAppellidoErr; ?></span> </div>
<div class="input4">Student Id :<input type="text" name="studentId" class="in4" value="<?php echo $idEstudiante;?>"> <span class="error2"><?php echo $idEstudianteErr; ?></span> </div>
<input class="buttonClr" type="reset" value="Clear">
<!---^^^^^^^-->
</form>
If just want to reset all form fields, you just need to add reset button. That is the simplest way for 1 click resetting button.
<input type="reset" value="Reset"/>
the hidden div will appear if the selected value from the form matches the value of the div
the script for detecting the value of the input field
<script> $(document).ready(function() {
$("input[name$='sel']").ready(function() {
var test = $(this).val();
$("div.desc").hide();
$("#sel" + test).show();
}); });
</script>
value of the field and the divs that are supposed to show when the value of the input field is correct
<table><tr><td> <strong><font size="3" >Payment Method</font></strong>
<p> <?php echo $_POST["sel"]; ?> <input type="radio" name="sel" value="<?php echo $_POST["sel"]; ?>" /> </p> <!====================================================================================> </td><td> <img src="img/sep.png" /> </td><td> <!====================================================================================> <div id="selCreditCard" class="desc"> <table><tr><td>
<p> <label for="card"><strong>Card Number : </font></strong></label><?php echo $_POST["card"]; ?>
<input name="card" type="hidden" id="card" value="<?php echo $_POST["card"]; ?>" style="width:85px;"
class="validate[custom[card]] text-input" /> </p> <br>
<label for="ccv" ><strong>CVV2 Code : </strong></label><?php echo $_POST["ccv"]; ?>
<input type="hidden" name="ccv" id="ccv" style="width:30px;margin-bottom:2px;margin-left:12px;" value="<?
php echo $_POST["ccv"]; ?>" />
<br>
<label><strong>Expiration Date</strong>
<p> <label for="mon"><strong>Month : </strong></label><?php echo $_POST["mon"]; ?>
<input type="hidden" name="mon" id="mon" style="width:15px;" value="<?php echo $_POST["mon"]; ?>" />
<label for="yir" ><strong>Year : </strong></label><?php echo $_POST["yir"]; ?>
<input type="hidden" name="yir" id="yir" style="width:15px;" value="<?php echo $_POST["yir"]; ?>" />
</p>
</div> <!====================================================================================> <div id="selPaypal" class="desc" style="display: none;margin-left:20px;margin-top:1px;margin-bottom:1px;"> Please make sure that you have paid the amount on the Paypal payment page.<br> If not click here to proceed <img src="img/ppal.png" height="36" style="margin-bottom:-13px;" onclick="window.open
('paypal/paypal.html','Paypal','width=450,height=300,left=160,top=170');" style="cursor:pointer;"/> </div> <!====================================================================================> <div id="selWireTransfer" class="desc" style="display: none;margin-left:20px;margin-top:0px;margin-bottom:-5px;"> <font size="0.5"> <strong>Processing Time</strong><br> A bank wire is not an instant transfer. "Two to three business days" are<br> required to process the transfer and
allow the recipient to see the wired funds.</font> </div> <!====================================================================================> </td></tr></table>
i cant get the divs to show on the next page even if the correct value was entered on the field what approach will be much efficient or do you think will work for this code?
You should have used click event on input.
<script>
$(document).ready(function() {
var test = $("input[name='sel']").val();
$("div.desc").hide();
$("#sel" + test).show();
});
</script>