textboxes on dropsown select - javascript

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>

Related

Change url in inframe tags

I have a problem like the following. I embed a chart in my site with inframre tags with . My website has a option tag. How can I change url 1 in an iframe to url2 when choosing option 2, url3 when choosing option 3. A solution would be very grateful.
Example :
<iframe src="url1"></iframe>
<select id "select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I found a very simple solution. This is my solution.
<iframe src="url1" id="urlFrame"></iframe>
<select id="tuyencap" onchange="changeValue(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script type="text/javascript">
function changeValue(){
var tuyencap = document.getElementById("tuyencap").value;
alert(tuyencap)
if (tuyencap ==1){
document.getElementById('urlFrame').src="url1";
}
else if (tuyencap ==2){
document.getElementById('urlFrame').src="url2";
}
else if (tuyencap ==3){
document.getElementById('urlFrame').src="url3";
}
else if (tuyencap ==4){
document.getElementById('urlFrame').src="url4";
}
}
</script>

use onchange for your select element
<iframe src="url1" id="urlFrame"></iframe>
<select id = "select" onchange="changeValue(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Javascript:
function changeValue(element){
var value = element.value;
document.getElementById('urlFrame').src = value;
}
Note
The value of your options should be the URL you intend to use so instead of:
<option value="1">1</option>
I expect you should have something like:
<option value="http://google.com">1</option>
EDIT 1
You can use the innerHTML also but I don't think it's good user experience
<option value="1">http://google.com</option>
__
var value = element.innerHTML;
document.getElementById('urlFrame').src = value;
EDIT 2
Like #LelioFaieta suggested you can use the data.* attribute:
<option data-url="http://google.com" value="1">1</option>
Javascript:
function changeValue(element){
var urlSelect = element.dataset.url;
document.getElementById('urlFrame').src = urlSelect;
}

You can do with data attribute if you need.
<iframe src="url1" id="urlFrame"></iframe>
<select id="select" onchange="changeValue(this)">
<option value="1" data-url="url1">1</option>
<option value="2" data-url="url2">2</option>
<option value="3" data-url="url3">3</option>
<option value="4" data-url="url4">4</option>
</select>
function changeValue(){
var x = document.getElementById("select");
var myoption = x.options[x.selectedIndex];
var urlSelect = myoption.dataset.addr;
alert('urlSelect = '+urlSelect);
document.getElementById('urlFrame').src = urlSelect;
}
The dataset attribute is the attribute that read all the data attributes from your option tag.

Hi please check the code below,it's working absolutely fine. You just need to change path as per your requrement
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<iframe height="800px" width="800px"
src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg"
id="imageToSwap" class="profile"></iframe>
<select onchange="$('#imageToSwap').attr('src',
this.options[this.selectedIndex].value);">
<option value="http://cdns2.freepik.com/free-photo/facebook-
logo_318-49940.jpg" selected>Facebook</option>
<option value="http://cdns2.freepik.com/free-photo/twitter-logo_318-
40459.jpg">Twitter</option>
</select>

How to manipulate loops with input?

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>

How to store multiple values from multiple select field using javascript?

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!

Adding several input boxes based by a select box value

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>

javascript out update onchange

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);

Categories

Resources