I will have html like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<ul class="select_list">
<li id="s1" class="chosen">Apple</li>
<li id="s2" style="display: none;">Peach</li>
<li id="s3" style="display: none;">Plum</li>
<li id="s4" class="chosen">Banana</li>
<li id="s5" style="display: none;">Grapes</li>
<li id="s6" class="chosen">Pear</li>
<li id="s7" style="display: none;">Kiwi</li>
</ul>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
how can I use $_POST to get the ids of the elements with class="chosen"
There is no "direct" way to do this. Forms POST data from input, textarea, and button elements, possibly a few more I'm forgetting. You will have to use JavaScript to "transcribe" the li elements to one of these, possibly an <input type="hidden">. For instance:
var form = $formselector
form.onsubmit = function() {
var chosen = form.getElementsByClassName("chosen");
for (var i=0; i<chosen.length; i++) {
form.innerHTML += '<input type="hidden" name="chosen[]" value="'+chosen[i].id+'">';
}
}
This should loop through your form, finding all elements with class chosen and adding a hidden input with the ID of that element. Note that you might need to change the name of the hidden input element to match your server-side code. Also make sure you update $formselector to actually match your form.
You need to create a hidden input and assign value to it by javascript or jquery.
<form class="form-horizontal" role="form">
<input type="hidden" name="my_data" value="" />
<div class="form-group">
<ul class="select_list">
<li id="s1" class="chosen">Apple</li>
<li id="s2" style="display: none;">Peach</li>
<li id="s3" style="display: none;">Plum</li>
<li id="s4" class="chosen">Banana</li>
<li id="s5" style="display: none;">Grapes</li>
<li id="s6" class="chosen">Pear</li>
<li id="s7" style="display: none;">Kiwi</li>
</ul>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
$('.select_list').change(function(){
$('.my_data').val($(this).val());
});
</script>
Try this...
I figured it out:
var value = [];
$('.chosen').each(function(){
value.push(this.id.substring(1));
});
$('.form-horizontal').submit(function(){
$('.form-horizontal').append('<input type="hidden" value="' + value +'"/>');
}
Related
When I click on Order Now button (<a class="btn btn-lp btn-popup" data-popup-open="popup-1" href="#">Order Now</a>) the popup appears with the form buttons that will send data to the server.
<div class="section-pick-your-box section-choose-a-plan">
<ul class="content">
<li>
<div class="wrapper">
<a class="btn btn-lp btn-popup" data-popup-open="popup-1" href="#">Order Now</a>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<form action="/cart/add" method="post" novalidate enctype="multipart/form-data" data-productid="">
<input type="hidden" name="properties[shipping_interval_frequency]" value="1">
<input type="hidden" name="properties[shipping_interval_unit_type]" value="Months">
<input type="hidden" name="id" value="12673316716586">
<input type="hidden" name="properties[subscription_id]" value="106203">
<input type="hidden" name="purchase_type" value="autodeliver">
<div class="price-button-wrap">
<a class="btn btn-lp buy-now" href="/cart">Wrapped</a>
</div>
</form>
<form action="/cart/add" method="post" novalidate enctype="multipart/form-data" data-productid="">
<input type="hidden" name="properties[shipping_interval_frequency]" value="1">
<input type="hidden" name="properties[shipping_interval_unit_type]" value="Months">
<input type="hidden" name="id" value="12673316683818">
<input type="hidden" name="properties[subscription_id]" value="106203">
<input type="hidden" name="purchase_type" value="autodeliver">
<div class="price-button-wrap">
<a class="btn btn-lp buy-now" href="/cart">Unwrapped</a>
</div>
</form>
<p><a data-popup-close="popup-1" href="#">Close</a></p>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
</div>
</li>
</ul>
</div>
The problem with the code above is that it does not recognize the parent form or closest form element from which the button was triggered.
This is my current jquery code below to get the parent form element:
$('.section-pick-your-box .content > li .popup-inner > form .buy-now').click(function(e) {
e.preventDefault();
var $data = $(this).closest('li').find('form').serialize();
console.log($data);
});
When I console.log, I am getting the data of both forms.
Any help is appreciated.
Since you have multiple forms inside an li, so instead of closest li, check for closest form
var $data = $(this).closest('form').serialize();
please I want to apply fadeToggle for each button but it does not work with this method ,I try to apply with this How to use javascript variables in jquery selectors but not successful
this is Code HTML
<div id="ajouter" class="dropdown">
<ul>
<li>
<button class="projetbutton">Projet</button>
<form class="projet" style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
<li>
<button class="famillebutton">Famille</button>
<form class="famille" style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
</ul>
</div>
and this is script apply for the buttons
<script>
var classElement = ["projet", "famille"];
var button = "button";
for (var i = 0; i < classElement.length; i++) {
var classbutton = classElement[i].concat(button);
$(document).ready(function () {
$('.classbutton').click(function () {
$(".classElement[i]").fadeToggle();
});
});
}
</script>
Please if there is another method to do that job.
You can take advantage of the relation ship between element and various DOM traversal methods available to target element and then perform desired operation.
Associate the click handler using a common class, here used classbutton with the elements, then used .next() to get the form element.
$(document).ready(function() {
$('.classbutton').click(function() {
$(this).next().fadeToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajouter" class="dropdown">
<ul>
<li>
<button type="button" class="classbutton">Projet</button>
<form style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
<li>
<button type="button" class="classbutton">Famille</button>
<form style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
</ul>
</div>
I have a list (style taken from bootstrap) of elements, to which I want to add some more elements using text input. Here is my code-
<div class="col-lg-6">
<div class="input-group">
<input type="text" id = "input" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id = "add" >Add</button>
</span>
</div><!-- /input-group -->
<form>
<ul class="list-group" id = "tagList">
<li class="list-group-item"> <b>Tags </b></li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Orange</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Pear</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Banana</li>
</ul>
</form>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('<li />', {html: text}).appendTo('ul.tagList')
}
});
</script>
I can get the code to work with a simpler list, but not with this one. Can anyone spot why not?
Your li's are not closed:
<li class="list-group-item" <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
Should be:
<li class="list-group-item"><span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
Always funny to spot such issues once you placed the code into the code highlighting here on SO.
In order for your javascript to work, you might use the following: http://jsfiddle.net/jX2K3/21/
try following code..
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('ul').append('<li class="list-group-item"><span class ="input-group-addon"> <input type="radio"> </span>'+text+'</li>');
}
});
jsFiddle
When clicking on an element, I want to copy the value from another element to the closest input field to the clicked element.
For example: In the following code, when I click on the span with class .add, I want to display the div .values, which contains list items. Then on clicking on any of the list item, I want to copy its class to the input field which was clicked.
I'm having problem with the step 3, I'm unable to find out which element was clicked so I cannot send the value there. How can I pass the reference of the clicked element, so that it knows where to send back the value?
Here's what I'm trying:
HTML:
<div class="wrap">
<div class="item">
<label>Item 1 </label>
<span class="add">Add</span>
<input type="text" name="item1" />
</div>
<div class="item">
<label>Item 2 </label>
<span class="add">Add</span>
<input type="text" name="item2" />
</div>
</div>
<div class="values">
<ul>
<li class="one">One </li>
<li class="two">Two </li>
<li class="three">Three </li>
</ul>
</div>
jQuery:
$(document).on('click','.add',function(e){
$(".values").css("display","block");
});
$(document).on('click','.values ul li',function(e){
var value = $(this).attr('class');
$(this).closest(".item").find("input[type=text]").val(value);
});
Demo:
http://jsfiddle.net/YJE8d/
You can add class to the .add text and search for that to add value to the input
$(document).on('click','.add',function(e){
$(".values").css("display","block");
$(this).closest('.wrap').find('.add').removeClass('clicked');
$(this).addClass('clicked');
});
$(document).on('click','.values ul li',function(e){
var value = $(this).attr('class');
$('.clicked').next().val(value);
});
.closest() searches for the closest parent element therefore it wont work the way you tried to use it
DEMO
$(document).on('click','.add',function(e){
$(".values").css("display","block");
$(this).closest(".item").find("input[type=text]").addClass("active");
});
$(document).on('click','.values ul li',function(e){
var value = $(this).attr('class');
$(".active").val(value);
$(".active").removeClass("active");
});
Try this,
HTML
<div class="wrap">
<div class="item" id="first">
<label>Item 1 </label>
<span class="add">Add</span>
<input type="text" name="item1" />
</div>
<div class="item" id="second">
<label>Item 2 </label>
<span class="add">Add</span>
<input type="text" name="item2" />
</div>
</div>
<div class="values">
<ul>
<li class="one">One </li>
<li class="two">Two </li>
<li class="three">Three </li>
</ul>
</div>
SCRIPT
$(document).on('click','.add',function(e){
itemData=$(this).closest('.item').attr('id');
$(".values").css("display","block").data('item',itemData);
});
$(document).on('click','.values ul li',function(e){
var value = $(this).attr('class');
d=$('.values').data('item');
$('input[type="text"]').val('');
$('#'+d).find("input[type=text]").val(value);
});
Demo
I'm using jQuery validation to validate a form. The form looks like the following:
<div id="app_install_off" class="edit-ph mtop20"><h3 class="stakes-form-title-saved">APP INSTALL <span class="blue-txt"><!--(saved)--></span></h3><img border="0" align="right" style="margin:0 15px 0 0" src="../img/edit-button.png"></div>
<div id="app_install_on" class="appinstall-ph">
<form novalidate="novalidate" action="/sweepstakes/campaignstep2" id="AppInstallTaskCampaignstep2Form" method="post" accept-charset="utf-8"><div style="display:none;"><input name="_method" value="POST" type="hidden"></div> <div class="form-header"><h3 class="stakes-form-title">APP INSTALL <span class="greentext">(not saved)</span></h3></div>
<div class="form-content-area">
<div class="app-field-ph">
<ul class="apps-form">
<li class="f-label">App Name</li>
<li class="input-ph"><div class="input text"><input name="data[AppInstallTask][task_title]" class="appsform-field" id="AppInstallTaskTaskTitle" border="0" type="text"></div></li>
</ul>
<ul class="apps-form whitebg">
<li class="f-label">Package Name</li>
<li class="input-ph"><div class="input text"><input name="data[AppInstallTask][app_package_name]" class="appsform-field" value="Example: Com.MyAppPackage" id="AppInstallTaskAppPackageName" border="0" type="text"></div></li>
</ul>
<ul class="apps-form">
<li class="f-label">Market URL</li>
<li class="input-ph"><div class="input text"><input name="data[AppInstallTask][web_url]" class="appsform-field" id="AppInstallTaskWebUrl" border="0" type="text"></div></li>
</ul>
</div>
<div class="save-clear-ph">
<img src="../img/clear-button.png" border="0">
<img id="app_install_submit" src="../img/save-button.png" border="0">
<input name="data[AppInstallTask][task_type]" value="Download an App" id="AppInstallTaskTaskType" type="hidden"> </div>
</div>
</form>
</div>
</div>
<!-- The next similar block -->
<div id="like_fb_on" class="appinstall-ph mtop20">
<form action="/sweepstakes/campaignstep2" id="LikeFbTaskCampaignstep2Form" enctype="multipart/form-data" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div> <div class="form-header"><h3 class="stakes-form-title">LIKE FACEBOOK PAGE <span class="greentext">(not saved)</span></h3></div>
<div class="form-content-area">
<div class="app-field-ph">
<ul class="apps-form">
<li class="f-label">Campaign Option Name</li>
<li class="input-ph"><div class="input text"><input name="data[LikeFbTask][task_title]" class="appsform-field" border="0" type="text" id="LikeFbTaskTaskTitle"/></div></li>
</ul>
<ul class="apps-form whitebg">
<li class="f-label">Facebook Page URL</li>
<li class="input-ph"><div class="input text"><input name="data[LikeFbTask][web_url]" class="appsform-field" border="0" type="text" id="LikeFbTaskWebUrl"/></div></li>
</ul>
</div>
<div class="save-clear-ph">
<img src="../img/clear-button.png" border="0">
<img src="../img/save-button.png" border="0">
<input type="hidden" name="data[LikeFbTask][task_type]" value="Like Facebook Page" id="LikeFbTaskTaskType"/> </div>
</div>
</form>
</div>
On the click of the image (id = "app_install_submit"), I'm submitting the form. jQuery validation is implemented as follows:
$(document).ready(function() {
jQuery('#AppInstallTaskCampaignstep2Form').validate({
rules: {
"data[AppInstallTask][task_title]": {
required: true
},
customMessage: "required",
}
});
});
The click event is as following:
$('#app_install_submit').click(function(){
$('#AppInstallTaskCampaignstep2Form').submit();
});
Which is wrapped inside ready() as well.
This works for the first time, highlights the field with error class and message is appended in label. Any further clicks produce this 'nightmare' error:
TypeError: 'undefined' is not a function (evaluating 'this.each')
Also, while the form actually gets validated properly, it refuses to submit.
jQuery version: v1.10.1
Validate plugin version: 1.9.0
Notes: There are other forms in this page, they have separate id, field names are not conflicting either. Also I've checked properly, there are no overlaps of forms. To add on to more frustration, this same set of files works in other pages of my site.
Looking forward to a pointer, where I might be going wrong.
Many thanks in advance.