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.
Related
I am setting up a conditional dropdown.
<div class="form-group">
<label asp-for="son" class="control-label"></label>
<select name="son" id="son">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option>Yes</option>
<option>No</option>
</select>
<span asp-validation-for="son" class="text-danger"></span>
</div>
Here is the dropdown for son, if it is NO then then the below 1st dropdown must come.
<div id="fatherNo" style="display: none" class="form-group">
<label asp-for="NO" class="control-label"></label>
<select name="NO">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option>Not_Applicable</option>
</select>
<span asp-validation-for="No" class="text-danger"></span>
</div>
If it is Yes in the son dropdown then then the below 2nd dropdown must come.
<div id="fatheryes" style="display: none" class="form-group">
<label asp-for="fatheryes" class="control-label"></label>
<select name="fatheryes">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option>working</option>
</select>
<span asp-validation-for="fatheryes" class="text-danger"></span>
</div>
as you mention jQuery in your tags, it is implemented by jQuery. Please use a dropdown
library for convenient.
Any way check snippet below:
(function ($){
'use strict';
$(function() {
var
namespace = 'customNamespace',
//-----
son = $('select[name="son"]'),
ddYes = $('#fatherNo'),
ddNo = $('#fatherYes');
var selected;
son.on('change.' + namespace, function () {
selected = $(this).find(':selected');
if(selected.val().toLowerCase() == 'yes') {
ddYes.show();
ddNo.hide();
} else if(selected.val().toLowerCase() == 'no') {
ddYes.hide();
ddNo.show();
} else {
ddYes.hide();
ddNo.hide();
}
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label asp-for="son" class="control-label"></label>
<select name="son" id="son">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<span asp-validation-for="son" class="text-danger"></span>
</div>
<div id="fatherNo" style="display: none" class="form-group">
<label asp-for="NO" class="control-label"></label>
<select name="NO">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option>Not_Applicable</option>
</select>
<span asp-validation-for="No" class="text-danger"></span>
</div>
<div id="fatherYes" style="display: none" class="form-group">
<label asp-for="fatheryes" class="control-label"></label>
<select name="fatheryes">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option>working</option>
</select>
<span asp-validation-for="fatheryes" class="text-danger"></span>
</div>
$("#son").change(function(){
var selected=$(this).children("option:selected").text();
if(selected.includes("Yes")){
$("fatheryes").css("display","block");
$("fatherNo").css("display","none");
}
else{
$("fatheryes").css("display","none");
$("fatherNo").css("display","block");
}
});
When son select is change, This function be play
I am trying to fetch Data when we select value.
Here Is Jquery and html code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
</script>
Now Here is Html.And This Code is working .
<select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>
But when I am trying to use this with dynamic PHP code this is not Working.
<div class="form-group">
<label for="address"> Select Product Kit</label>
<select class="form-group" name="product kit" id="colorselector">
#foreach($product as $productDeatails)
<option value='{{$productDeatails->id}}'>{{$productDeatails->title}}
</option>
#endforeach
</select>
<div id="{{$productDeatails->id}}" class="colors" style="display:none">{{$productDeatails->price}}
</div>
#endforeach
</select>
<div id="{{$productDeatails->id}}" class="colors" style="display:none">{{$productDeatails->price}}
As you can see, the foreach has ended before you could print the hidden div HTML. Due to this, $productDeatails is out of scope now and is no longer available.
A solution is to run the foreach again to print the hidden divs in HTML like below:
<div class="form-group">
<label for="address"> Select Product Kit</label>
<select class="form-group" name="product kit" id="colorselector">
#foreach($product as $productDetails)
<option value='{{ $productDetails->id }}'>{{ $productDetails->title}}</option>
#endforeach
</select>
#foreach($product as $productDetails)
<div id="{{ $productDetails->id}}" class="colors" style="display:none">{{ $productDetails->price}}
</div>
#endforeach
</div>
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 a form by multiple field. In this form i can add multiple group field by prese a button via javascript. To understand exactly what I mean please see fiddle:
https://jsfiddle.net/alihesari/060ym890/2/
How to get all added fields by php and insert theme in mysql after submit?
<fomr action="">
<button type="button" id="add_hotel" class="btn btn-primary">
Add Hotel</button>
<button type="button" id="remove_hotel" class="btn btn-warning">Remove Hotel</button>
<ul class="hotels_ul">
<li class="hotel_li">
<div class="row">
<div class="col-md-10">
<div class="form-group">
<label for="hotel_name[]">Hotel Name:</label>
<input type="text" name="hotel_name[]" id="hotel_name[]" class="form-control" placeholder="Hotel Name">
</div>
</div>
<div class="col-md-10">
<div class="form-group">
<label for="hotelRate[]">Hotel Rate: </label>
<select name="hotelRate[]" id="hotelRate[]" class="form-control">
<option value=""></option>
<option value="متل">متل</option>
<option value="یک ستاره">یک ستاره</option>
<option value="دو ستاره">دو ستاره</option>
<option value="سه ستاره">سه ستاره</option>
<option value="سه ستاره تاپ">سه ستاره تاپ</option>
<option value="چهار ستاره">چهار ستاره</option>
<option value="چهار ستاره تاپ">چهار ستاره تاپ</option>
<option value="پنج ستاره">پنج ستاره</option>
<option value="پنج ستاره تاپ">پنج ستاره تاپ</option>
<option value="هفت ستاره">هفت ستاره</option>
<option value="هتل آپارتمان">هتل آپارتمان</option>
</select>
</div>
</div>
<div class="col-md-10">
<div class="form-group">
<label for="room1[]">Room 1</label>
<input name="room1[]" id="room1[]" value="" class="form-control" placeholder="Price">
</div>
</div>
<div class="col-md-10">
<div class="form-group">
<label for="room2[]">Room 2</label>
<input name="room2[]" id="room2[]" value="" class="form-control" placeholder="Price">
</div>
</div>
<div class="col-md-10">
<div class="form-group">
<label for="room3[]">Room 3</label>
<input name="room3[]" id="room3[]" value="" class="form-control" placeholder="Price">
</div>
</div>
<div class="col-md-10">
<div class="form-group">
<label for="room4[]">Room 4</label>
<input name="room4[]" id="room4[]" value="" class="form-control" placeholder="Price">
</div>
</div>
<div class="col-md-20">
<div class="form-group">
<label for="desc[]">Description</label>
<textarea class="form-control" name="desc[]" id="desc[]" placeholder="Description"></textarea>
</div>
</div>
</div>
</li>
</ul>
<input type="submit" value="submit">
</form>
Here's an example of how you can handle the forms with both JS and PHP.
(if the JS example here doesn't work, see https://jsfiddle.net/n6kzxj4m/)
$(function() {
$(".add").on('click', function(e) {
$($(".hotel").last().clone(true, true)).insertAfter($(".hotel").last());
// reset new items
$(".hotel").last().find(':input:not(select)').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
$(".hotel").last().find('[select]').prop('selectedIndex', 0);
$(".hotel").last().find(':checkbox, :radio').prop('checked', false);
});
$(".remove").on('click', function(e) {
$(this).parents(".hotel").remove();
});
$("form").on('submit', function(e) {
e.preventDefault();
var $form = $(this);
$("#output").html($form.serializeJSON());
});
});
// plugin below only for debug on jsfiddle
/**
* jQuery serializeObject
* #copyright 2014, macek <paulmacek#gmail.com>
* #link https://github.com/macek/jquery-serialize-object
* #license BSD
* #version 2.4.5
*/
!function(e,r){if("function"==typeof define&&define.amd)define(["exports","jquery"],function(e,i){return r(e,i)});else if("undefined"!=typeof exports){var i=require("jquery");r(exports,i)}else r(e,e.jQuery||e.Zepto||e.ender||e.$)}(this,function(e,r){function i(e,i){function n(e,r,i){return e[r]=i,e}function a(e,r){for(var i,a=e.match(t.key);void 0!==(i=a.pop());)if(t.push.test(i)){var o=s(e.replace(/\[\]$/,""));r=n([],o,r)}else t.fixed.test(i)?r=n([],i,r):t.named.test(i)&&(r=n({},i,r));return r}function s(e){return void 0===h[e]&&(h[e]=0),h[e]++}function o(e){switch(r('[name="'+e.name+'"]',i).attr("type")){case"checkbox":return"on"===e.value?!0:e.value;default:return e.value}}function u(r){if(!t.validate.test(r.name))return this;var i=a(r.name,o(r));return c=e.extend(!0,c,i),this}function f(r){if(!e.isArray(r))throw new Error("formSerializer.addPairs expects an Array");for(var i=0,t=r.length;t>i;i++)this.addPair(r[i]);return this}function d(){return c}function l(){return JSON.stringify(d())}var c={},h={};this.addPair=u,this.addPairs=f,this.serialize=d,this.serializeJSON=l}var t={validate:/^[a-z_][a-z0-9_]*(?:\[(?:\d*|[a-z0-9_]+)\])*$/i,key:/[a-z0-9_]+|(?=\[\])/gi,push:/^$/,fixed:/^\d+$/,named:/^[a-z0-9_]+$/i};return i.patterns=t,i.serializeObject=function(){return this.length>1?new Error("jquery-serialize-object can only serialize one form at a time"):new i(r,this).addPairs(this.serializeArray()).serialize()},i.serializeJSON=function(){return this.length>1?new Error("jquery-serialize-object can only serialize one form at a time"):new i(r,this).addPairs(this.serializeArray()).serializeJSON()},"undefined"!=typeof r.fn&&(r.fn.serializeObject=i.serializeObject,r.fn.serializeJSON=i.serializeJSON),e.FormSerializer=i,i});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
<fieldset class="hotel">
<legend>Add a hotel</legend>
<p><label>Hotel: <input type="text" name="hotel[name][]" /></label></p>
<p><label>Rate: <select name="hotel[rate][]"><option>123</option><option>456</option></select></label></p>
<p><input type="button" class="add" value="Add hotel" /> <input type="button" class="remove" value="Remove this hotel" /></p>
</fieldset>
<p><input type="submit" value="Search!" /></p>
</form>
<pre id="output"></pre>
Then, for the PHP handling, you can do:
<?php
if(!empty($_POST)) {
// handle items. $key is the index.
foreach($_POST['hotel']['name'] as $key => $hotel) {
$name = $hotel;
$rate = $_POST['hotel']['rate'][$key];
echo "Name: $name<br>Rate: $rate<hr>";
}
}
NOTE: You may want to check to ensure the number of items in $_POST['hotel']['name'] match the number of items in $_POST['hotel']['rate']. This method may not be ideal, and you may want to assign an ID per hotel row item via JS. But this is a basic approach to your question.
I have a problem with a form that I made, it is working in Firefox but in IE and Chrome it doesnt! when I press the Submit button in IE and Chrome nothing happens! I didnt check this before because I didnt thought that I will have problems like this! I dont know what I am missing here! is there any known problem (bug)
the form:
<div id="Formulari">
<div class="WraperForForm">
<form action="index.php?menu=rezervimet&submenu=rezervo" method="post">
<div class="elementsLabelBox">
Emri:
</div>
<div class="elementsBox">
<input type="text" id="emri" name="emri">
</div>
<div class="elementsLabelBox">
Mbiemri:
</div>
<div class="elementsBox">
<input type="text" id="mbiemri" name="mbiemri">
</div>
<div class="elementsLabelBox">
Prej:
</div>
<div class="elementsBox">
<select class="selectDest" name="Prej" onChange="getState(this.value)">
<option></option>
'.funksionet::all_directions().'
</select>
</div>
<div class="elementsLabelBox">
Deri:
</div>
<div class="elementsBox">
<div id="statediv"><select class="selectDest" name="deri">
<option></option>
</select></div>
</div>
<div class="elementsLabelBox">
<form name="Data1Drejtim">
<label for="data1drejtim">Data e nisjes:</label>
</div>
<div class="elementsBox">
<input type="text" id="data1drejtim" name="data1drejtim">
<script language="JavaScript">
// whole calendar template can be redefined per individual calendar
var A_CALTPL = {
\'months\' : [\'Janar\', \'Shkurt\', \'Mars\', \'Prill\', \'Maj\', \'Qershor\', \'Korrik\', \'Gusht\', \'Shtator\', \'Tetor\', \'Nentor\', \'Dhjetor\'],
\'weekdays\' : [\'Di\', \'He\', \'Ma\', \'Me\', \'Ej\', \'Pr\', \'Sh\'],
\'yearscroll\': true,
\'weekstart\': 0,
\'centyear\' : 70,
\'imgpath\' : \'images/\'
}
new tcal ({
// if referenced by ID then form name is not required
\'controlname\': \'data1drejtim\'
}, A_CALTPL);
</script>
</div>
<!-- ___________________ RETURN DATE _____________________________________ -->
<div id="hideThis">
<div class="elementsLabelBox">
<label for="dataKthyese">Data kthyese:</label>
</div>
<div class="elementsBox">
<input type="text" id="dataKthyese" name="dataKthyese">
<script language="JavaScript">
// whole calendar template can be redefined per individual calendar
var A_CALTPL = {
\'months\' : [\'Janar\', \'Shkurt\', \'Mars\', \'Prill\', \'Maj\', \'Qershor\', \'Korrik\', \'Gusht\', \'Shtator\', \'Tetor\', \'Nentor\', \'Dhjetor\'],
\'weekdays\' : [\'Di\', \'He\', \'Ma\', \'Me\', \'Ej\', \'Pr\', \'Sh\'],
\'yearscroll\': true,
\'weekstart\': 0,
\'centyear\' : 70,
\'imgpath\' : \'images/\'
}
new tcal ({
// if referenced by ID then form name is not required
\'controlname\': \'dataKthyese\'
}, A_CALTPL);
</script>
</form>
</div>
</div>
<div class="elementsLabelBox">
Persona:
</div>
<div class="elementsBox">
<select name="persona">
<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="6">6</option>
</select>
</div>
<!-- <tr>
<td width="30" >Fëmij:</td>
<td><input type="text" size="3" name="femij"></td>
</tr> -->
<div class="elementsBox">
</div>
<div class="elementsLabelBox">
</div>
<div class="elementsLabelBox">
<label for="1drejtim">Një drejtim</label>
<input type="radio" id="1drejtim" name="drejtimi" value="një drejtim" onclick="toggleVisibility(\'hideThis\',0)">
<br/>
<label for="1drejtim">Kthyese</label>
<input type="radio" id="kthyese" name="drejtimi" checked="checked" value="kthyese" onclick="toggleVisibility(\'hideThis\',1)">
</div>
<input style="float:right;margin:15px 49px 0 0;" type="submit" value="Rezervo" name="rezervo" />
</form><!-- end of the reservation form-->
</div>
</div><!-- end of Formulari-->
Thank you for your time.
You have two <form> tags in this document, and the one nested closest to the submit button has no action or method attributes. IE and Chrome are correct to do nothing since this form has no action to associate with submission.