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>
Related
I am trying to compute the total price of items in a cart in Javascript. This is by multiplying the quantity by the unit price and then getting the grand total.
The cart is populated by a PHP while loop so I am using class names.
The quantity field is a dropdown/select and the price field is a span.
function sum() {
var sum = 0;
var q = 0;
var s = 0;
$('.itPrice,.qtys').each(function() {
q = $('.qtys').text() || 0; //quantity
s = $('.itPrice').text() || 0; //unit price
sum = sum + (q * s);
});
//display total
$("#sumT").text(sum);
}
<!-- inside PHP while loop -->
<label>Price: </label>
<span class="itPrice"><b>'.$row["price"].'</b></span>
<label>Quantity: </label>
<Select id="qty" name="qty" class="qtys">
<option value="1" selected>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>
<span id="sumT" name="sumT">*sum goes here*</span>
The output is NaN (Not a Number). Where am I going wrong? There is also a problem with the HTML select, it's not picking the selected option, only working with option '1'.
You can select both related elements, as two collections of object, an iterate one collection (while using the array index to refer to the other); that way you can get the quantity and the price.
To get a select selected element, use jquery val() function instead of text();
As a side note, you should not use duplicate id's or names for inputs in yout html. If you want an input with the same name, you can use qty[] for example.
function sum() {
var sum = 0, // Total sum
it = $('.itPrice'), // All the .itPrice elements
qty = $('.qtys'); // All the .qtys elements
// For each .itPrice element
it.each(function(i, e) {
var current = $(this), // Gets the current .itPrice element
related = $(qty[i]); // Get the related .qtys element, by array index
// Sum
sum += Number(current.find('b').text()) * related.val();
});
// return total
return sum;
}
$('#calc').click(function() {
console.log(sum());
});
console.log(sum());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Price: </label>
<span class="itPrice"><b>100</b></span>
<label>Quantity: </label>
<Select id="qty" name="qty" class="qtys">
<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>
<br>
<br>
<label>Price: </label>
<span class="itPrice"><b>200</b></span>
<label>Quantity: </label>
<Select id="qty" name="qty" class="qtys">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>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>
<br>
<br>
<a id="calc" href="javascript:;">Get total</a>
i got a for loop and i would like to manipulate the counter i with a input on screen. Below i can select from 1 to 10 and i want this selection to get replaced by the counter in the loop. That means when i choose 2, then i should be 2. I started with the code below, but document.getElementById('options').innerHTML = "i"; seems to be the wrong code to manipulate. Thanks so much for your help!
<select id="options" size="1">
<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>
for (i=0, i<someArray; i++){
do somethingWith[i];}
document.getElementById('options').innerHTML = "i";
You need to get the value of the select element and assign that to i.
var i = document.querySelector('#options').value;
for(i < someArray; i++){
//code
}
Add this to HTML
<select onChange="doWork(this)">
In Js
function doWork(obj){
obj.innerHTML = obj.value
}
If want to do some thing on selection, use onchange method with select to trigger a function every time you are selecting an option.
<select id="options" size="1" onchange="myFunction()">
<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>
<p id="demo"></p>
<script>
function myFunction() {
var selectedValue = document.getElementById("options").value;
var somethingWith = [];
for (i=0; i < selectedValue; i++){
somethingWith.push(i);
}
document.getElementById('demo').innerHTML = somethingWith;
}
</script>
But if you only want to dynamically select an option in select tag, this might help
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
<button type="button" onclick="myFunction()">banana</button>
<script>
function myFunction() {
document.getElementById("mySelect").value = "banana";
}
</script>
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!
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>