Develop Reference

PHP radiobutton on click event change

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>

Iframe loading parent page on js function call

I am trying to get an iframe to run js on my site
the iframe page is as follows (some php omitted for relevance):
<?php
function createModeratorFormPart($moderator_email = null, $modNumber = 5){
echo "<script src=\"frontend.js\"></script>"; //implement adding moderators dynamically and such
echo "<fieldset id=\"moderator\">";
echo "<button onClick=\"addModerator()\">Add a moderator</button>";
if($moderator_email == null){ //if we have no moderators set
echo "<div>";
echo "<input class=\"addCommunityInput\" type=\"email\" name=\"moderator[$i]\" placeholder=\"Moderator Email\">";
echo "<button onClick=\"dropModerator(this)\">-</button>";
echo "</div>";
}else{
for($i = 0; $i < count($moderator_email); $i++){
echo "<div>";
echo "<input class=\"addCommunityInput\" type=\"email\" name=\"moderator_email[$i]\" placeholder=\"Moderator Email\" value=\"" . $moderator_email[$i] . "/>";
echo "<button onClick=\"dropModerator(this)\">-</button>";
echo "</div>";
}
}
echo "</fieldset>";
}
?>
<html>
<head>
<link rel="stylesheet" href="/web/addOfferingStyles.css" type="text/css" />
<script src="/web/frontend.js"></script>
</head>
<body>
<?php if(isset($_GET['success'])){
echo '<p>Offering successfully created</p>';
}else{
echo "<p>$retCode</p>";
}
?>
<h1 id="addCompOff">New Community Period</h1>
<form method="post" id="addCommunityForm" action="<?php echo 'https://theprepapp.com'. $_SERVER['PHP_SELF'];?>">
<input type="hidden" name="formSubmit" value="1"></input>
<input class="addCommunityInput" type="text" name="name" placeholder="Offering Name" />
<input class="addCommunityInput" type="text" name="description" placeholder="Description" />
<input class="addCommunityInput" type="text" name="location" placeholder="Location & Time Information" />
<input class="addCommunityInput" type="number" name="peopleLimit" placeholder="Student Capacity" />
<input class="addCommunityInput" type="text" name="moderator" placeholder="Moderator Names(s)" />
<?php createModeratorFormPart(); ?>
</fieldset>
<div>
<p>Days Offered:</p>
<div class="control-group">
<label class="control control-checkbox">
Monday
<input name="monday" type="checkbox"/>
<div class="control_indicator"></div>
</label>
<label class="control control-checkbox">
Tuesday
<input name="tuesday" type="checkbox"/>
<div class="control_indicator"></div>
</label>
<label class="control control-checkbox">
Wednesday
<input name="wednesday" type="checkbox" />
<div class="control_indicator"></div>
</label>
<label class="control control-checkbox">
Thursday
<input name="Thursday" type="checkbox" />
<div class="control_indicator"></div>
</label>
<label class="control control-checkbox">
Friday
<input name="Friday" type="checkbox" />
<div class="control_indicator"></div>
</label>
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>
I am trying to run this function:
function addModerator(){
var fieldset = document.getElementById("moderator");
//create encompassing div so that deletion of the moderator can be deleted easily
var div = document.createElement("div");
div.setAttribute("className", "moderator");
//create label
var label = document.createElement("Label");
label.appendChild(document.createTextNode("Moderator"));
div.appendChild(label);
//create text field
var input = document.createElement("Input");
input.setAttribute("placeholder","Moderator Email");
input.setAttribute("type","email");
div.appendChild(input);
//create the delete button
var button = document.createElement("button");
button.setAttribute("value","-");
button.setAttribute("onClick", "dropModerator(this)");
div.appendChild(button);
//add the div to the fieldset
fieldset.appendChild(div);
}
When I run this through the onClick event, the console does not show any JS errors: however, the iframe document becomes the document of the parent page (even though the iframe src attribute is not changed)
(linked to here, though I can't imagine how it would be relevant: https://github.com/articDrag0n/PrepApp/blob/master/web/teacher/teacher.php) How is this happening?

The problem was the form submission
Everytime I clicked on a button , the form would submit (and due to the form handling code, would go to the parent page);
solution was to add this line button.setAttribute("type", "button");
or, if your doing it in html <button type="button">
Ended up being a clone of this one:Can I make a <button> not submit a form?

how to display form values in popup box according to their respective Id's

I have a problem in showing posted values in pop up box. When I click on book now it is showing only one id values for all.
Ex: if I click on 1st row on book now it is showing 1st row values, but if I click the 2nd row on book now it is showing 1st row values only.
<span>Book now</a> <!--<div class="disp"><p>-->
<div id="light" 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>

This is how id works, you need have unique id for each div. Anticipating that you have a loop in place, you can add a counter or a incremental id while creating a div, something like below:
<div id="light_<?php echo $id;?>" class="white_content"><label>Email:</label><?=$vehicle->Email; ?> </p><p><label>Mobile:</label><?=$vehicle->Mobile; ?></p>

Echoing/outputting information that was added to an input field on the same page

I'm creating a checkout system. I have three parts to it:
Shipping info
Payment info
Order confirmation
I'm trying to figure out a way that when the customer enters their shipping information, that data can be echo'd out onto my order confirmation part, so they can confirm that is where they want it shipped to.
The way I designed my checkout system is that all three parts are on the same page. Only one part shows at once and the others are hidden until the customer would click 'Proceed to xxxx'. When they click that Proceed button, nothing is being sent. It is just taking the div and showing it and hiding the previous div. Nothing is sent until when the customer clicks Submit order on the confirmation div.
I validate the fields and assigned them to variables so I can post the shipping and product info into my db.
if($validation->passed()) {
if(isset($_POST['create'])){
$fullname = trim( $_POST['customer_name'] );
$streetline1 = trim( $_POST['streetline1'] );
$streetline2 = trim( $_POST['streetline2'] );
$city = trim( $_POST['city'] );
$state = trim( $_POST['state'] );
$zipcode = trim( $_POST['zipcode'] );
$phone_number = trim( $_POST['phone_number'] );
$email = ( $_POST['email'] );
//etc...
Shipping Information Section:
<div class="shippinginfocontainer">
<span class="summarytitle">
<p>Enter Shipping Information</p>
</span><br>
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center">
<input type="text" class="biginputbarinline" name="fullname" value="<?php echo escape(Input::get('firstname')); ?>" required>
</div>
</div>
<div class="field">
<label class="paddingleft" for="streetline1">Street Line 1</label>
<div class="center">
<input type="text" class="biginputbarinline" name="streetline1" value="<?php echo escape($user->data()->streetline1); ?>" required>
</div>
</div>
<div class="field">
<label class="paddingleft" for="streetline2">Street Line 2</label>
<div class="center">
<input type="text" class="biginputbarinline" name="streetline2" value="<?php echo escape($user->data()->streetline2); ?>">
</div>
</div>
<div class="field">
<label class="paddingleft" for="city">City</label>
<div class="center">
<input type="text" class="biginputbarinline" name="city" value="<?php echo escape($user->data()->city); ?>" required>
</div>
</div>
</div>
<div class="formleftcenter">
<div class="field">
<label for="state">State</label>
<input type="text" class="mediuminputbar" name="state" value="<?php echo escape($user->data()->state); ?>" required>
</div>
<div class="field">
<label for="Phone Number">Phone Number</label>
<input type="text" class="mediuminputbar" name="Phone Number" value="<?php echo escape($user->data()->phone_number); ?>">
</div>
</div>
<div class="formrightcenter">
<div class="field">
<label for="zipcode">Zip Code</label>
<input type="text" class="mediuminputbar" name="zipcode" value="<?php echo escape($user->data()->zipcode); ?>" required>
</div>
<div class="field">
<label for="email">Email</label>
<input type="text" class="mediuminputbar" name="email" value="<?php echo escape($user->data()->email); ?>" required>
</div>
</div>
<div class="clear">
<button class="checkoutbutton" id="button2">Proceed to Payment Information</button>
</div>
</div>
I won't add my payment part as it is irrelevant to this question.
Then this is the relevant part of the Confirmation part. I wasn't sure how to do this, so I just wrote in echo's to show what I am trying to do.
<div class="confirmshippinginfo">
<p>Shipping to:</p>
<p><?php echo $fullname; ?></p>
<p><?php echo $streetline1; ?></p>
<p><?php echo $streetline2; ?></p>
<p><?php echo $city . $state . $zipcode; ?></p>
</div>
</div>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<input class="widebutton" type="submit" value="Place Your Order">
Is there a way to do this with keeping this all on the same page? I really do not want to have multiple pages for this and I like the way I have all of this formatted. I just can't figure out this part.

You could possibly use AJAX via serialize() of your form when you click a review button (as Matthew Johnson suggested). Second idea is something like this where you copy from one input to another, in a different part of your page. It would take a bit more work to set up than something like AJAX because you are basically duplicating a form. Using .html() inside a div or span placeholder would probably work too:
HTML:
<input type="text" class="copy-from" data-copy="name" name="name" />
<input type="text" class="this-elem" id="name" disabled />
CSS
.this-elem {
border: none;
font-size: 18px;
color: #333;
}
jQuery
$(document).ready(function() {
$(".copy-from").keyup(function() {
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
});
});
Demo
http://jsfiddle.net/fh5kfhtm/4/
EDIT: AJAX/PHP Solution
<!-- This is the placeholder for the data after submission -->
<div id="final"></div>
<!-- FORM, well really simplified form -->
<form id="orderform" method="post" action="process.php">
<input type="hidden" name="order_form" />
<input type="text" name="address" />
<!--
This triggers the ajax (you would use your
"Proceed to Order Confirmation" button)
-->
<div id="confirm">CONFIRM</div>
<input type="submit" name="submit" value="ORDER" />
</form>
new.php
File name/path must match what's in the AJAX url
<?php
if(isset($_POST['order_form'])) {
print_r($_POST);
exit;
}?>
jQuery AJAX
<!-- GET THE LIBRARIES (YOU SHOULD ALREADY HAVE THEM) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script>
$(document).ready(function() {
$("#confirm").click(function() {
$.ajax({
// This is where you need the right path to the new php file
url:'/path/to/new.php',
type: 'post',
data: $("#orderform").serialize(),
success: function(response) {
$("#final").html(response);
}
});
});
});
</script>

Clear textboxes Script not working

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"/>