From dropdownlist user can select option and click button to add that option to textbox. At the same time I want to add that that text to hidden field joined each option with "|" deliminator.
<select id="services" multiple>
<option>Mobile</option>
<option>Computer</option>
<option>Electronic</option>
</select>
$( "#services-add" ).click(function() {
//here when this button clicked I want to add options to hidden field(already created) as string with deliminator
}
Here is hidden field that I want to append text
<input type="hidden" name="value" value="" />
Use map to collect all selected data into array and stored to hidden field using attr
$("#services-add").click(function () {
var val = $("#services option:selected").map(function () {
return $(this).text();
}).get();
$("[type=hidden][name=value]").attr("value", val);
});
DEMO
$( "#services-add" ).click(function()
{
var insertText =$("#services option:selected").map(function () {
return this.value;
}).get().join('|');
$('#services-view').val(insertText);
});
Demo:
http://jsfiddle.net/Npm6w/1/
Related
I am working in wordpress and I have created a custom plugin.In which I have get multiple data from the database and my code is like this.
<?php
foreach($result as $res)
{
?>
<input type="hidden" class="status" value="<?php echo $res->review_status; ?>" />
<button class="aprove" value="<?php echo $res->review_id; ?>">Aprove</button>
<?php
}
?>
Now, I want to get hidden field value in jQuery. My jQuery code is like this:
jQuery(".aprove").click(function(){
var status = jQuery('.status').val();
alert(status);
});
When I click on button then it shows only first value of hidden field. For instance, the fist hidden value is 1 and second value is 0 then it display only fist value 1 for both button. So what shold I have to do to get different hidden value?
Try :
jQuery(".aprove").click(function(){
jQuery('.status').each(function(){
var status = jQuery(this).val();
alert(status);
});
});
.each will loop through all the classes and it will give alert every value of it.
JS Fiddel Demo
Updated
Updated Demo
Here is your answer. for each button the value taken would be from the input element before the button element
jQuery(".aprove").click(function(){
var status = jQuery(this).prev('.status').val();
alert(status);
});
var status = jQuery('.status').val();
alert(status);
this will get the value of element first found on page and will return the result,
if you want all the input values use
jquery each() - https://api.jquery.com/jquery.each/
jQuery('.status').each(function(){
alert($(this).val());
});
// this will give you all the values you want, one by one
you can use .map like this to get what you want:
$(document).ready(function(){
var status=[]
jQuery(".aprove").click(function(){
status = $(".status").map(function() {
return $(this).val();
}).get();
alert(status);//array of values
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" class="status" value="0" />
<input type="hidden" class="status" value="1" />
<button class="aprove" value="">Aprove</button>
I have an auto-complete textbox where user can insert an actor name and it works fine. There is a button "browse movies" which should populate a dynamic dropdown showing list of movies by the actor that user has inserted in the text-box. Also, there is another button "add to the list" that if user click on it, the selected options of this dropdown (movies) whould be added to another dropdown which shows all selected movies by user.
Problem
I could populate dropdown dynamically when user clicked the button, also I could move the selected options to the new dropdown (selecteditems), but the problem is that I want to show this dropdown in a new pop-up window (not in the same page where user insert in the text-box). I really don't know how to do it.. should I make the ajax call in target.html (the new pop up window)? I appreciate if someone can let me know how I can do this.
This is what I tried:
<script type="text/javascript">
$(document).ready(function () {
$("#tags").autocomplete({
source: "actorsauto.php",
minLength: 2,
select: function (event, ui){
$("#tags").on('autocompletechange change', function (){
var selectedVal = $(this).val(); //this will be your selected value from autocomplete
// Here goes your ajax call.
$.post("actions.php", {q: selectedVal}, function (response){
console.log(response);
$("#movieName").html(response).show();
});
}).change();
}
});
$('#btnRight').on('click', function (e) {
var selectedOpts = $('#movieName option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#selectedItems').append($(selectedOpts).clone());
$(selectedOpts).remove();
$("#movieName").hide();
$("#tags").val("");
e.preventDefault();
});
function openWindow() {
window.open("target.html","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<html>
<body>
<input type="textbox" name= "tag" id="tags" style="display:none;" placeholder="Enter an actor/actress name here" />
<input type=button onclick="javascript:openWindow()" value="Browse movies by this actor">
<select id="movieName" name="movieName[]" multiple="multiple" width="200px" size="10px" style=display:none;>
<input type="button" value=">> Add to selected list >>" id="btnRight" style="display:none;" />
<select id="selectedItems" name="selectedItems[]" multiple="multiple" style="width:200px; size:10px;">
</select>
</select>
</body>
</html>
You could try something like this. Sorry for any mistakes or if it's rubbish
target.html
// this goes in target.html
$('#tags').autocomplete({
source: "actorsauto.php",
minLength: 2,
select: function (event, ui) {
$("#tags").on('autocompletechange change', function () {
var selectedVal = $(this).val(); //this will be your selected value from autocomplete
// Here goes your ajax call.
// here's some magic. using window.opener allows you
// to access variables and functions defined in the parent window.
window.opener.getMovies(selectedVal);
}).change();
}
});
page.html
// this stays in your parent window
function getMovies(value) {
$.post("actions.php", { q: value}, function (response) {
console.log(response);
$("#movieName").html(response).show();
});
}
I have here Jquery code with ajax/json. First i will discuss the flow. I have 3 textboxes, my item textbox pass it's value to auto-complete.php through ajax to get it's details. The return value is post or place into mode textbox. And if the post value is 1 or 2 the number textbox should change is css into display:none. But the problem this not working, I set the number textbox into readonly. The change function is working when I change directly the value of number textbox. Why isn't working when the value is post value?
<script>
$(document).ready(function() {
$("#number").css("display","none");
$(document).on('change','#mode',function(){
if($("#mode").val() =="1"){
$("#number").css("display","");
} else if($("#mode").val() =="2"){
$("#number").css("display","");
} else {
$("#number").css("display","none");
}
return true;
});
});
</script>
<input name="item" id="item" type="text"/>
<input name="mode" id="mode" type="text"/>
<input name="number" id="number" type="text" readonly />
<script type="text/javascript">
$(document).ready(function()
{
$('#item').change(function()
{
var item= $("#item").val();
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"item="+item,
dataType:'json',
type:'POST',
success:function(data){
var mode=data.mode;
//send to element ID
$('#mode').val(mode);
}
});
return false;
});
});
</script>
When you change the value using JavaScript it won't trigger events.
A simple fix is to trigger the event yourself after you update the value.
success:function(data){
var mode=data.mode;
//send to element ID
$('#mode').val(mode).change();
/* OR */
$('#mode').val(mode).trigger('change');
}
I have a WordPress Advanced search that when a user selects the applicable category from the dropdown menu it navigates them to that suggested category. I'd like for it to take them to that category on submit instead of it doing it automatically once the option is selected.
Here is my JS code:
$(function(){ // bind change event to select
$('#dynamic_select').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url;
} return false;
});
});
$(function(){ // bind change event to select
$('#dynamic_select2').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url;
} return false;
});
});
And Here is my HTML:
<form class="treatment-form-procedure">
<label class="selectstyle" id="treatment-procedure-select" style="margin-top:10px;">
<select id="dynamic_select">
<option selected>Select One</option>
<option class="level-0" value="<?php bloginfo('url'); ?>/treatment/medical-dermatology/">Medical Dermatology</option>
</select>
</label>
<input type="submit" value="Search" id="treatmentSubmit" style="padding: 10px 7px;" />
Simply remove the javascript handler for the dynamic_select, and the form will no longer submit on change . . . the code you can remove or comment out is:
$(function(){ // bind change event to select
$('#dynamic_select').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url;
} return false;
});
});
Capture the form submit.
$('form.treatment-form-procedure').on('submit', function (event) {
event.preventDefault();
window.location = $('#dynamic_select').val();
});
OR (and I like this better) update the form action:
$('#dynamic_select').on('change', function () {
$(this).closest('form').attr('action', $(this).val());
});
... so the form submits to that url.
I'm trying to get a list going.
I have an empty input box in which I want to store a list: Mary, Kate, Brock
Now I have a select list with those three names in it. I want to know how can I transfer the name clicked from the select list into the input box. If I click a second name, add a comma to separate the one from the previous one.
Appreciate your help. I have no idea to where/how to even start this :(
How about:
<input type="text" id="name" name="name" />
<select name="names" id="names">
<option value="Mary">Mary</option>
<option value="Kate">Kate</option>
<option value="Brock">Brock</option>
</select>
<script>
$(document).ready(function() {
$("#names").change(function() {
name = $(this).val();
current = $("#name").val();
if (!$("#name").val()) {
$("#name").val(name);
} else {
if (current.indexOf(name) == -1) {
$("#name").val(current + ', ' + name);
}
}
});
});
</script>
Adds new name to end of list, only adds a comma when there is more than one name and duplicates are now allowed.
Well you can get the value from an input element with $('#the_id').val();, and you can manipulate the value of an input element in the same way: $('#the_id').val('new value');. Combine that with the .click handler and you should be all set:
$('#selector').click(function(){
var $names = $('#names')
$names.val($names.val() + ', ' + $(this).val());
});
Try use change event:
$('#listbox').change(function(){
var selectedName = $('#listbox option[value='+$(this).val()+']').text();
$('#input-for-insert').append(selectedName);
});
I think you make yourself comma separation)
<input type="text" id="name" name="name" />
<select name="names" id="names">
<option value="Mary">Mary</option>
<option value="Kate">Kate</option>
<option value="Brock">Brock</option>
</select>
<script>
$(document).ready(function()
{
// When the names selection changes
$("#names").change(function()
{
// Get the new name from this selection list
newName = $(this).val();
// Get any names currently in the input box
currentName = $("#name").val();
// Change the value of the name box by adding the newName followed by a comma
// followed by the current names
$("#name").val(newName + ", " + currentName);
});
}
</script>