Get value from select and clone form number of times

Get value from select and clone form number of times - javascript

I have a select box , i want user to select value and then after getting value forms are to be added in page according to selected value , like if user selects "1" 1 form is to be added and if user select "10" 10 forms. also if nothing is given or not selected no form to display . It seems to be problem in my js , it does add forms but add other more forms too which i dont expect.
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber">
<option value="0">Select Numbers Of Travellers</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>
<div class=bookForm>
<div class=col-xs-12>
<h3 class=bookForm-heading>Submit your details</h3>
</div>
<div class="col-xs-12 col-md-3">
<div class=form-group>
<label>First Name</label>
<input class=form-control name=firstName>
</div>
</div>
</div>
.bookForm{
display:none;
}
function bookFormToggle(){
var traveller = $("#travellersNumber");
var form = $(".bookForm");
var heading = $('.bookForm-heading');
function unhideForm(){
var travellerValue = parseInt(traveller.val());
for(i=0;i<travellerValue;i++){
heading = heading.html('Traveller '+ (i+1) +' Information');
form.clone().insertAfter(form);
}
}
traveller.on("change",unhideForm);
unhideForm();
}
bookFormToggle();

Hope this is what you want.
$(function () {
$("#travellersNumber").on('change', function () {
var traveller = $(this);
var form = $("#original");
var heading = $('.bookForm-heading');
var travellerValue = parseInt(traveller.val());
$("#original").hide();
$("[id*='original_']").not("#original").remove(); //Remove all forms except original form
for (i = 0; i < travellerValue; i++) {
if (i == 0) {
heading = heading.html('Traveller 1 Information');
$("#original").show();
}
else
{
var cloneDiv = form.clone().prop("id", "original_" + i).appendTo("#travellersDetail");
cloneDiv.find(".bookForm-heading").html('Traveller ' + (i + 1) + ' Information');
}
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bookForm {
display: none;
}
</style>
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber">
<option value="0">Select Numbers Of Travellers</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>
<div class="bookForm" id="original">
<div class=col-xs-12>
<h3 class="bookForm-heading">Submit your details</h3>
</div>
<div class="col-xs-12 col-md-3">
<div class=form-group>
<label>First Name</label>
<input class=form-control name=firstName>
</div>
</div>
</div>
<div id="travellersDetail"></div>

The problem is that you are not removing the old forms that you have added.
$(document).ready(function(){
var traveller = $('select[name="trav"]');
traveller.change(function(){
$('.bookForm').not('.bookForm:first').remove();
var travellerValue = traveller.val();
var form = $('.bookForm:first');
for(i=travellerValue;i>1;i--){
var newAdd = form.clone().insertAfter(form);
newAdd.find('.bookForm-heading').html('Traveller'+ (i)+' Information');
}
$('.bookForm').show();
});
});
.bookForm{
background-color:green;
padding:5px;
margin:5px;
}
#travellersNumber{
width:150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber" name="trav">
<option value="0">Select Numbers Of Travellers</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>
<div class="bookForm row">
<div class="col-xs-12">
<h3 class="bookForm-heading">Submit your details</h3>
</div>
<div class="col-xs-12">
<div class="form-group">
<label>First Name</label>
<input class="form-control" name="firstName">
</div>
</div>
</div>

<select id='populate' onchange='populate();'></select>
<div id='myform'></div>
function populate()
{
var forms=$("#populate").val();
if (forms!=0)
{
var formelements='';
for (i=1; i<=forms; i++)
{
var formelements .= "<div class=bookForm>" +i+ "</div>";
}
$("#myform").html(formelements);
}
}

Related

Use #click method with select tag to change value on a computed property

What I'm trying to do is:
Input an emotion with the text box and rate the intensity of the emotion with the select box. The blue button adds emotion.
In the rerate section I would like to rerate the intensity of that emotion.
In the rerate, I'm looping through a computed property rerateEmotions that has an array of objects that contains emotion and intensity properties. What I'd like to do is change the intensity for each emotion on the computed property with the select tag:
Edit
Okay, I found out I need to change the #click to #change on the rerate <select>
Now I just want to figure out how to have a separate rating from the "rate emotion" and rerate emotion" areas.
const app = new Vue({
el: "#app",
data: function() {
return {
emotion: "",
intensity: null,
newIntensity: null,
emotionIntensity: []
};
},
computed: {
rerateEmotions() {
return this.emotionIntensity;
}
},
methods: {
rerateIntensity(id) {
return (this.rerateEmotions[id].intensity = this.newIntensity);
},
openEmotion(id) {
this.emotionId = id;
},
addEmotionIntensity() {
var emotionIntensity = {
emotion: this.emotion,
intensity: this.intensity
};
this.emotionIntensity.push(emotionIntensity);
this.emotion = "";
this.intensity = null;
},
removeEmotion(id) {
if (id > -1) {
this.emotionIntensity.splice(id, 1);
}
},
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="row mb-3 pr-4">
<div class="col-6">
<h1>Rate</h1>
<input v-model="emotion" type="text" placeholder="Enter emotion here." class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="col-5 select-outline">
<select class="mdb-select md-form md-outline colorful-select dropdown-primary" v-model="intensity">
<option value="" disabled selected>Rate Emotion</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>
<button #click="addEmotionIntensity()" type="button" class="col-1 btn btn-primary">+</button>
</div>
<ul>
<li v-for="(emotion, index) in emotionIntensity">
<b>{{emotion.emotion}} : {{emotion.intensity}}</b>
<button type="button" #click="removeEmotion(index)">
X
</button>
</li>
</ul>
<hr>
<div class="form-group">
<label for="exampleFormControlTextarea1"><h5>Rerate</h5></label>
<li v-for="(emotion, index) in rerateEmotions">
<b>{{emotion.emotion}} : {{emotion.intensity}}</b>
<select class="mdb-select md-form md-outline colorful-select dropdown-primary" #change="rerateIntensity(index)">
<option value="" disabled selected>Rate Emotion</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>
</li>
<hr>
</div>
</div>

If you need two intensity rating then you could just have two properties on each object. e.g. intensity and newIntensity. In the example below I've initialised both to the same value when an entry is first created but the second property could be left empty if that's preferred.
The computed property rerateEmotions didn't seem to be doing anything so I've removed it in favour of using emotionIntensity directly. Perhaps the intent was to create a copy but using a computed property won't have that effect, it will just be the same array.
For the re-rate dropdown I've used v-model, though there's no reason why you couldn't use an event listener if you prefer. The key thing is that I'm using the newIntensity property for that second value.
const app = new Vue({
el: "#app",
data: function() {
return {
emotion: "",
intensity: null,
newIntensity: null,
emotionIntensity: []
};
},
methods: {
openEmotion(id) {
this.emotionId = id;
},
addEmotionIntensity() {
var emotionIntensity = {
emotion: this.emotion,
intensity: this.intensity,
newIntensity: this.intensity
};
this.emotionIntensity.push(emotionIntensity);
this.emotion = "";
this.intensity = null;
},
removeEmotion(id) {
if (id > -1) {
this.emotionIntensity.splice(id, 1);
}
},
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="row mb-3 pr-4">
<div class="col-6">
<h1>Rate</h1>
<input v-model="emotion" type="text" placeholder="Enter emotion here." class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="col-5 select-outline">
<select class="mdb-select md-form md-outline colorful-select dropdown-primary" v-model="intensity">
<option value="" disabled selected>Rate Emotion</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>
<button #click="addEmotionIntensity()" type="button" class="col-1 btn btn-primary">+</button>
</div>
<ul>
<li v-for="(emotion, index) in emotionIntensity">
<b>{{emotion.emotion}} : {{emotion.intensity}}</b>
<button type="button" #click="removeEmotion(index)">
X
</button>
</li>
</ul>
<hr>
<div class="form-group">
<label for="exampleFormControlTextarea1"><h5>Rerate</h5></label>
<li v-for="(emotion, index) in emotionIntensity">
<b>{{emotion.emotion}} : {{emotion.newIntensity}}</b>
<select v-model="emotion.newIntensity" class="mdb-select md-form md-outline colorful-select dropdown-primary">
<option value="" disabled selected>Rate Emotion</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>
</li>
<hr>
</div>
</div>

How To Control Dropdown Select Options Menu With Jquery

I am creating a web site. In this web site there is a form and user has to input details. So , in this form , I have added 2 dropdowns like below. Now I want, when I select number 9 from Adults menu, I want to disable children menu. Otherwise if the number is 8 or less than 8, still user can select from children menu. Then I used length in jquery. But, that not what I want.
How can I do this?
$(document).ready(function() {
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
$('#adults').change(function() {
var st = $('#adults option:selected');
if (st.length > 8) {
$("#children").prop('disabled', true);
}
});
alert(Total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<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> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<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> <br>
</div>
</div>
Search Flight Data
</form>

You just need to change length to
if (st.val() > 8)
DEMO: https://codepen.io/creativedev/pen/ERpXOa
To enable back when value is different:
if (st.val() > 8)
{
$("#children").prop('disabled', true);
}else{
$("#children").prop('disabled', false);
}

You should check against the selected value, not the length:
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
$('#adults').change(function() {
if (this.value > 8) { // check against the value of the adults drop down
$("#children").prop('disabled', true);
} else {
$("#children").prop('disabled', false); // probably need to re-enable it
}
});
// alert(Total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<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> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<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> <br>
</div>
</div>
Search Flight Data
</form>

change select to input in cart

I'm trying to change a select list to a text input (an example is amazon cart) based on a value of 10. What I have works for 1 row but I want to add multiple rows. I need some help changing the jquery to only change 1 row at a time.
$(function() {
$('.dropdown-change').on('change', function() {
var dropdownValue = $(this).val();
if (dropdownValue == 10) {
$('.dropdown-control').hide();
$('.input-control').show();
} else {
$('.dropdown-control').show();
$('.input-control').hide();
}
return false;
});
});
.input-control {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row dropdown-row">
<div class="col-xs-2 col sm-2 col-md-2">
<label for="quantity">Qty</label>
</div>
<div class="col-xs-8 col-sm-8 col-md-8">
<div class="dropdown-control">
<div class="col-xs-12 col-sm-12 col-md-6 no-pad-left">
<select name="quantity" class="form-control dropdown-change">
<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>
</div>
<div class="input-control">
<div class="col-md-6 no-pad-left">
<input type="text" value="10" size="10" name="quantity" id="quantity" class="form-control" />
</div>
<div class="col-md-6 no-pad-left">
<button class="btn btn-primary btn-xs">update</button>
</div>
</div>
</div>
</div>

I fixed this by changing my HTML around and using $(this).closest() and $(this).next()

div containing select not working after appending to form

I have a form in which I have drop down menu to select a city. I want to add one more drop down to this form to select location in the selected city. My form code looks as follows
<s:form role="form" name = "signUpForm" onsubmit="return validateSignupForm()" action = "signUp" method="post" namespace="/" theme="simple">
<div class ="form-group">
<label for= "city">City</label>
<select list="cityList" onchange="getLoad()" class="form-control selectpicker" name="city" id="city" data-live-search="true" data-size="5">
<option value="NA">--select a city--</option>
<option value="A"> A</option>
<option value ="B">B</option>
<option value ="C">C</option>
<option value ="D">D</option>
</select>
</div>
<div id="parentLocationDiv"></div>
</s:form>
In addition to this I have created four separate div containing select options for location in city.
<div class="form-group" id="ALocation">
<select id="alocation" name="alocation">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group" id="BLocation">
<select id="blocation" name="blocation">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
Now to append these divs to the form I making use of the following javascript:
function getLoad(){
var ParentDiv = document.getElementById("parentLocationDiv");
while(ParentDiv.hasChildNodes())
{
ParentDiv.removeChild(ParentDiv.childNodes[0]);
}
var cityName = document.getElementById("city").value;
if(ParentDiv.hasChildNodes())
{ while(ParentDiv.hasChildNodes())
{
ParentDiv.removeChild(Parentdiv.childNodes[0]);
}
}
debugger;
var clone = document.getElementById(cityName.concat("Location")).cloneNode(true);
ParentDiv.appendChild(clone);
ParentDiv.childNodes[0].style.display="block";
var newdiv = ParentDiv.childNodes[0];
newdiv.getElementsByTagName("select").name="location";
newdiv.getElementsByTagName("select").id="location";
}
Now when I select a city corresponding location drop down menu is visible in form but when I select any option it does not get selected. Can anyone help me with this?

Your codes seems to work except for throwing errors where there are no matching locations. You can fix it as follows:
function getLoad() {
var parentDiv = document.getElementById("parentLocationDiv");
while (parentDiv.hasChildNodes()) {
parentDiv.removeChild(parentDiv.childNodes[0]);
}
var cityName = document.getElementById("city").value || "";
var target = document.getElementById(cityName.concat("Location"));
if (!target)
return;
var clone = target.cloneNode(true);
clone.getElementsByTagName("select").name = "location";
clone.getElementsByTagName("select").id = "location";
parentDiv.appendChild(clone);
parentDiv.childNodes[0].style.display = "block";
}
.holder {
display: none;
}
<form role="form" name="signUpForm" onsubmit="return validateSignupForm()" action="signUp" method="post" namespace="/" theme="simple">
<div class="form-group">
<label for="city">City</label>
<select list="cityList" onchange="getLoad()" class="form-control selectpicker" name="city" id="city" data-live-search="true" data-size="5">
<option value="NA">--select a city--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div id="parentLocationDiv"></div>
</form>
<div class="form-group holder" id="ALocation">
<select id="alocation" name="alocation">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group holder" id="BLocation">
<select id="blocation" name="blocation">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>

Change hr attributes on change elements

I suppose that it must be simple to do that but I've no experience with javascript and it's getting difficult to me.
I've got an hr element on my page and both a color picker and a dropdownlist with different values from 1 to 10.
What I need to do is change hr height and color when color picker or dropdownlist changes its values.
Here is my html code:
<div id="colourSelector" class="row">
<input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="text" style="display: none;"><div class="colorPicker-picker" style="background-color: rgb(204, 204, 204);"> </div></div>
<div id="lineHeight" class="row">
<select name="lineHeight" id="lineHeight">
<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>
<div id="divlineDemo" class="section row">
<hr id="lineDemo" style="height: 2px; background-color: red; border: 0;"> </div>
JS code:
<script type="text/javascript">
$(document).ready(function()
{
var val= $("select#lineHeight").val();
$("select#lineDemo").height().value;
});
</script>

Here is a working example of what you're trying to achieve.
You are setting lineHeight id 2 different times which caused me a headache to figure out. I renamed the ID of your select to lineHeightSelect and also changed the colorpicker to type="color".
$(function() {
var colorPicker = $('#backgroundcolor');
var headline = $('#lineDemo');
var lineHeight = $('#lineHeightSelect');
lineHeight.on("change", function(){
headline.css("height", $(this).val() + "px");
});
colorPicker.on("change", function() {
headline.css('backgroundColor', $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colourSelector" class="row">
<input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="color" style="display: block;">
</div>
<div id="lineHeight" class="row">
<select name="lineHeight" id="lineHeightSelect">
<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>
<div id="divlineDemo" class="section row">
<hr id="lineDemo" style="height: 2px; background-color: red; border: 0;">
</div>

$('#lineHeight').change(function () {
var val = $('option:selected', this).val();
$('#lineDemo').css('height', val+'px')
})
$('#backgroundcolor').change(function () {
var val = $(this).val();
$('#lineDemo').css('background-color', val)
})
Demo
I used the value of selected option as height of the hr

jQuery('#lineHeight').on('change',function(){ jQuery('#lineDemo').css('color','red').css('height','4px')

Develop Reference

JavaScript is the programming language of the Web.

Get value from select and clone form number of times - javascript

<select id='populate' onchange='populate();'></select> <div id='myform'></div> function populate() { var forms=$("#populate").val(); if (forms!=0) { var formelements=''; for (i=1; i<=forms; i++) { var formelements .= "<div class=bookForm>" +i+ "</div>"; } $("#myform").html(formelements); } }

Related

Use #click method with select tag to change value on a computed property

How To Control Dropdown Select Options Menu With Jquery

change select to input in cart

div containing select not working after appending to form

Change hr attributes on change elements

Categories

Resources