Magento create custom career form and call from CMS page - javascript

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

Related

In form1 login page input email field values how to display same email id in form2 email input field without refresh the page

In form1 login page input email field values how to display same email id in form2 email input field without refresh the page while click the forgot button please any one help me.below i attched the screenshot
script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function () {
var currentActiveId;
if (sessionStorage.getItem("activeDiv")) {
currentActiveId = sessionStorage.getItem("activeDiv");
$('.form-div').removeClass("active");
$('#' + currentActiveId).addClass("active");
}
$('#btn-show-signup').click(function () {
$('.form-div').removeClass("active");
$('#signup-form').addClass("active");
currentActiveId = "signup-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
$('.btn-show-login').click(function () {
$('.form-div').removeClass("active");
$('#login-form').addClass("active");
currentActiveId = "login-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
$('#btn-show-forgot').click(function () {
// $('#forgot-email').attr('value', null);
$('.form-div').removeClass("active");
$('#forgot-form').addClass("active");
currentActiveId = "forgot-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
});
</script>
form1
<div class="form-main">
<form action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >
<div class="field-wrap">
<label class="view-label">Email Address</label>
<input type="email" placeholder=" Email Address" name="email" id="email" class="input-control" value="<?php echo set_value('email'); ?>"/>
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" name="password" id="password" value="<?php echo set_value('password'); ?>" />
<span class="text-danger"><?php echo form_error('password'); ?></span>
<a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>
</div>
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
</div>
form2
<div class="form-div" id="forgot-form">
<div class="form-aside">
<h4 id="form-header">Forgot password </h4>
<p class="form-text"></p>
</div>
<div class="form-main">
<form action="<?php echo base_url(); ?>Index.php/Login_cntrl/ResetPassword" method="POST">
<div class="field-wrap">
<input type="text" name="emaill" id="emaill" placeholder="Enter your Mobile/Email Address" value="<?php echo $this->session->userdata('findemaill'); ?>" autocomplete="off" id="forgot-email"/>
</div>
<div class="field-wrap">
<input type="text" name="otp" id="otp" placeholder="Enter OTP" value="<?php echo set_value('otp'); ?>"/>
<span class="text-danger"><?php echo form_error('otp'); ?></span>
</div>
<?php echo $this->session->flashdata('passwordmissmatch'); ?>
<div class="field-wrap">
<input type="text" name="newpassword" id="newpassword" placeholder="Enter new Password" value="<?php echo set_value('newpassword'); ?>"/>
<span class="text-danger"><?php echo form_error('newpassword'); ?></span>
</div>
<div class="field-wrap">
<input type="text" name="confirmpassword" id="confirmpassword" placeholder="Re-enter new Password" value="<?php echo set_value('confirmpassword'); ?>"/>
<span class="text-danger"><?php echo form_error('confirmpassword'); ?></span>
</div>
<div class="field-wrap">
<button type="submit" name="resubmit" id="resubmit" class="btn btn-submit">submit</button>
</div>
<?php echo $this->session->flashdata('success_msg'); ?>
<div class="field-wrap">
<a href="javascript:void(0)" class="btn-show-login btn btn-link btn-nobg" >Back</a>
</div>
</form>
</div>
</div>
on form1 html
function onClickHandler(){
location.href = 'form2.html?username=' + document.getElementById('TextBoxName').value;
}
on form2 html
function parseQueryString()
{
var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {
queryDict[item.split("=")[0]] = item.split("=")[1]
});
return queryDict;
}
function onLoadHandler(){
document.getElementById('TextBoxName').value = parseQueryString().name;
}

Dropdown list set put selected value from database

I am trying to create a drop down menu that will select a value that is stored in the database. Right now the code creates a dropdown with the first option selected. I have read through several tutorials, and tried to apply them, but I cannot get this working. I hope someone can help.
<div class="form-group">
<label>Up-to-Date</label>
<select class="form-control" name="uptodate"/>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
</div>
Whole code :
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
include("../includes/connect.php");
if (isset($_SESSION['logged_in'])) {
if(isset($_POST['btnSlaOp'])) {
$id=$_POST['id'];
$uitgeleend=$_POST['uitgeleend'];
$nr=$_POST['nr'];
$model=$_POST['model'];
$serienummer=$_POST['serienummer'];
$capaciteit=$_POST['capaciteit'];
$uptodate=$_POST['uptodate'];
$persoon=$_POST['persoon'];
$datumuitgeleend=$_POST['datumuitgeleend'];
$datumretour=$_POST['datumretour'];
$opmerking=$_POST['opmerking'];
$sql="UPDATE ipads SET uitgeleend='$uitgeleend', nr='$nr', model='$model', serienummer='$serienummer', capaciteit='$capaciteit', uptodate='$uptodate', persoon='$persoon', datumuitgeleend='$datumuitgeleend', datumretour='$datumretour', opmerking='$opmerking' WHERE id='$id'";
$result=$db->query($sql);
header("location:overzicht-ipads.php");
} else if (isset($_POST['btnSlaOpInGs'])) {
$id=$_POST['id'];
$uitgeleend=$_POST['uitgeleend'];
$nr=$_POST['nr'];
$model=$_POST['model'];
$serienummer=$_POST['serienummer'];
$capaciteit=$_POST['capaciteit'];
$uptodate=$_POST['uptodate'];
$persoon=$_POST['persoon'];
$datumuitgeleend=$_POST['datumuitgeleend'];
$datumretour=$_POST['datumretour'];
$opmerking=$_POST['opmerking'];
$sql ="UPDATE ipads SET nr='$nr', model='$model', serienummer='$serienummer', capaciteit='$capaciteit', uptodate='$uptodate', persoon='$persoon', datumuitgeleend='$datumuitgeleend', datumretour='$datumretour', opmerking='$opmerking' WHERE id='$id'";
$sql .="INSERT INTO geschiedenis (SELECT * FROM ipads WHERE id='$id')";
$sql .="UPDATE ipads SET uitgeleend='Nee', persoon='', datumuitgeleend='', datumretour='', opmerking='' WHERE id='$id'";
$result=mysqli_multi_query($db, $sql);
header("location:overzicht-ipads.php");
}
if(isset($_GET['id'])) {
$id=$_GET['id'];
$sql="SELECT id, uitgeleend, nr, model, serienummer, capaciteit, uptodate, persoon, datumuitgeleend, datumretour, opmerking FROM ipads WHERE id='$id'";
$result=$db->query($sql);
$rij=$result->fetch_assoc();
$uitgeleend=$rij['uitgeleend'];
$nr=$rij['nr'];
$model=$rij['model'];
$serienummer=$rij['serienummer'];
$capaciteit=$rij['capaciteit'];
$uptodate=$rij['uptodate'];
$persoon=$rij['persoon'];
$datumuitgeleend=$rij['datumuitgeleend'];
$datumretour=$rij['datumretour'];
$opmerking=$rij['opmerking'];
include("../includes/get_header_wn.php");
?>
<h1 class="page-title">Wijzigen</h1>
<ul class="breadcrumb">
<li>Home </li>
<li class="active">Leen iPad <?php echo $nr ?></li>
</ul>
</div>
<form id="gegevensForm" class="col-xs-4" form method="POST" action="overzicht-ipads-edit.php">
<input type="hidden" name="id" value="<?php echo $id?>">
<div class="form-group">
<label>Uitgeleend</label>
<input type="text" class="form-control" name="uitgeleend" value="<?php echo $uitgeleend ?>" />
</div>
<div class="form-group">
<label>Nr</label>
<input type="text" class="form-control" name="nr" value="<?php echo $nr ?>" />
</div>
<div class="form-group">
<label>Model</label>
<input type="text" class="form-control" name="model" value="<?php echo $model ?>" />
</div>
<div class="form-group">
<label>Serienummer</label>
<input type="text" class="form-control" name="serienummer" value="<?php echo $serienummer ?>" />
</div>
<div class="form-group">
<label>Capaciteit</label>
<input type="text" class="form-control" name="capaciteit" value="<?php echo $capaciteit ?>" />
</div>
<div class="form-group">
<label>Up-to-Date</label>
<select class="form-control" name="uptodate"/>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
</div>
<div class="form-group">
<label>Persoon</label>
<input type="text" class="form-control" name="persoon" value="<?php echo $persoon ?>" />
</div>
<div class="form-group">
<label>Datum uitgeleend</label>
<input type="text" id="datepicker" class="form-control" name="datumuitgeleend" value="<?php echo $datumuitgeleend ?>" />
</div>
<div class="form-group">
<label>Datum retour</label>
<input type="text" id="datepicker1" class="form-control" name="datumretour" value="<?php echo $datumretour ?>" />
</div>
<div class="form-group">
<label for="comment">Opmerking</label>
<textarea class="form-control" rows="5" id="comment" name="opmerking" /><?php echo $opmerking ?></textarea>
</div>
<button class="btn btn-primary pull-right" name="btnSlaOp" input type="submit"><i class="fa fa-save"></i> Opslaan</button>
<input type="button" name="btnCancel" value="Annuleer" class="btn btn-primary pull-left">
<button class="btn btn-primary pull-middle" name="btnSlaOpInGs" type="submit"><i class="fa fa-save"></i> Opslaan & Archiveren</button>
<?php
include('../includes/get_footer.php');
?>
</form>
<?php
}
} else {
header("location:overzicht-ipads.php");
}
?>
php: if($selectedVal == "yourVal") echo "selected";
e.g.:
<div class="form-group">
<label>Up-to-Date</label>
<select class="form-control" name="uptodate"/>
<option value="Ja" <?php if($selectedVal == "Ja") echo "selected";?>>Ja</option>
<option value="Nee" <?php if($selectedVal == "Nee") echo "selected";?>>Nee</option>
</select>
</div>
edit: in your case, replace $selectedVal with $uptodate

Form serialize with ajax post

I was trying to post the form data with onclick event in an ajax function.but the data are not being posted in the next page. I was using the serialize method of from data submission but its not working. Meanwhile when I use jQuery .val function it captures the right data in th right field
Here is my html:
<form id="customer_from" class="form-group">
<div class="row">
<div class="col-lg-2">
<div id="customer_information" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
Customer Information
</div>
<div id="registry_details" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
Registry Details
</div>
<div id="send_email" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
E-mail
</div>
<div id="add_comment" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
Add Comment
</div>
</div>
<div class="col-lg-10" id="dynamic" >
<div class="col-lg-5">
<label for='customer_id'> Customer ID: <span class='required-field'>*</label>
<input name='customer_id' type='text' value="<?php echo $data['customer_id'] ?>" class='form-control' required /> </span>
<label for='customer_name'> Customer Name: <span class='required-field'>*</label>
<input name='customer_name' type='text' value="<?php echo $data['firstname'] ?>" class='form-control' required /> </span>
<label for='customer_email'> E-mail: <span class='required-field'>*</label>
<input name='customer_email' type='text' value="<?php echo $data['email'] ?>" class='form-control' required /> </span>
<label for='customer_telephone1'> Telephone#1: <span class='required-field'>*</label>
<input name='customer_telephone1' type='text' value="<?php echo $data['phone'] ?>" class='form-control' required /> </span>
<label for='customer_telephone2'> Telephone#2:<span class='required-field'>*</label>
<input name='customer_telephone2' type='text' value="<?php echo $data['alt_phone'] ?>" class='form-control' required /> </span>
<label class="checkbox-inline"><input type="checkbox" value="yes">Pattern</label>
</div>
<div class="col-lg-5">
<label for='customer_address'> Address: <span class='required-field'>*</label>
<input name='customer_address' type='text' value="<?php echo $data['address'] ?>" class='form-control' required /> </span>
<label for='customer_city'> City: <span class='required-field'>*</label>
<input name='customer_city' type='text' value="<?php echo $data['city'] ?>" class='form-control' required /> </span>
<label for='customer_province'> Province: <span class='required-field'>*</label>
<input name='customer_province' type='text' value="<?php echo $data['province'] ?>" class='form-control' required /> </span>
<label for='customer_postal'> Postal code: <span class='required-field'>*</label>
<input name='customer_postal' type='text' value="<?php echo $data['postal_code'] ?>" class='form-control' required /> </span>
<label for='customer_country'> Country: <span class='required-field'>*</label>
<select id = "customer_country" name="customer_country" class="form-control" title="Select a Category" required>
<?php echo $customer_country; ?>
</select>
<label class="checkbox-inline"><input type="checkbox" value="yes">Newsletter</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-xs-11 col-md-12">
<input type="button" class="btn btn-success" id="update-registry" value="Update Registry" style="float:right;">
<input type="button" class="btn btn-danger" id="delete-registry" data-registry="<?php echo $_POST['order_ref'];?>" data-type="<?php echo $_POST['registry_type']; ?>" value="Delete" style="float:left;">
</div>
</div>
</div>
</form>
and here is the ajax call:
$("#update-registry").on("click",function(){
$.ajax({
type: "POST",
url: "ajax/update_customer.php",
data:$("from#customer_form").serializeArray(),
beforeSend: function() {
},
success: function(msg) {
$("#registry").find(".update_registry").html(msg);
},
error: function() {
alert("failure");
}
});
})
See the form ID:
<form id="customer_from"
There is a typo:
data:$("from#customer_form").serializeArray(),
//------^^^^----------^^^^should be from
//------^^^^should be form
change from to form. Even better as IDs are unique so there is no need to prefix the tag name:
data:$("#customer_from").serializeArray(),

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

Categories

Resources