I have a multidrop form at this fiddle : Here's a link! . at this form only can add multidrop 3 times, i want to make always add this multidrop, and how to save the array data into sql
<div id="Yes1">
<label for="name" >Name</label>
<input type="text" id="name1" name="name1">
<br><br>
<label for="multiDrop" >Multi Drop</label>
<select name="multiDrop1" id="multiDrop1">
<option value=""></option>
<option value="Y">YES</option>
<option value="N">NO</option>
</select>
<br><br>
</div>
Check here to add and remove your elements as per your requirement.
You can remove only that block which you selected No for.
$(document).ready(function() {
$(document).on("change", ".multidrop", function() {
if ($(this).val() == 'Y') {
$clone = $(this).closest(".Yes").clone();
var num = parseInt($(".Yes:last").attr("data-index")) + 1;
$clone.attr("data-index", num);
$clone.attr("id", $clone.attr("id").replace(/\d+/, num));
$clone.find("input,select").each(function() {
var name = ($(this).attr("name")).replace(/\d+/, num);
var id = ($(this).attr("id")).replace(/\d+/, num);
$(this).attr("name", name);
$(this).attr("id", id);
});
$clone.insertAfter(".Yes:last"); //Add field html
} else if ($(this).val() == "N" && $(".Yes").length > 1) {
$(this).closest(".Yes").remove();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Yes1" class="Yes" data-index="1">
<label for="name">Name</label>
<input type="text" id="name1" name="name1" class="name">
<label for="multiDrop">Multi Drop</label>
<select name="multiDrop1" id="multiDrop1" class="multidrop">
<option value="">Select Option</option>
<option value="Y">YES</option>
<option value="N">NO</option>
</select>
<br><br>
</div>
I would recommend to use following approach:
get your repetitive block HTML into a variable;
listen for changes of drop down (using event delegation, selecting by class rather than id);
modify necessary attributes (names, id's, etc) based on global counter to distinguish those dynamic blocks;
const block = `
<div class="block">
<div class="yes">
<label>Name</label>
<input type="text" class="name"></input>
<label>Multi Drop</label>
<select class="multiDrop">
<option value=""></option>
<option value="Y">YES</option>
<option value="N">NO</option>
</select>
</div>
</div>
`;
const addAnotherBlock = () => {
$('#wrapper').append(block);
$('.name:last').attr('name',i++);
};
var i = 0;
$(document).ready(() => addAnotherBlock());
$('#wrapper').on('change', '.multiDrop', function(){
if($(this).val() == 'Y') addAnotherBlock();
else if($(this).val() == 'N' && $('.block').length > 1 && !$(this).closest('.block').is('.block:last')){
$(this).closest('.block').remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper"></div>
Related
In my project i have a select incapsulated into two divs, i have to get the text or value) from the select from a javascript.
<div class="col-lg-3 col-xs-6" id="div1">
<div class="form-group" id="divTtype">
<label>Templte Type:</label>
<select class="form-control" id="ftype">
<option value="..All">..All</option>
<option value="Functional">Functional</option>
<option value="Non Functional">Non Functional</option>
</select>
</div>
</div>
i try this code:
function GetElementInsideContainer(containerID, childID) {
var elm = document.getElementById(childID);
var parent = elm ? elm.parentNode : {};
return (parent.id && parent.id === containerID) ? elm : {};
}
but when i try :
GetElementInsideContainer(divType, ftype).text;
an "undefined" return to me.
How can i get my select value?
so many thanks in advance
Actually there's a typo in your HTML code "divTtype", you meant to write divType
<div class="col-lg-3 col-xs-6" id="div1">
<div class="form-group" id="divType">
<label>Templte Type:</label>
<select class="form-control" id="ftype">
<option value="..All">..All</option>
<option value="Functional">Functional</option>
<option value="Non Functional">Non Functional</option>
</select>
</div>
</div>
Also you need to use textContent attribute instead of text
Finally please call the function using "id", else you are calling undefined variables divType and ftype
console.log(GetElementInsideContainer("divType", "ftype"));
This will certainly fix your current issue, although please refer to raphael answer for better approach.
Because text doesn't exist into HTMLElement.
You have to do this:
GetElementInsideContainer(divType, ftype).textContent;
Here's the documentation.
You should use quotes when you send string as a parameter:
GetElementInsideContainer('divType', 'ftype').text;
Like Krishna said in the comment above, you should be able to just do:
var select = document.getElementById('ftype')
var val = select.options[select.selectedIndex].value
You don't have to reference the parent node.
Use textContent and pass id in form of string otherwise it take it as a variable
secondly you have id divTtype and you were passing divType
function GetElementInsideContainer(containerID, childID) {
var elm = document.getElementById(childID);
var parent = elm ? elm.parentNode : {};
return (parent.id && parent.id === containerID) ? elm : {};
}
var a = GetElementInsideContainer("divType", "ftype").textContent;
console.log(a)
<div class="col-lg-3 col-xs-6" id="div1">
<div class="form-group" id="divType">
<label>Templte Type:</label>
<select class="form-control" id="ftype">
<option value="..All">..All</option>
<option value="Functional">Functional</option>
<option value="Non Functional">Non Functional</option>
</select>
</div>
</div>
Seems to be working fine overhere.
<div class="col-lg-3 col-xs-6" id="div1">
<div class="form-group" id="divTtype">
<label>Templte Type:</label>
<select class="form-control" id="ftype">
<option value="..All">..All</option>
<option value="Functional">Functional</option>
<option value="Non Functional">Non Functional</option>
</select>
</div>
</div>
<button onclick="getSelected(GetElementInsideContainer('divTtype', 'ftype'))">Get Selected Value</button>
<script>
function getSelected(objEl)
{
alert(objEl.options[objEl.selectedIndex].text);
}
function GetElementInsideContainer(containerID, childID) {
var elm = document.getElementById(childID);
var parent = elm ? elm.parentNode : {};
return (parent.id && parent.id === containerID) ? elm : {};
}
</script>
do you need the selected value of the select?
I did that snippet and get the HTML of the select.
with this snippet, you can get the value of a select
<div class="col-lg-3 col-xs-6" id="div1">
<div class="form-group" id="divTtype">
<label>Templte Type:</label>
<select class="form-control" id="ftype">
<option value="..All">..All</option>
<option value="Functional">Functional</option>
<option value="Non Functional">Non Functional</option>
</select>
</div>
</div>
function GetElementInsideContainer( childID) {
var elm = document.getElementById(childID);
console.log(elm.value)
return elm.value;
}
GetElementInsideContainer('ftype');
I think that maybe you pass in the argument an incorrect id
After a user makes his/her selections of the five select dropdowns, I want to set the value of a radio button from field "radio_btn_name" based on up to 3 of the users selections. Think of each object as a "rule". If a combination of selections matches that rule, give "radio_btn_x" the "output" value.
In Part 1 of my question I achieved my desired result when the number of "selected_option_names_" is equal to the number of select dropdowns. However, I need to be able to check for a dynamic number of dropdowns against only up to 3 user selections.
I imagine the solution will be drastically different from part 1, as a result I feel a new question is warranted.
JSFiddle
$(document).ready(function() {
// A successful solution would render all these rules true, radio_button_4,
// radio_button_8 and radio_button_1 would get their respective new values
var objs = [{
selected_option_name_1: "select_1",
selected_option_name_2: "",
selected_option_name_3: "",
selected_option_value_1: "1-1",
selected_option_value_2: "",
selected_option_value_3: "",
radio_btn_name: "radio_button_4",
output: "5000-R"
}, {
selected_option_name_1: "select_1",
selected_option_name_2: "select_2",
selected_option_name_3: "select_5",
selected_option_value_1: "1-1",
selected_option_value_2: "2-2",
selected_option_value_3: "5-2",
output: "10000-R",
radio_btn_name: "radio_button_8"
}, {
selected_option_name_1: "select_4",
selected_option_name_2: "",
selected_option_name_3: "",
selected_option_value_1: "4-1",
selected_option_value_2: "",
selected_option_value_3: "",
output: "15000-R",
radio_btn_name: "radio_button_1"
}];
// Solution for part 1. Will only work if number of dropdowns == "selected_option_name_"
$("#submit").on("click", function() {
$("#wrapper").find("input[type='radio']").each(function(i, o) {
var btn = $(this);
var btn_name = $(this).attr("name");
$.each(objs, function(index, rule) {
if (btn_name == rule.radio_btn_name) {
if(rule.selected_option_value_1 == $('#select_1').val()
&& rule.selected_option_value_2 == $('#select_2').val()
&& rule.selected_option_value_3 == $('#select_3').val()) {
btn.val(rule.output);
console.log(rule.output);
}
}
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div>
<select class="group_1" name="select_1">
<option value=""></option>
<option value="1-1">Dropdown 1-1</option>
<option value="1-2">Dropdown 1-2</option>
<option value="1-3">Dropdown 1-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_1" value="r()">
<input type="radio" name="radio_button_2" value="o()">
<input type="radio" name="radio_button_3" value="n()">
</div>
<div>
<select class="group_1" name="select_2">
<option value=""></option>
<option value="2-1">Dropdown 2-1</option>
<option value="2-2">Dropdown 2-2</option>
<option value="2-3">Dropdown 2-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_4" value="r()">
<input type="radio" name="radio_button_5" value="o()">
<input type="radio" name="radio_button_6" value="n()">
</div>
<div>
<select class="group_1" name="select_3">
<option value=""></option>
<option value="3-1">Dropdown 3-1</option>
<option value="3-2">Dropdown 3-2</option>
<option value="3-3">Dropdown 3-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_7" value="r()">
<input type="radio" name="radio_button_8" value="o()">
<input type="radio" name="radio_button_9" value="n()">
</div>
<br>
<div>
<select class="group_1" name="select_4">
<option value=""></option>
<option value="4-1">Dropdown 4-1</option>
<option value="4-2">Dropdown 4-2</option>
<option value="4-3">Dropdown 4-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_10" value="r()">
<input type="radio" name="radio_button_11" value="o()">
<input type="radio" name="radio_button_12" value="n()">
</div>
<br>
<div>
<select class="group_1" name="select_5">
<option value=""></option>
<option value="5-1">Dropdown 5-1</option>
<option value="5-2">Dropdown 5-2</option>
<option value="5-3">Dropdown 5-3</option>
</select>
</div>
<br>
<button id="submit">Submit</button>
</div>
It turns out the solution wasn't as far off as I thought. I just needed to add an input type hidden with name equal to empty string to account for any empty strings in my objects.
I also updated my jQuery to find the value of names vs id's from part one of my post.
Updated fiddle
$(document).ready(function() {
$("#submit").on("click", function() {
$("#wrapper").find("input[type='radio']").each(function(i, o) {
var btn = $(this);
var btn_name = $(this).attr("name");
$.each(objs, function(index, rule) {
if (btn_name == rule.radio_btn_name) {
if(rule.selected_option_value_1 == $('[name="'+rule.selected_option_name_1 + '"]').val()
&& rule.selected_option_value_2 == $('[name="'+rule.selected_option_name_2 + '"]').val()
&& rule.selected_option_value_3 == $('[name="'+rule.selected_option_name_3 + '"]').val()) {
btn.val(rule.output);
console.log(rule.output);
}
}
});
});
});
});
<div>
<input type="hidden" name="" value="">
<button id="submit">Submit</button>
</div>
I want to disable the Grade 11 and Grade 12, if any BSIT, BSCS, etc (all BS) are selected; but if STEM, TOP, GAS and HUMSS are selected the Grade 11 and Grade 12 will be enabled and all BS will be enabled.
var disable_options = false;
document.getElementById('type').onchange = function () {
//alert("You selected = "+this.value);
if(this.value == "Student")
{
document.getElementById('course').removeAttribute('disabled');
document.getElementById('year_level').removeAttribute('disabled');
}
else
{
document.getElementById('course').setAttribute('disabled', true);
document.getElementById('year_level').setAttribute('disabled', true);
}
}
<div class="control-group">
<label class="control-label" for="inputPassword">Type:</label>
<div class="controls">
<select name="type" id="type" required>
<option></option>
<option>Student</option>
<option>Teacher</option>
<option>Staff</option>
<option></option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Course Type:</label>
<div class="controls">
<select name="course" id="course" required>
<option></option>
<option>BSIT</option>
<option>BSCS</option>
<option>BSHRM</option>
<option>BSBM</option>
<option>BSTM</option>
<option>STEM</option>
<option>TOP</option>
<option>GAS</option>
<option>HUMSS</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Year Level:</label>
<div class="controls">
<select name="year_level" id="year_level">
<option> </option>
<option>First Year</option>
<option>Second Year</option>
<option>Third Year</option>
<option>Fourth Year</option>
<option>Grade 11</option>
<option>Grade 12</option>
</select>
</div>
</div>
Thank you for your response and it will help me for my project thank you.
Similar to what you have already, you need to add an onchange listener to the course element.
document.getElementById("course").onchange = function() {}
Then add ID's to the grade 11 and grade 12 options, so that you can find them in the DOM.
<option id="grade-11">Grade 11</option>
<option id="grade-12">Grade 12</option>
Finally, listen to the onchange value and modify the options accordingly.
document.getElementById('course').onchange = function() {
if (["BSCS", "BSIT"].indexOf(this.value) > -1) {
document.getElementById("grade-11").setAttribute("disabled", true);
document.getElementById("grade-12").setAttribute("disabled", true);
} else {
document.getElementById("grade-11").removeAttribute("disabled");
document.getElementById("grade-12").removeAttribute("disabled");
}
}
That's it! The option elements can take the disabled attribute and cannot be selected when the course element is "BSCS" or "BSIT"
Full code
var disable_options = false;
document.getElementById('type').onchange = function () {
//alert("You selected = "+this.value);
if(this.value == "Student")
{
document.getElementById('course').removeAttribute('disabled');
document.getElementById('year_level').removeAttribute('disabled');
}
else
{
document.getElementById('course').setAttribute('disabled', true);
document.getElementById('year_level').setAttribute('disabled', true);
}
}
document.getElementById('course').onchange = function() {
if (["BSCS", "BSIT"].indexOf(this.value) > -1) {
document.getElementById("grade-11").setAttribute("disabled", true);
document.getElementById("grade-12").setAttribute("disabled", true);
} else {
document.getElementById("grade-11").removeAttribute("disabled");
document.getElementById("grade-12").removeAttribute("disabled");
}
}
<div class="control-group">
<label class="control-label" for="inputPassword">Type:</label>
<div class="controls">
<select name="type" id="type" required>
<option></option>
<option>Student</option>
<option>Teacher</option>
<option>Staff</option>
<option></option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Course Type:</label>
<div class="controls">
<select name="course" id="course" required>
<option></option>
<option>BSIT</option>
<option>BSCS</option>
<option>BSHRM</option>
<option>BSBM</option>
<option>BSTM</option>
<option>STEM</option>
<option>TOP</option>
<option>GAS</option>
<option>HUMSS</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Year Level:</label>
<div class="controls">
<select name="year_level" id="year_level">
<option> </option>
<option>First Year</option>
<option>Second Year</option>
<option>Third Year</option>
<option>Fourth Year</option>
<option id="grade-11">Grade 11</option>
<option id="grade-12">Grade 12</option>
</select>
</div>
</div>
First add value="value" to the <option> elements, so you can read the values consistently. ie: <option value="bsit">BSIT</option>, <option value="grade12">Grade 12</option>, etc.
document.getElementById('course').addEventListener('change', function(){
if(this.value && this.value.substr(0, 2) === 'bs'){
// if a "bs" option is selected, disable grade 11 and 12 options
document.querySelector('[value="grade11"]').setAttribute('disabled', '');
document.querySelector('[value="grade12"]').setAttribute('disabled', '');
}else{
// remove all disabled attributes from options
var disabledOptions = document.querySelectorAll('option[disabled]'),
i, l = disabledOptions.length;
for(i = 0; i < l; ++i){
disabledOptions[i].removeAttribute('disabled');
}
}
});
I have a multi-element and dependent div that asks the user to first pick a state. Once the state is picked, then it will provide users with the appropriate city in the state.
<form method="post">
<div class="summary">
<div class="trip">
<select name="State" class="state">
<option selected disabled>Choose a State</option>
<option>California</option>
<option>New York</option>
</select>
<select name="City" class="city" disabled="true">
<option value="Z">Select a city</option>
</select>
<br><br>
</div>
</div>
jQuery:
$(document).ready(function() {
$("#result").hide();
$("form").on("change", "select", function(){
var current = $(this).index();
if($(this).eq(current).val() == 'Z') {
$(".city").eq(current).html("<option>Select a city</option>");
$(".city").eq(current).attr('disabled', true);
}
else {
if($(this).eq(current).val() == 'California') {
$(".city").eq(current).html("<option>San Francisco</option><option>Los Angeles</option>");
$(".city option:first").eq(current).attr('selected', 'selected');
$(".city").eq(current).attr('disabled', false);
}
if($(this).eq(current).val() == 'New York') {
$(".city").eq(current).html("<option>New York City</option><option>Albany</option>");
$(".city option:first").eq(current).attr('selected', 'selected');
$(".city").eq(current).attr('disabled', false);
}
}
});
var maxAppend = 0;
$("#add").click(function() {
if (maxAppend >= 4) return;
var additional = $(".trip").html();
$(".trip").after(additional);
maxAppend++;
});
});
I want to allow the users to add the class "trip" up to four times. When I use append() or after() as show above. The index of the newly added item rests to 1, which cause the selected in the first trip to reset because it has the same index. What is the proper and elegant way of implementing this?
here is the link to the jsfiddle: https://jsfiddle.net/L2bfmo69/
Here you go with the solution https://jsfiddle.net/L2bfmo69/5/
$(document).ready(function() {
var additional = $(".trip").html();
$("#result").hide();
$("form").on("change", "select", function(){
var current = $(this).index();
if($(this).eq(current).val() == 'Z') {
$(".city").eq(current).html("<option>Select a fare</option>");
$(".city").eq(current).attr('disabled', true);
}
else {
if($(this).val() == 'California') {
$(this).next().html("<option>San Francisco</option><option>Los Angeles</option>");
$(this).next().attr('disabled', false);
}
if($(this).eq(current).val() == 'New York') {
$(this).next().html("<option>New York City</option><option>Albany</option>");
$(this).next().attr('disabled', false);
}
}
});
var maxAppend = 0;
$("#add").click(function() {
$(".summary").append('<div class="trip">' + additional + "</div>");
if ($('.summary').children().length >= 4) {
$('#add').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<div class="summary">
<div class="trip">
<select name="State" class="state">
<option selected disabled>Choose a State</option>
<option>California</option>
<option>New York</option>
</select>
<select name="City" class="city" disabled="true">
<option value="Z">Select a city</option>
</select>
<br><br>
</div>
</div>
<div id="nexttrip"></div>
<button type="button" id="add">Add another trip</button>
<br><br>
<input type="submit">
</form>
After 4 insert by the user I have disabled the add button.
I have this code:
$(document).ready(function(){
$('.container select').each(function(){
$(this).on('change', function(){
var selectedVal = $(this).val();
//console.log(selectedVal);
});
});
$('input').on('change', function () {
var sum = 0;
$('input').each(function() {
sum += Number($(this).val());
});
$('.total span').html(sum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='full'>
<input type='number' value=''>
<select name='select1'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select2'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select3'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='total'>
Total nr: <span>5(2 A1, 3 A2)</span>
</div>
</div>
Is it possible that on change of the select and the input of type number to modify the total number like in the code above using JavaScript/jQuery?
Can anyone help me with this please.
On every change on the inputs or select fields I need to calculate total number of A1 and total number of A2. Hope this make sense. And display them beside the total number.
JSFiddle
We can't give you the full code but I tried to provide some logic for what you want.I think you want some thing like this:
//create a json to collect the sum of numbers
var number = {
a1: 0,
a2: 0,
a1_count:0,
a2_count:0
};
//check in select change
$(".select").change(function() {
//flush previous calculation before using again
number.a1=0,number.a2=0,number.a1_count=0,number.a2_count=0;
//check all the select value and get the corresponding input value
$(".select").each(function() {
var valueType = $(this).val();
if (valueType == "a1") {
number[valueType+"_count"]=number[valueType+"_count"]+1;
number[valueType] = number[valueType] + parseInt($(this).prev().val()||0);
} else if (valueType == "a2") {
number[valueType+"_count"]=number[valueType+"_count"]+1;
number[valueType] = number[valueType] + parseInt($(this).prev().val()||0);
}
});
$("#total").html('Total:'+(number.a1+number.a2)+',A1:'+number.a1+'('+number.a1_count+'),A2:'+number.a1+'('+number.a2_count+')');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='full'>
<input type='number' value=''>
<select name='select1' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select2' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select3' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='total' id="total">
</div>
</div>
This will work for any arbitrary list in the select.
function change() {
var res = {}, fulls = $('.container .full');
fulls.each(function(index){
var selected = $(this).find('select > option:selected').text();
if (! res[selected]) res[selected] = 0;
res[selected] += 1*$(this).find('input[type="number"]').val();
});
var detail = "", total = 0;
for(prop in res) {
if (res.hasOwnProperty(prop)) {
try {
var val = 1*res[prop];
detail += ", "+val+" "+prop;
total += val;
}catch(e){}
}
}
$('.total > span').text(""+total+" ("+detail.substr(2)+")");
}
$().add('.container .full input[type="number"]')
.add('.container .full select[name^="select"]')
.on('change', change);