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>
Related
I am trying to run For loop in JavaScript but it is not working for me. Auto increment value is not working I tried to check by altering:
alert('add_fname_'+i);
but it is giving "add_fname_0" as output
function checkadditionals(){
var tvrs = Number(document.getElementById('additional_travellers').value);
for ( var i = 0; i < tvrs; i++) {
console.log('add_fname_' + i);
document.getElementById('add_fname_'+i).required = true;
document.getElementById('add_lname_'+i).required = true;
document.getElementById('add_dob_'+i).required = true;
document.getElementById('relation_'+i).required = true;
document.getElementById('pre_exe_'+i).required = true;
}
}
<select onchange="checkadditionals()" class="form-control" id="additional_travellers" name="additional_travellers">
<option value="0">None</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>
</select>
HTML
<select id="my-select" multiple="multiple" size="8" style="width:200px">
<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>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
JQUERY
$('#my-select option').on('click',function(){
var count = $('#my-select').find('option:selected').length;
$('#dg').html(count);
if(count>10){
$(this).attr('selected',false);
alert('limit 10');
}
});
http://jsfiddle.net/LxNMm/
When you click on the options, calculate count of selected options and limit it to 10, but if you click on the options with pressing shift key and select a range, selection could be greater than 10. How can a detect count of selected options when select a range with pressing shift key
You can try updating the values this way:
$('#my-select').on('change', function () {
var count = $(this).find('option:selected').length;
$('#dg').html(count);
if (count > 10) {
$('option:gt(9)', this).attr('selected', false);
count = $(this).find('option:selected').length;
$('#dg').html(count);
alert('error');
}
});
Your updated demo fiddle
Don't use the click event of the <option />s but the change event of the <select />
$('#my-select').on('change', function () {
var count = $(this).find('option:selected').length;
$('#dg').html(count);
if (count > 10) {
$(this).find("option").prop('selected', false);
alert('error');
}
})
fiddle
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>
Excually Im not a programmer, but Im trying to learn how to make a questionnaire with html and javascript:
I have four selection boxes in a form. Each one of the selection boxes has the values through 0 to 10. The main rule of this questionnaire is to change the value of all four selection boxes so that it adds up to 10.
I figured out the following solution:
instant updated text box where it calculates the total value selected (with onChange);
validate at submit button if a total value of 10 (and not more or less) is selected.
Alternatively I would even assign a (error) message instantly when the user selects a value that exceeds the total value of 10.
I have some half baked javascripts, but I don't have enough understanding of the subject to excually connect the dots. Hope you can help me.
Tim
My framework:
<html>
<head>
<script type="text/javascript">
function editTotalValue(){
}
function validateTotalValue(){
}
</script>
</head>
<body>
<form name="form1">
<select name="question1" onChange="editTotalValue();">
<option selected 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>
<select name="question2" onChange="editTotalValue();">
<option selected 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>
<select name="question3" onChange="editTotalValue();">
<option selected 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>
<select name="question4" onChange="editTotalValue();">
<option selected 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>
<!-- Show total value selected in text box -->
<input name="totalValue" type="text" maxlength="2" readonly="true">
<!-- Validate that totalValue(); is indeed 10 and not more or less and pass on the data -->
<input name="submit" type="button" onClick="validateTotalValue();">
</form>
</body>
</html>
Here's something more in-depth that you can play with:
document.getElementById("form1").onsubmit = checkTarget;
function checkTarget(evt)
{
var el;
if(window.event)
{
//checking for IE equivalent
el = window.event.srcElement;
}else if(evt.target)
{
el = evt.target;
}
if(window.event)
{
//checking for IE equivalent
window.event.returnValue = false;
}else if(evt.preventDefault)
{
evt.preventDefault();
}
calculateValues(el);
}
function calculateValues(form)
{
var values = [];
var value = 0;
for(var i=0;i<form.elements.length;i++)
{
var el = form.elements[i];
if(el.tagName === "SELECT")
{
values.push(el.value);
}
}
for(var j=0;j<values.length;j++)
{
value = value + parseInt(values[j], 10);
}
updateValue(value);
checkValue(values, value);
}
function updateValue(value)
{
document.getElementById("result_box").value = value;
}
function checkValue(values, value)
{
var temp = [];
for(var i=0;i<values.length;i++)
{
if(values[i] > 0 && values[i] < 10)
{
temp.push(values[i]);
}
}
if(value === 10 && temp.length === 4)
{
document.getElementById("message_box").value = "You win!";
}else if(value > 10 && temp.length === 4)
{
document.getElementById("message_box").value = "Value is more than 10";
}
}
http://jsfiddle.net/YS6mm/9/
Tested as working in: Firefox 4, IE8, IE8 Compatibility View (Quirks), IE7 Quirks Mode, Chrome 4, Safari 4, and Opera 11.
function editTotalValue() {
var val = 0;
for (var i = 1; i < 5; i++) {
val = val + document.getElementById("question" + i).value;
}
var display = document.getElementbyId("totalValue");
if (val > 10) {
alert("error");
} else {
display.value = val;
}
}