Develop Reference

Submitting multiple HTML forms with one button (JQuery/Ajax)

I've seen many of the other questions that involve this concept, however many of them suggest just using JQuery, which I tried multiple ways with no success.. I've never used Ajax, and this seems to be the best way to go about this, can anyone help me out with how to implement this? (Ajax or JQuery or however..) Below is the code of the two forms I'm using; following it will be general Javascript idea I was trying to implement, however, I did try many variations of it. I tried using timeouts, and functions such as preventDefault(); and stopPropagation(); all with no luck..
<div container="row-fluid">
<!-- This button appears if there are any items in stock within this warehouse -->
<div class="span2" style="<?php if($row_pending['Wh'.$row_pending['DefaultWh'].'Net'] > 0){}else{echo "display:none;";}?>">
<form method="post" name="ATCForm" id="ATCForm1">
<input id="qtywh1" type="hidden" name="qty" value="">
<input type="hidden" name="wh" value="<?php echo $row_pending['DefaultWh'];?>">
<input type="hidden" name="ot" value="ship">
<input type="hidden" name="net" value="<?php echo $row_pending['Wh'.$row_pending['DefaultWh'].'Net']; ?>">
<button class="btn btn-primary btn-ac" name="ATC" id="ATC1" type="submit" onclick="submitBoth()" value="ATC">Add to Cart</button>
</form>
</div>
<!-- This button appears if there are ZERO items in stock within this warehouse -->
<div class="span2" style="<?php if($row_pending['Wh'.$row_pending['DefaultWh'].'Net'] <= 0){}else{echo "display:none;";}?>">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="ATCForm" id="ATCForm1b">
<input id="qtywh1b" type="hidden" name="qty" value="0">
<input type="hidden" name="wh" value="<?php echo $row_pending['DefaultWh'];?>">
<input type="hidden" name="ot" value="backorder">
<input type="hidden" name="net" value="<?php echo $row_pending['Wh'.$row_pending['DefaultWh'].'Net']; ?>">
<button class="btn btn-primary btn-bo" name="ATC" id="ATC1b" type="submit" value="ATC">Add to Backorder</button>
</form>
</div>
</div><!-- row-fluid -->
Basic Javascript Logic:
<script>
$(document).ready(function{
function submitBoth(){
document.getElementById('ATCForm1').submut();
document.getElementById('ATCForm1b').submit();
}
});
</script>

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>

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>

Magento create custom career form and call from CMS page

How to create custom form and call from it career cms page? Currently I am creating a cms career page and a file in core template and calling it with
{{block type="core/template" name="careerform" template="careerform/career_form.phtml"}}
this is calling fine and my career_form is
<form action="<?php echo $this->getUrl('contacts/index/post'); ?>" id="contactForm" method="post" name="contact_form">
<div class="fieldset">
<h2 class="legend"><?php echo Mage::helper('contacts')->__('Contact Information') ?></h2>
<ul class="form-list">
<li class="fields">
<div class="field">
<label for="name" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Name') ?></label>
<div class="input-box">
<input name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo $this->htmlEscape($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" />
</div>
</div>
<div class="field">
<label for="telephone"><?php echo Mage::helper('contacts')->__('Phone') ?></label>
<div class="input-box">
<input name="telephone" id="telephone" title="<?php echo Mage::helper('contacts')->__('Phone') ?>" value="" class="input-text" type="text" />
</div>
</div>
<div class="field">
<label for="email" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Email') ?></label>
<div class="input-box">
<input name="email" id="email" title="<?php echo Mage::helper('contacts')->__('Email') ?>" value="<?php echo $this->htmlEscape($this->helper('contacts')->getUserEmail()) ?>" class="input-text required-entry validate-email" type="text" />
</div>
</div>
</li>
<li class="wide">
<label for="comment" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Your Details') ?></label>
<div class="input-box">
<textarea name="comment" id="comment" title="<?php echo Mage::helper('contacts')->__('Your Details') ?>" class="required-entry input-text" cols="5" rows="3"></textarea>
</div>
</li>
<li>
<label for="subject"><?php echo Mage::helper('contacts')->__('Which store?') ?> <span class="required">*</span></label>
<div class="input-box"><input name="subject" id="subject" title="<?php echo Mage::helper('contacts')->__('Which store? ') ?>" value="" class="required-entry input-text" type="text"/>
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<p class="required"><?php echo Mage::helper('contacts')->__('* Required Fields') ?></p>
<input type="text" name="hideit" id="hideit" value="" style="display:none !important;" />
<button type="submit" title="<?php echo Mage::helper('contacts')->__('Submit') ?>" class="button"><span><span><?php echo Mage::helper('contacts')->__('Submit') ?></span></span></button>
</div>
</form>
<script type="text/javascript">
//<![CDATA[
var contactForm = new VarienForm('contactForm', true);
//]]>
</script>
Problem is this is redirect to contact us page
I want to ask,has anyone idea that how to achieve career form?
Thanks

You have correctly assigned the file which displays the carrer form i.e. career_form.phtml. Now you just need to create simple HTML form in this file with the fields that are requited for you.
<form action="<?php echo $this->getUrl(''); ?>" id="carrer" method="post" name="carrer_form">
// Add the fields according to your requirement.
</form>
Above is the form now after creating the form you need to change the action of the form. In the previous form i.e. contact form the action of the form points to
<?php echo $this->getUrl('contacts/index/post'); ?>
This gives the url
www.your_domain.com/index.php/contacts/index/post
This is the location of the module/controller/action where you process the information sent from the form.This you should change according to your controllers action.
Hope this will help.

Finally created a module and create a controller action and get here all post value from phtml file,use magento mail function for sending mail.
Thanks

shows the div if the value of the input field matched

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>