How to add fields in form dynamically
so my form looks like :
<form action="/reservation-add" method="post">
<select id="dropdownlist">
<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></input>
</form>
If selected e.g 3 it should append 3 new inputs (could be array to take all of values ) I know that I have to use javascript but I don't know how.
Use this way:
$("#dropdownlist").change(function () {
var numInputs = $(this).val();
for (var i = 0; i < numInputs; i++)
$("#inputArea").append('<input name="inputs[]" />');
});
Have another div, with the ID "inputArea":
<div id="inputArea"></div>
Snippet
$("#dropdownlist").change(function () {
var numInputs = $(this).val();
for (var i = 0; i < numInputs; i++)
$("#inputArea").append('<input name="inputs[]" />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="dropdownlist">
<option>Select...</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>
</select>
<div id="inputArea"></div>
<form action="/reservation-add" method="post" id="appendform">
<select id="dropdownlist">
<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></input>
</form>
Jquery Code
$(document).ready(function ()
{
$('#dropdownlist').on('change',function ()
{
var howmuch = $(this).val();
var appendhtml = '';
for (i = 0; i < howmuch; i++)
{
appendhtml+= "<input name="+i+" value="">";
}
$('.appendform').append(appendhtml);
});
});
$("#dropdownlist").on("change",function(e){
for(i=0; i < $(this).val() ;i++){
$("form").append($("<input type='text'/>"));
}
})
try this
<script>
function fireChange(val) {
var form = document.forms[0];
if(val) {
for (var i = 0; i < val; i++) {
var in = document.createElement('input');
form.appendChild(in);
}
}
}
</script>
<form action="/reservation-add" method="post" onchange="fireChange(this.value)">
<select id="dropdownlist">
<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></input>
</form>
Step 1--- Add id to form
Step 2---Use jquery onchange method, code shown below
<form action="/reservation-add" method="post" id="myForm">
<select id="dropdownlist">
<option value="1"></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
$('#dropdownlist').on("change",function() {
for(var i=0;i<this.value;i++)
{
$("#myForm").append("<input type='text' name='myname[]'/>
<br>");
}
});
To get around the problem of adding yet more input fields after the initial drop down selection (if the user changes their mind after the initial selection), which is the case with all the answers on this page.
See the solution below:
$("#dropdownlist").change(function () {
$("#inputArea > :input").remove();
var numInputs = $(this).val();
for (var i = 0; i < numInputs; i++)
$("#inputArea").append('<input name="inputs[]" />');
});
By pure JavaScript, you can do it like this;
<script>
document.getElementById("dropdown").onchange = function() {
document.querySelector("#inputarea").innerHTML = '';
for(var i = 0; i < document.getElementById("dropdown").value; i++) {
var input = document.createElement("input");
input.name = 'input_name';
input.type = 'text';
document.getElementById("inputarea").append(input);
}
}
</script>
And here is the html;
<body>
<form>
<select id="dropdown">
<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>
</form>
<div id="inputarea"></div>
</body>
Related
Tried several ways, lot of research (maybe I miss something but can't get it done) so, I was wonder if I can sum selected values of a html select
this is my code
<select id="m4r1InfoMrP" name="m4r1InfoMrP">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
And the other one
<select id="m4r1InfoMrS" name="m4r1InfoMrS" >
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
my JS code
<script type="text/javascript">
var m4r1InfoMrP = document.getElementById( "m4r1InfoMrP" ),
m4r1InfoMrPValue = m4r1InfoMrP.value;
var m4r1InfoMrS = document.getElementById( "m4r1InfoMrS" ),
m4r1InfoMrSValue = m4r1InfoMrS.value;
var sum = 0;
var a = m4r1InfoMrPValue;
var b = m4r1InfoMrSValue;
sum = a + b;
document.getElementById("m4r1InfoMrPS").value = sum;
</script>
what I'm looking for is to sum the selected values and show it on m4r1InfoMrPS
thanks in advance
You need to use the change event for each <select> element. Also, you need to convert to number for addition as below.
var m4r1InfoMrP = document.getElementById("m4r1InfoMrP"),
m4r1InfoMrPValue = m4r1InfoMrP.value;
var m4r1InfoMrS = document.getElementById("m4r1InfoMrS"),
m4r1InfoMrSValue = m4r1InfoMrS.value;
m4r1InfoMrP.onchange = () => calculate();
m4r1InfoMrS.onchange = () => calculate();
function calculate() {
m4r1InfoMrPValue = m4r1InfoMrP.value;
m4r1InfoMrSValue = m4r1InfoMrS.value;
var sum = 0;
var a = +m4r1InfoMrPValue;
var b = +m4r1InfoMrSValue;
sum = a + b;
document.getElementById("m4r1InfoMrPS").value = sum;
}
calculate()
<select id="m4r1InfoMrP" name="m4r1InfoMrP">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
<select id="m4r1InfoMrS" name="m4r1InfoMrS">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
<input id="m4r1InfoMrPS" />
I want to sum of dropdown value on each change. I want to sum of selected experience value. This is my code. Please anyone help me
$(document).ready(function () {
var selects = $('select[name^=exp_year]');
selects.change(function () {
var value = 0;
selects.each(function () {
value += +this.value;
});
alert(value);
$('#dis').val(value);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="exp_year[]" id="exp_year" class="form-control">
<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></select>
<div id="dis"></div>
This is what you need to do define var value = 0; above var selects = $('select[name^=exp_year]'); and Change $('#dis').val(value); to $('#dis').text(value);
$(document).ready(function () {
var value = 0;
var selects = $('select[name^=exp_year]');
selects.change(function () {
selects.each(function () {
value += +this.value;
});
alert(value);
$('#dis').text(value);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="exp_year[]" id="exp_year" class="form-control">
<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></select>
<div id="dis"></div>
If I understood your question correctly, there were couple of issues with your code. You have value variable inside the change function, you need to have it outside and second you are setting the $('#dis').val(value); instead set $('#dis').html(value); Check the code snippet
$(document).ready(function () {
var value = 0;
var selects = $('select[name^=exp_year]');
selects.change(function () {
selects.each(function () {
value += +this.value;
});
alert(value);
$('#dis').html(value);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="exp_year[]" id="exp_year" class="form-control">
<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></select>
<div id="dis"></div>
If I understand you correctly, this is what you are searching for:
<script>
$(document).ready(function () {
var value = 0;
$('#exp_year').change(function () {
value += parseInt(this.value);
alert(value);
$('#dis').text(value);
});
});
</script>
Initialize the variable value outside the change event.
I have a dynamic list of products, and I need to know the total amount products selected by the users, for example 4 of product1, 5 of product5 and 6 of product9, so the value of the counter must be 15 (the adition of each product selected)
<select name="product1" id="product1" class="list-of-products">
<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>
</select>
...
x products generated dynamically by php call
...
<select name="productx" id="productx" class="list-of-products">
<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>
</select>
so my counter is like
<div id="counter">
<span id="counter-value">counter</span>
</div>
I've been thinking to do it using jquery,something like
$(document).ready(
function() {
var total = 0;
$('.list-of-products :selected').each(function(i, selected){
total= total+ parseInt($(selected).text());
});
$('#counter-value').text(total);
}
);
You're near the solution. Just check my fiddle:
$(document).ready(function () {
$('.list-of-products').change(function () {
var products = $('.list-of-products :selected');
var tot = calculateTotal(products);
$('#counter-value').text(tot);
});
});
// Function
function calculateTotal(product_list) {
var total = 0;
product_list.each(function (i, selected) {
total = total + parseFloat($(selected).text());
});
return total;
}
http://jsfiddle.net/hoja/3pznw838/
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;
}
}