div containing select not working after appending to form

div containing select not working after appending to form - javascript

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>

Related

I made multiple selection on the dropdown but in Javascript alert, showing 1 value only

I add multiple on my dropdown list. But, when I check the values via Javascript with alert, it just showing the first one that I selected.
<label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID :</label>
<div class="col-sm-4">
<p class="form-control-static" style="margin-top: -6px;">
<select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple>
<option value="" selected > Select Quantity</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>
</p>
</div>
Below is Javascript.
var affectedwaferid = document.translot.affectedwaferid.value;

As I posted in the comment,in order to get the multiple selected values, you need to use selectedOptions instead
function showSelected(){
var options = document.getElementById('affectedwaferid').selectedOptions;
var values = Array.from(options).map(({ value }) => value);
alert(values)
document.getElementById("selected-result").innerHTML = values;
}
<label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID :
<span id="selected-result"></span>
</label>
<div class="col-sm-4">
<p class="form-control-static" style="margin-top: -6px;">
<select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple onchange="showSelected()">
<option value="title" selected > Select Quantity</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>
</p>
</div>

Passing ID in two different select function into 1 const function in jQuery?

I have 2 different select function that I'll use and get the id from the two different select and pass it into the 1 main function. But I have problem with getting the id from the select function.
What is the correct way on how to pass the id of cat_id and role_id into the getMyMode(a,b)
$(document).ready(function() {
$("#cat").change(function() {
let cat_id = $(this).val();
getMyMode(cat_id);
});
$("#role").change(function() {
let role_id = $(this).val();
getMyMode(role_id);
});
});
const getMyMode = (a, b) => {
console.log(a, b);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<label class="form-label"> Category</label>
<select class="form-control mb-3" id="cat">
<option value="99" hidden> Choose Category</option>
<option value="0">Cat 1</option>
<option value="1">Cat 2</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label"> Role</label>
<select class="form-control mb-3" id="role">
<option value="99" hidden>Choose Role</option>
<option value="23">Role 1</option>
<option value="24">Role 2</option>
</select>
</div>

Like this
const getMyMode = (a, b) => { console.log(a, b); };
$(function() { // when page has loaded
$("#cat, #role").on("change", function() { // when either has changed
let role_id = $("#role").val();
let cat_id = $("#cat").val();
getMyMode(cat_id,role_id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<label class="form-label"> Category</label>
<select class="form-control mb-3" id="cat">
<option value="99" hidden> Choose Category</option>
<option value="0">Cat 1</option>
<option value="1">Cat 2</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label"> Role</label>
<select class="form-control mb-3" id="role">
<option value="99" hidden>Choose Role</option>
<option value="23">Role 1</option>
<option value="24">Role 2</option>
</select>
</div>

javascript calculation on calculating once a client clicks on a form option

I am doing a small project on creating an order form.
I am trying to display the price per page once the client selects the time.
For example if the selected time is 4hour it should return 12usd.. if its 6hours it should return 10 usd......
<div class="col-md-6">
<div class=" custom-select" style="width:200px;">
<select class="form-control" id="time">
<option value="0">Time...</option>
<option value="1">4hrs</option>
<option value="2">6hrs</option>
<option value="3">1day</option>
<option value="4">2days</option>
<option value="5">3days</option>
<option value="6">4days</option>
<option value="7">5days</option>
<option value="8">6days</option>
<option value="9">7days</option>
<option value="10">After 7 days</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">cpp</label>
<input type="text" class="form-control" id="cpp">
</div>
</div>

You can make something like this.
const selectElement = document.querySelector('.ice-cream');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You like ${event.target.value}`;
});
<label>Choose an ice cream flavor:
<select class="ice-cream" name="ice-cream">
<option value="">Select One …</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<div class="result"></div>

So you won't tell us in details so we have to guess
const prices = [0,12,10,9,8,7,6,5,4,3,2],
cpp = document.getElementById('cpp'),
time = document.getElementById('time')
time.addEventListener('change',function() {
cpp.value = prices[this.value]
})
// init if the select is already set from server
const change = new CustomEvent("change");
time.dispatchEvent(change);
<div class="col-md-6">
<div class=" custom-select" style="width:200px;">
<select class="form-control" id="time">
<option value="0">Time...</option>
<option value="1">4hrs</option>
<option value="2">6hrs</option>
<option value="3">1day</option>
<option value="4">2days</option>
<option value="5">3days</option>
<option value="6">4days</option>
<option value="7">5days</option>
<option value="8">6days</option>
<option value="9">7days</option>
<option value="10">After 7 days</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">cpp</label>
<input type="text" class="form-control" id="cpp">
</div>
</div>

Display a required text input when Other is selected

I need to add a text input that displayed only when the other is selected. And make this input required if it is shown. One thing more, I need to enter that input to the same table in the database. Can anyone help? Please!
<form action="" method="post">
<div class="row">`enter code here`
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required>
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>

Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="row">
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required >
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<input type ="text" id="country_other" style="display:none">
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
<script>
$("#country").change(function(){
var value = this.value;
if(value =='Other')
{
$("#country_other").show();
$("#country_other").prop('required',true);
$("#country_other").val('');
}
else
{
$("#country_other").hide();
$("#country_other").prop('required',false);
$("#country_other").val('');
}
});
</script>

Get value from select and clone form number of times

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

Develop Reference

JavaScript is the programming language of the Web.

div containing select not working after appending to form - javascript

Related

I made multiple selection on the dropdown but in Javascript alert, showing 1 value only

Passing ID in two different select function into 1 const function in jQuery?

javascript calculation on calculating once a client clicks on a form option

Display a required text input when Other is selected

Get value from select and clone form number of times

Categories

Resources