I get "Name", "Email", "Phone" sent to email just fine, but my dropdown fields (reason,product,salesperson) do not come through my email. Can you help?
My HTML Page has this code:
**<form id="contact-form">
<div class="success-message">Contact form submitted.</div>
<div class="holder">
<div class="form-div-1 clearfix">
<label class="name">
<input type="text" placeholder="Name*:" data-constraints="#Required #JustLetters" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid name.</span>
</label>
</div>
<div class="form-div-2 clearfix">
<label class="email">
<input type="text" placeholder="Email*:" data-constraints="#Required #Email" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid email.</span>
</label>
</div>
<div class="form-div-3 clearfix">
<label class="phone notRequired">
<input type="text" placeholder="Phone:" data-constraints="#JustNumbers"/>
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid phone.</span>
</label>
</div>
</div>
Reason: <select id="reason">
<option value="General">General Question</option>
<option value="MOPoster Quote">Price Quote</option>
<option value="Feedback">Feedback</option>
</select>
Product: <select id="product">
<option value="None">None</option>
<option value="Banners">Banners</option>
<option value="Signs">Signs</option>
<option value="Posters">Posters</option>
<option value="Decals">Decals</option>
<option value="Magnetics">Magnetics</option>
<option value="Billboards">Billboards</option>
<option value="Tradeshow">Tradeshow Displays/Materials</option>
<option value="Vehicle Graphics/Wraps">Vehicle Graphics/Wraps</option>
</select>
Salesperson: <select name="salesperson">
<option value="None">I don't have one</option>
<option value="Tabitha">Tabitha Barham</option>
<option value="Audrey">Audrey Pyles</option>
</select><br>
<div class="form-div-4 clearfix">
<label class="message">
<textarea placeholder="If you are inquiring about a quote please include as many details as possible such as: size, material, single or double sided, 1-color or full-color, etc." data-constraints='#Required #Length(min=20,max=999999)'></textarea>
<span class="empty-message">*This field is required.</span>
<span class="error-message">*The message is too short.</span>
</label>
</div>
<div class="btns">
submit comment
</div>
</form>**
MY PHP Page has this code to send the email:
function formSubmit(){
$('[data-constraints]',form).trigger('validate.form')
if(!$('label.'+opt.invalidClass+',label.'+opt.emptyClass,form).length){
$.ajax({
type:"POST"
,url:opt.mailHandlerURL
,data:{
name:getValue($('label.name input'))
,email:getValue($('label.email input'))
,phone:getValue($('label.phone input'))
,reason:getValue($('label.reason input'))
,product:getValue($('label.product input'))
,salesperson:getValue($('label.salesperson input'))
...This code continues but this is all you should need to help me I hope!
I get "Name", "Email", "Phone" sent to email just fine, but my dropdown fields (reason,product,salesperson) do not come through my email. Can you help?
you don't show getValue
but for jquery you should use.
$( "select.reason option:selected").val();
Related
enter image description hereI am new to coding. I just started building a website and I am currently working on the profile page. I wanted the input fields to be populated by the information the user has provided (see attached picture). This I have achieved.
My problem now is... I can't spit information from the database to the select tag.
For the other input fields, I just had to echo the data spooled from the database as seen in my HTML below:
<div class="col-sm-6 white-bg">
<div class="row">
<div class="col-sm-6">
<label>
<span class="text-left">FIRST NAME</span>
<input type="text" name="fname" value="<?php echo $first_name ?>" disabled>
</label>
</div>
<div class="col-sm-6">
<label>
<span class="text-left">LAST NAME</span>
<input type="text" name="lname" value="<?php echo $last_name ?>" disabled>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>
<span class="text-left">GENDER</span>
<select name="gender">
<option value="" disabled hidden selected>--Select--</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
<option value="Others">Others</option>
</select>
</label>
</div>
<div class="col-sm-6">
<label>
<span class="text-left">DATE OF BIRTH</span>
<input type="DATE" name="dob" value="<?php echo $dob ?>">
</label>
</div>
</div>
</div>
But I can't do the same for the select tag. How do I have an option selected based on the information the user has provided such that the Male option is selected if the user entered male or the the Female option is selected if the user entered Female.
You should add the keyword based on the value returned from your DB.
So in your code add something like
-- For your default select option do
<?php echo(empty($theGender)?" selected":""); ?>
-- For Male/Female do, checking for value you stored
<option value="Female"<?php echo(($theGender === "female")?" selected":""); ?> >Female</option>
I need a little help. I have created a form and for the validation i have used : http://formvalidator.net/ .
I want to achieve: The thing i want to achieve is that upon clicking on submit the users sees a popup and the submitted form is then emailed to the administration.
Problem: When the user clicks on submit the popup is displayed and the email is also sent but the page gets refreshed instantly and the popup disappears if i set
onValidate : function() {
return true;
}
and when i set
onValidate : function() {
return false;
}
The popup stays but the email is not sent.
FORM HTML:
if (isset($_POST['enquiry_form_submit'] ) ) {
$hidden_field = esc_html( $_POST[ 'enquiry_form_submitted' ] );
if($hidden_field == 'Y') {
enquiryemail();
}
<form name="enquiryemail_form" id="enquiryemail_form" method="post" data-toggle="validator" action="">
<h2 class="tab-heading"><?php echo esc_html($enquiry_subheading);?></h2>
<span class="required">* Required Fields to provide you with your FREE online property report.</span>
<hr>
<div class="abt-ur-prprty">
<div class="left-prprty">
<div class="form-row ">
<label for="property_type" >Property type*</label>
<select id="Property_type" name="property_type" data-validation="required" data-validation-error-msg="Please select property type">
<option value="" >--Select--</option>
<option value="House">House</option>
<option value="House + Granny Flat">House + Granny Flat</option>
<option value="Townhouse">Townhouse</option>
<option value="Land">Land</option>
<option value="Acreage">Acreage</option>
<option value="Apartment/Unit">Apartment/Unit</option>
<option value="Duplex">Duplex</option>
</select><br>
</div>
<!-- form row ends -->
<div class="form-row">
<label for="bedrooms">Bedrooms*</label>
<select id="bedrooms" name="bedrooms" data-validation="required" data-validation-error-msg="Please select a bedroom">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="More than 5">More than 5</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row">
<label>Bathrooms*</label>
<select id="bathrooms" name="bathroom" data-validation="required" data-validation-error-msg="Please select a bathroom">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="More than 4">More than 4</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row">
<label>Condition*</label>
<select id="condition" name="condition" data-validation="required" data-validation-error-msg="Please select the condition">
<option value="">--Select--</option>
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Average">Average</option>
<option value="Needs Work">Needs Work</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row">
<label>Est Size (sqm)</label>
<input type="text" name="est_size" id="est">
</div>
<!-- form row ends -->
<div class="form-row">
<label>Parking*</label>
<select id="parking" name="parking" data-validation="required" data-validation-error-msg="Please select the parking">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">More than 4</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row mrgn-zero">
<label>Special Features</label>
<div class="checkbox-group">
<div class="left">
<div class="chk-row"><input type="checkbox" value="Swimming-Pool" id="chk" name="special_feature[]"> <label>Swimming Pool</label></div>
<div class="chk-row"><input type="checkbox" value="City-Views" id="chk" name="special_feature[]"> <label>City Views </label></div>
<div class="chk-row"><input type="checkbox" value="Garden" id="chk" name="special_feature[]"> <label>Garden </label></div>
<div class="chk-row"><input type="checkbox" value="Spa" id="chk" name="special_feature[]"> <label>Spa </label></div>
<div class="chk-row"><input type="checkbox" value="Con" id="chk" name="special_feature[]"> <label>Air Con</label></div>
</div>
<div class="right">
<div class="chk-row"><input type="checkbox" value="Water-views" id="chk" name="special_feature[]"> <label>Water Views</label></div>
<div class="chk-row"><input type="checkbox" value="Balcony" id="chk" name="special_feature[]"> <label>Balcony</label></div>
<div class="chk-row"><input type="checkbox" value="Floorboards" id="chk" name="special_feature[]"> <label>Floorboards</label></div>
<div class="chk-row"><input type="checkbox" value="Security" id="chk" name="special_feature[]"> <label>Security</label></div>
</div>
</div>
</div>
<!-- form row ends -->
<div class="form-row">
<label>Other</label>
<input type="text" name="other" id="oth">
</div>
<!-- form row ends -->
</div>
<!-- left prprty ends here -->
<div class="right-prprty">
<div class="form-row unit-street">
<div class="left"><label>Unit #</label><input type="text" name="unit_no" id="un_no"></div>
<div class="right"><label>Street #*</label><input type="text" id="Street_no" name="street_no" data-validation="required" data-validation-error-msg="Please enter street no"></div>
</div>
<!-- form row ends here -->
<div class="form-row">
<label>Street Name* </label>
<input type="text" id="street_name" name="street_name" data-validation="required" data-validation-error-msg="Please enter a street name">
</div>
<!-- form row ends -->
<div class="form-row">
<label>Suburb* </label>
<input type="text" id="suburb" name="studio" data-validation="required" data-validation-error-msg="Please enter suburb">
</div>
<!-- form row ends -->
<div class="form-row">
<label>State*</label>
<select id="state" name="State" data-validation="required" data-validation-error-msg="Please enter a State">
<option value="">--Select--</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row mrgn-zero">
<label>Relationship <br> to Property*</label>
<input type="text" id="relationship_to_Property" name="relation" data-validation="required" data-validation-error-msg="Please select the relationship">
</div>
<!-- form row ends -->
<div class="form-row mrgn-zero">
<label>Purpose of <br> Request* </label>
<select id="purpose_of_request" name="purpose" multiple data-validation="required" data-validation-error-msg="Please select the purpose of request">
<!--<option value="-1">--Select--</option>-->
<option value="Selling">Selling</option>
<option value="Re-Financing">Re-Financing</option>
<option value="Interested-in-Current-Market-Pricing">Interested in Current Market Pricing</option>
</select>
</div>
<!-- form row ends -->
<!-- <div class="form-row mrgn-zero">
<label> Sell /<br> Re-Finance* </label>
<select id="time_to_sell" name="cell">
<option value="-1">--Select--</option>
<option value="0-3">0 – 3 Months</option>
<option value="3-6">3 – 6 Months</option>
<option value="6-12">6 – 12 Months</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row">
<label>Currently Listed?* </label>
<div class="radio-btns">
<!-- form row ends
<div class="left"><input type="radio" name="currently_listed_n" id="currently_listed" value="y"><label>Yes</label></div>
<div class="right"><input type="radio" name="currently_listed_n" id="currently_listed" value="n" ><label>No</label></div>
form row ends -->
<select id="currently_listed_n" name="currently_listed_n" data-validation="required" data-validation-error-msg="Please select one">
<option value="-1">--Select--</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</div>
<!-- form row ends -->
</div>
<!-- right prprty ends here -->
</div>
<!-- abt ur prprty ends here -->
<!-- property services ends here -->
<h2 class="tab-heading"><?php echo esc_html($enquiry_second_subheading); ?></h2>
<div class="abt-urself">
<div class="left">
<div class="form-row"> <label>First name *</label> <input type="text" id="first_name" name="first_name" data-validation="required" data-validation-error-msg="Please enter your First Name.">
</div>
<div class="form-row"> <label>Surname*</label> <input type="text" id="last_name" name="sur_name" data-validation="required" data-validation-error-msg="Please enter your Sur Name."> </div>
<div class="form-row"> <label>Telephone*</label> <input type="text" id="telephone" name="telephone" data-validation="number required" data-validation-error-msg="Please enter your Telephone Number."></div>
</div>
<!-- left ends here -->
<div class="right">
<div class="form-row"> <label>Email*</label> <input type="text" id="email" name="email" value="<?php if(isset($_POST['homepageemail'])) { echo esc_html($_POST['homepageemail']); }?>" data-validation="email" data-validation-error-msg="Please enter your email."></div>
<div class="form-row"> <label>Confirm email* </label> <input type="text" id="confirm_email" name="confirm_email" value="<?php if(isset($_POST['homepageemail'])) { echo esc_html($_POST['homepageemail']); }?>" data-validation="confirmation" data-validation-confirm="email" data-validation-error-msg="Your provided emails donot match"></div>
</div>
<!-- right ends here -->
<div class="terms-conditions"><div class="privacy-policy"><input type="checkbox" id="agree" value="agree" data-validation="required" data-validation-error-msg="Please agree to the terms above"><p> I agree to the following Terms and Conditions and Privacy Policy*</p> <br>
<input type="hidden" name="enquiry_form_submitted" value="Y">
</div><input type="submit" value="SUBMIT" name="enquiry_form_submit" class="fancybox" >
<div style="display:none;">
<div class="aussi-en-pop" id="enquiry-popup"><h3>Thank you for using <?php echo get_bloginfo( 'name' )?>.</h3> <p>Your <?php echo get_bloginfo( 'name' )?> representative is busy getting your Property Report ready and will be in touch within 48 hours with your free report. <br> All enquiries please email : <?php echo $email['contactemail'];?></p></div>
</div>
</form>
Mailer:
function enquiryemail() {
$storeemail = get_option('contactemailstored');
$to = $storeemail['contactemail'];
$subject = get_bloginfo('url') . '- New Enquiry ';
$message = "Thanks!";
$from = get_bloginfo('url') . ' Application';
wp_mail( $to , $subject, $message );
}
Javascript:
$.validate({
form : '#enquiryemail_form',
modules : 'security',
errorMessageClass : 'enq_err',
onValidate : function() {
jQuery.fancybox( {
href : '#enquiry-popup'
});
return false; // Will stop the submission of the form
}
});
The PopUp disappears because the click event on <input type='submit'> tells the browser to send the form to the server. We will need to tell the browser to stop propagation of the submit action so that we can show the PopUp. I hope this will shed some light.
So, we will:
Attach a clickEventListener to the <input type='submit'>.
Add event.stopPropagation() and event.preventDefault(). These will stop any further propagation of the click event and prevent the default action i.e. submit, respectively.
$(function() {
$("form").find("input[type='submit']").click(function(event) {
event.preventDefault();
event.stopPropagation();
inputSubmit_OnClick();
});
});
Create a inputSubmit_OnClick function that will be called when the <input type='submit'> is clicked. The rest of the code goes here.
Use jQueryFormValidation plugin to validate the form.
Display our PopUp for the whole world to see.
Use $.ajax() to send data to the server. This is where we are supposed to call the script that will send the email.
Implement methods to handle success or fail events.
function inputSubmit_OnClick() {
// get form input values
// jQueryFormValidation
// $.ajax()
// $.ajax().fail() and $.ajax().done()
}
In the documentation of the plugin, return false; for the purpose of disabling the form submission is called within the onSuccess callback and not the onValidate callback.
//From the documentation
onSuccess : function($form) {
alert('The form '+$form.attr('id')+' is valid!');
return false; // Will stop the submission of the form
},
I have been reviewing a lot of pages about this and can't seem to figure out why this isn't working.
And I have a doubt in the section of,if i have multiple dynamically created select box and this selected values to be passed to the text box with some calculation before using jQuery. please help me i have tortured in this section.
In the below line of input.php have the html code of get the input.
function addMore() {
$("<DIV>").load("input.php", function() {
$("#product").append($(this).html());
});
}
function deleteRow() {
$('DIV.product-item').each(function(index, item){
jQuery(':checkbox', this).each(function () {
if ($(this).is(':checked')) {
$(item).remove();
}
});
});
}
$(document).ready(function() {
$('.product-item').change(function()
{
var option1 =$(this).find('.orderbox1 option:selected').val();
var option2 = $(this).find('.orderbox2 option:selected').val();
option1 *= $(".orderbox3").val();
option2 *= $(".orderbox3").val();
$(".orderbox4").val(option1-option2);
});
});
</SCRIPT>
</HEAD>
<BODY>
<FORM name="frmProduct" method="post" action="">
<DIV id="outer">
<DIV id="header">
<DIV class="float-left" style="margin-left:150px;"> </DIV>
<DIV class="float-left col-heading">Choose Currency</DIV>
<DIV class="float-left col-heading">Choose Product</DIV>
<DIV class="float-left col-heading">Forex Amount</DIV>
<DIV class="float-left col-heading">Rupee Amount</DIV>
</DIV>
<DIV id="product">
<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left"><input type="checkbox" name="item_index[]" /></DIV>
<DIV class="float-left"> Choose Currency:
<select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
<option selected="selected">Select</option>
<option value="66">United States</option>
<option value="75">European</option>
<option value="12">Philippines</option>
<option value="17">Qatar</option>
</select></DIV>
<DIV class="float-left"> Choose Product:
<select name="item_size[]" id="orderbox2" class="orderbox2">
<option value="1" selected="selected">Select</option>
<option value="10">Forex Card</option>
<option value="20">Currency Notes</option>
</select></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" id="orderbox3" class="orderbox3"/></DIV>
<DIV class="float-left"><input type="text" name="item_price[]" id="orderbox4" class="orderbox4"/></DIV>
</DIV>
</DIV>
<DIV class="btn-action float-clear">
<input type="button" name="add_item" value="Add More" onClick="addMore();" />
<input type="button" name="del_item" value="Delete" onClick="deleteRow();" />F
<span class="success"><?php if(isset($message)) { echo $message; }?></span>
</DIV>
<DIV class="footer">
<input type="submit" name="save" value="Save" />
</DIV>
</DIV>
</FORM>
Firstly, it looks like you are trying to attach a change handler to a div. This is not possible. From the documentation -
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements.
To get it to work you can change this -
$('.product-item').change(function() {
to -
$('.product-item select, .product-item input').change(function() {
Secondly, to handle dynamic rows you you need to use event delegation. Using .on you can apply the function to dynamic elements. You will need to change the function to -
$("#product").on('change', '.product-item select, .product-item input', function() {
var $line = $(this).parents('.product-item');
var option1 = $line.find('.orderbox1').val();
var option2 = $line.find('.orderbox2').val();
option1 *= $line.find(".orderbox3").val();
option2 *= $line.find(".orderbox3").val();
$line.find(".orderbox4").val(option1 - option2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DIV id="product">
<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left">
<input type="checkbox" name="item_index[]" />
</DIV>
<DIV class="float-left">Choose Currency:
<select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
<option selected="selected">Select</option>
<option value="66">United States</option>
<option value="75">European</option>
<option value="12">Philippines</option>
<option value="17">Qatar</option>
</select>
</DIV>
<DIV class="float-left">Choose Product:
<select name="item_size[]" id="orderbox2" class="orderbox2">
<option value="1" selected="selected">Select</option>
<option value="10">Forex Card</option>
<option value="20">Currency Notes</option>
</select>
</DIV>
<DIV class="float-left">
<input type="text" name="item_name[]" id="orderbox3" class="orderbox3" />
</DIV>
<DIV class="float-left">
<input type="text" name="item_price[]" id="orderbox4" class="orderbox4" />
</DIV>
</DIV>
<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left">
<input type="checkbox" name="item_index[]" />
</DIV>
<DIV class="float-left">Choose Currency:
<select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
<option selected="selected">Select</option>
<option value="66">United States</option>
<option value="75">European</option>
<option value="12">Philippines</option>
<option value="17">Qatar</option>
</select>
</DIV>
<DIV class="float-left">Choose Product:
<select name="item_size[]" id="orderbox2" class="orderbox2">
<option value="1" selected="selected">Select</option>
<option value="10">Forex Card</option>
<option value="20">Currency Notes</option>
</select>
</DIV>
<DIV class="float-left">
<input type="text" name="item_name[]" id="orderbox3" class="orderbox3" />
</DIV>
<DIV class="float-left">
<input type="text" name="item_price[]" id="orderbox4" class="orderbox4" />
</DIV>
</DIV>
</DIV>
</DIV>
Here I'm creating a variable ($line) to represent the row. I can then use find to get the orderboxes for that row.
When the user picks either phone or email I want the form to then generate a box to enter the details of which they selected. How do I do this? Thanks.
<div class="field-container full clearfix">
<label class="required">What is your prefered method of contact? </label>
<select name="fields[contact]">
<option value="blank"></option>
<option value="phone">Phone</option>
<option value="email">E-mail</option>
</select>
</div>
<div class="field-container full clearfix">
<label class="required">Phone</label>
<input type="text" name="fields[phone]" value="<?= (isset($fields['phone']) ? $fields['phone'] : '' )?>"/>
</div>
<div class="field-container full clearfix">
<label class="required">E-mail Address</label>
<input type="text" name="fields[email]" value="<?= (isset($fields['email']) ? $fields['email'] : '' )?>"/>
</div>
Here's a snippet that shows you how to do that with javascript:
document.getElementById('selection').addEventListener('change',function(){
var inputs = document.querySelectorAll('.hideAndShowInput > input');
for (var i = 0; i<inputs.length;i++) {
inputs[i].setAttribute('type','hidden');
inputs[i].parentNode.style.display= 'none';
}
document.getElementById(this.value).parentNode.style.display='block';
document.getElementById(this.value).setAttribute('type',this.value);
});
<div class="field-container full clearfix">
<label class="required">What is your prefered method of contact? </label>
<select id="selection" name="fields[contact]">
<option value="blank"></option>
<option value="phone">Phone</option>
<option value="email">E-mail</option>
</select>
</div>
<div class="field-container full clearfix hideAndShowInput" style="display:none;">
<label class="required">Phone</label>
<input type="hidden" id="phone" name="fields[phone]" value="">
</div>
<div class="field-container full clearfix hideAndShowInput" style="display:none;">
<label class="required">E-mail Address</label>
<input type="hidden" id="email" name="fields[email]" value=""/>
</div>
<div class="field-container full clearfix">
<label class="required">otherField1</label>
<input type="text" id="other" name="fields[p]" value="otherField">
</div>
<div class="field-container full clearfix">
<label class="required">otherField2</label>
<input type="text" id="lsd" name="fields[em]" value="otherField2"/>
</div>
Please note that I added a Id to the select element and to the input elements.
EDIT | USAGE
Create a file, call it script.js or whatever you like and put this in it:
document.getElementById('selection').addEventListener('change',function(){
var inputs = document.querySelectorAll('.hideAndShowInput > input');
for (var i = 0; i<inputs.length;i++) {
inputs[i].setAttribute('type','hidden');
inputs[i].parentNode.style.display= 'none';
}
document.getElementById(this.value).parentNode.style.display='block';
document.getElementById(this.value).setAttribute('type',this.value);
});
Save the file to a folder on your server that is accesible. For example /public/js/script.js
In your html, add
<script src="/public/js/script.js"></script> <!-- or however your path is -->
to the very end of your file, directly before the closing </body> tag So that it looks like this
<div class="field-container full clearfix">
<label class="required">What is your prefered method of contact? </label>
<select id="selection" name="fields[contact]">
<option value="blank"></option>
<option value="phone">Phone</option>
<option value="email">E-mail</option>
</select>
</div>
<div class="field-container full clearfix hideAndShowInput" style="display:none;">
<label class="required">Phone</label>
<input type="hidden" id="phone" name="fields[phone]" value="">
</div>
<div class="field-container full clearfix hideAndShowInput" style="display:none;">
<label class="required">E-mail Address</label>
<input type="hidden" id="email" name="fields[email]" value=""/>
</div>
<div class="field-container full clearfix">
<label class="required">otherField1</label>
<input type="text" id="other" name="fields[p]" value="otherField">
</div>
<div class="field-container full clearfix">
<label class="required">otherField2</label>
<input type="text" id="lsd" name="fields[em]" value="otherField2"/>
</div>
<script src="/public/js/script.js"></script> <!-- here is the script included -->
</body>
That's it.
This worked for me:
Add an id to your select: select name="fields[contact]" id="contact"
Set phone and email fields to hidden by using a class or inline style: div class="field-container full clearfix hide-this" id="phone-container"
--or just set style: display:none;
Javascript:
$('#contact').change(function(){
if(this.selectedOptions[0].text == 'phone') {
$('#phone-container').show().focus();
}else{$('#phone-container').hide();}
});
This should do the trick... let me know?
//CODE
<!DOCTYPE html>
<html>
<head>
<style>
.field-hide{
display: none;
}
</style>
<script>
function valChange(ele){
var fields = document.getElementById("container").children;
for(var i=0; i < fields.length; i++){
fields[i].classList.add("field-hide");
}
switch(ele.value){
case "phone":
document.getElementById("phone").classList.remove("field-hide");
break;
case "email":
document.getElementById("email").classList.remove("field-hide");
break;
}
}
</script>
</head>
<body>
<div class="field-container full clearfix">
<label class="required">What is your preferred method of contact?</label>
<select type="text" name="fields[contact]" onchange="valChange(this)">
<option value="blank" selected disabled>Choose</option>
<option value="phone">Quoted</option>
<option value="email">Labour Only</option>
</select>
</div>
<div id="container">
<div class="field-container full clearfix field-hide" id="phone">
<label class="required">Phone</label>
<input type="text" name="fields[phone]" placeholder="enter phone number">
</div>
<div class="field-container full clearfix field-hide" id="email">
<label class="required">E-mail Address</label>
<input type="text" name="fields[email]" placeholder="enter email">
</div>
</div>
</body>
</html>
I have a page which contains a select box which is used to select a particular user. I also have two radiobuttons for selecting date range. This page is for generating user reports based on the selections.
At present when I select the user and preferred date ranges and clicks on submit button reports are generated properly but my selection in select box will be reset to default after submitting.Here My select box is populated from mysql table.
My task is to retain the select box value even after form submit. I have tired so many ways but nothing worked. Can anyone please help me out with this..
Here is my code:
HTML
<div class="box-container-toggle">
<form class="form-horizontal" name="reportform" id="reportform" action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST" >
<div class="box-content">
<fieldset>
<legend>Developer Reports</legend>
<div class="control-group">
<label class="control-label" for="select01">Select Developer</label>
<div class="controls">
<select id="select01" class="chzn-select" name="selectdev" onChange="getapp(this.value)">
<option value="">Select developer</option>
<?php
$qry="select user_id from tab_user_login where type='Developer' and status='approved'";
$res=mysql_query($qry);
while($row=mysql_fetch_array($res))
{
$devid=$row[0];
$qry1="select name from tab_user where user_id='$devid'";
$res1=mysql_query($qry1);
while($row1=mysql_fetch_array($res1))
{
?>
<option value="<?php echo $devid;?>" <?php if($dev!="") { if($dev==$devid) {echo 'selected'; } } ?> ><?php echo $row1[0];?></option>
<?php
}
}
?>
</select>
</div>
</div>
<h3> Select Date Range </h3>
<div class="control-group">
<div class="controls">
<label>
<input type="radio" name="selectdateradio" value="selectdaterange" onChange="enableblock()"> Select a Date Range
<div class="control-group" id="daterange" style="display:none">
<label class="control-label" for="select01">Select Date</label>
<div class="controls">
<select id="select01" name="selectdate" id="selectdate" onChange="getYesterdaysDate(this.value)">
<option value="Today" >Today</option>
<option value="Yesterday" >Yesterday</option>
<option value="Last 7 Days" >Last 7 Days</option>
<option value="Last 30 Days" >Last 30 Days</option>
<option value="This Week" >This Week</option>
<option value="This Month" >This Month</option>
<!--<option value="Last 6 Months" >Last 6 Months</option>-->
</select>
<input type="hidden" name="hiddendate" value="" >
<input type="hidden" name="hiddennext" value="" >
</div>
</div>
</label>
<label>
<input type="radio" name="selectdateradio" value="selectcustomdate" onChange="enablecustomblock()"> Select Custom Date
<div class="control-group" id="customdaterange" style="display:none">
<div class="control-group">
<label class="control-label" for="date01">Start input</label>
<div class="input-append date datepicker" data-date="2012-02-12" data-date-format="yyyy-mm-dd">
<input name="start_date" id="start_date" type="text"/><span class="add-on "><i class="icon-calendar"></i></span>
</div>
<!--<div class="controls">
<input type="text" class="input-xlarge datepicker" name="start_date" id="start_date" onChange="show()"/>
</div>-->
</div>
<div class="control-group">
<label class="control-label" for="date01">End Date</label>
<div class="input-append date datepicker" data-date="2012-02-12" data-date-format="yyyy-mm-dd">
<input name="end_date" id="start_date" type="text"/><span class="add-on "><i class="icon-calendar"></i></span>
</div>
<!-- <div class="controls">
<input type="text" class="input-xlarge datepicker" name="end_date" id="end_date" onChange="show()"/>
</div> -->
</div>
</div>
</label>
</div>
</div>
<div class="form-actions">
<input type="submit" class="btn btn-primary" name="submit" value="Run Reports" >
<button type="reset" class="btn">Reset</button>
</div>
</fieldset>
</div>
</form>
<?php
if(isset($_POST['submit']))
{
$dev=$_POST['selectdev'];
$qryy1="select name from tab_user where user_id='$dev'";
$ress1=mysql_query($qryy1);
$roww1=mysql_fetch_array($ress1);
$devname=$roww1[0];
$selected=$_POST['selectdateradio'];
$customstart=$_POST['start_date'];
$customend=$_POST['end_date'];
$postdate=$_POST['selectdate'];
$hide=$_POST['hiddendate'];
$hidden=date("Y-m-d", strtotime($hide));
$hide1=$_POST['hiddennext'];
$hidden1=date("Y-m-d", strtotime($hide1));
date_default_timezone_set("Asia/Kolkata");
$today=date('Y-m-d');
/*$click=0;
$imp=0;
$install=0;
$rev=00.00;
$active=0;*/
}
else
{
}
if($_POST['selectdev']=='')
$devname='All Developer';
if($_POST['selectdate']=='')
$postdate="";
?>
</div>
You must set posted variable before generate the select elements. then you can check the current developer
please try this code before generate select element (for example above the <div class="box-container-toggle"> ) :
<?php
if(isset($_POST['selectdev']) && $_POST['selectdev']!='') {
$selectdev = $_POST['selectdev'];
}
?>
Then Use your checking condition as below
<select id="select01" class="chzn-select" name="selectdev" onChange="getapp(this.value)">
<option value="">Select developer</option>
<?php
$qry="select user_id from tab_user_login where type='Developer' and status='approved'";
$res=mysql_query($qry);
while($row=mysql_fetch_array($res))
{
$devid=$row[0];
$qry1="select name from tab_user where user_id='$devid'";
$res1=mysql_query($qry1);
while($row1=mysql_fetch_array($res1))
{
?>
<option value="<?php echo $devid;?>" <?php if(isset($selectdev) && $selectdev==$devid) echo 'selected="selected"'; ?> ><?php echo $row1[0];?></option>
<?php
}
}
?>
</select>