I am having trouble to store all the selected options as a list, my code only sotres the first selected option and ignores the rest. How can I solve this problems?
<label for="itemlist">Items</label>
<br>
<select id="itemlist" name="itemlist" multiple="multiple" required>
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script type="text/javascript">
$(function() {
$('#itemlist').change(function() {
console.log($(this).val());
}).multipleSelect({
width: '100%'
});
});
</script>
Gus,
As you are using it jQuery already $('selector').val(), this will retreive (comma separated) all values selected on the select tag.
Here is an example I've wrote for you using the .on('click', function).
FIDDLE
Hope this helps!
Related
I'm trying to do that this code:
$(document).ready(function () {
$('select').change(function () {
alert(this.value);
});
Alerts a message but only when one of the various dropdowns onscreen is selected. But it works whenever I pick ANY dropdown. How can I do it so that it only works with one specific dropdown?
Simply give your respective select tag an id, then use that id for your selector in your jQuery:
$('#select1').change(function ()
{
alert(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
<option value="">--Please Choose--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="select2">
<option value="">--Please Choose--</option>
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cherry</option>
</select>
I have a select box:
<select id="steps_number">
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Now, if the user selects "4", then 4 input boxes needed to be added to the page, if he changes his selection to 8, 8 input boxes need to be there, an so on...
And also, the input boxes names are important, I'm gonna send the form values to another page for processing and inserting the data into db, how I could know/get the newly made input boxes names?
Very simple example (also demonstrated here):
// bind to when the drop-down list changes
$('#steps_number').change(function(){
// find out the number to display
var count = $(this).val();
// Try to keep the fields already on the page. Remove anything
// that exceeds the count
$('#steps input:gt('+(count-1)+')').remove();
// But if it doesn't have enough, add more
for (var i = $('#steps input').length; i < count; i++){
$('<input>',{type:'text',id:'step'+(i+1),name='step'+(i+1)}).appendTo('#steps');
}
});
This assumes you want the following structure for your inputs:
<div id="steps">
<input type="text" id="step1" name="step1" />
<input type="text" id="step2" name="step2" />
<input type="text" id="step3" name="step3" />
<!-- .... -->
</div>
And with regards to server-side, you'll now see the inputs using $_REQUEST['step1'], $_REQUEST['step2'], etc. Or, depending on your form method, they'll show up in $_POST or $_GET as well.
I wrote for you some basic functionality. But you need to extend it for your needs:
$('#steps_number').change(function(){
for(var i=0; i < parseInt($(this).val()); i++) {
$('body').append('<input type="text" name="someinput' + i + '">');
}
});
See on jsFiddle
You could do something like this:
<html>
<head>
<title>Test</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script language="javascript">
$(document).ready(function(){
alert("ok");
$("#steps_number").change(function() {
var inputNum = $("#steps_number").val();
var inputCode = "";
for(i=0; i<inputNum; i++) {
inputCode += "<p class=\"inputBox\"><input id=\"inputBox_" + i + "\" size=\"20\" type=\"text\"></p>"
}
$("#inputBoxes").html(inputCode);
});
});
</script>
</head>
<body>
<form id="testform">
<select id="steps_number">
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="inputBoxes">
</div>
</form>
</body>
</html>
Here is my solution:
<select id="steps_number">
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("#steps_number").on("change", function() {
var count = $(this).val()
$("#container").html("")
for (i=0;i<count;i++) {
$("<input>").appendTo("#container");
$("<br>").appendTo("#container")
}
})
</script>
I'm trying to get the javascript below to automatically update the input field (centimeters) below when a user select there height and inches. It should auto calculate the centimeters, and its not working.
<script type="text/javascript">
updateHeights:function(type){
if(type=='english'){
var feet=parseInt($F('feet'));
var inches=parseInt($F('inches'));
var cm=((feet*12+inches)*2.54).round();
$('centimeters').value=(feet?cm:'');
}
else
{
var cm=parseInt($F('centimeters'))||183;
if(cm>241||cm<91)cm=183;
var inches_total=(cm*0.3937).round();
var feet=(inches_total/12).floor();
var inches=inches_total%12;
$('feet').value=feet;
$('inches').value=inches;
$('centimeters').value=cm;
}
}
</script>
<label>Height:</label>
<select id="feet" name="add[feet]" onchange="Profile.updateHeights('english')">
<option value="">—</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
</select>ft.
<select id="inches" name="add[inch]" onchange="Profile.updateHeights('english')">
<option value="0">0</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="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>in. or
<input id="centimeters" type="text" name="centimeters" maxlength="3" value="178" onchange="Profile.updateHeights('metric')" style="width: 30px;" />
centimeters
Assuming that this is just an excerpt from your entire code, Profile is a legitimate class name, and $F is defined somewhere, you're missing a few things.
First off, you're selecting by ID, so you need to include the # sign in your selectors.
Second, you're trying to parse an object as an integer. You need to use parseInt($("#feet").val()) to select the value contained in the input. Likewise, to set a value, you're going to want to use $("#centimeters").val(cm);
I am beginner with jQuery. I want to use drop down in my page. Depending upon the selection of drop down value, no of text boxes should appear in page. Suppose I selected 8 than 8 text boxes appear and if then I select 4 than rest four should be removed. Please give me idea how to do it using jQuery.
jQuery('#select').change(function() {
var num = jQuery(this).val();
jQuery('.textboxes').remove();
for(i=0;i<num;i++)
{
jQuery("<input type='text' class='textboxes' />").appendTo("body");
}
});
Here select is the id of the selectbox.
Rahul you are asking for an idea so here it is. Using jQuery you can find the value of a drop down or select element and use that value to simply append new text boxes. I would suggest not to create elements but insert html for those elements.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<select name="select" id="select">
<option value="0">0</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="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="textbox-container"></div>
<script>
$(document).ready(function() {
$('#select').change(function() {
var num = $('#select').val();
$('.textboxes').remove();
var textBoxesStr = '';
for (i = 0; i < num; i++) {
textBoxesStr = textBoxesStr + "<input type='text' class='textboxes' />";
}
$("#textbox-container").append(textBoxesStr);
});
});
</script>
Code given above works for me.
<html>
<head>
<title>Dynamic Form</title>
<script language="javascript">
function changeIt()
{
document.getElementById("my_div").innerHTML="";
var num=document.getElementById("select").options[document.getElementById("select").selectedIndex].value;
for(i=0;i<num;i++)
{
my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext'+ i>"
}
}
</script>
</head>
<body>
<form name="form" action="post" method="">
<select name="select" id="select">
<option value="0">0</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="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="button" value="test" onclick="changeIt()">
<div id="my_div"></div>
</form>
</body>
</html>
I have an external Javascript file and i am trying to alert the value of select tag.
My <select> code looks like this:
<select id="vote">
<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>
</select>
<input type="button" value="vote" onclick="castvote();">
and the Javascript (which is external):
function castvote()
{
alert(document.vote.options[document.vote.selectedIndex].value);
}
But I get the error "document.vote is undefined".
Can someone help me with this.
Best
Zeeshan
If selecting by Id, you should use :
function castvote() {
var sel = document.getElementById("vote");
alert(sel.options[sel.selectedIndex].value);
}
Easy way, change your code so that your form field has a name attribute:
<select name="vote" id="vote">
<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>
</select>
<input type="button" value="vote" onclick="castvote();">
Better way, change your javascript so it is retreiving the select box by its ID rather than through the document object:
function castvote() {
var mySelect = document.getElementById("vote");
alert(mySelect.options[mySelect.selectedIndex].value);
}