I have a requirement to build a survey with multiple questions. Based on the response to one of the questions (selected from the drop down) I need to rephrase the next question which also involves drop down selection. I am doing a function call onchange and changing the text of next question and it is getting changes, but the dropdown is not getting displayed. Below is the code snippet. Please let me know what is going wrong.
HTML:
<div class="section" id="question" style="text-align: center;"><!-- Put the questions here - Start -->
<div class="section single-question" id="qs6" onchange="capture()">
<p><span class="number">6.</span>What do you like most about us?</p>
<div class="custom-select"><select id="q6_select" data-storage="experience_call">
<option value="">Please select</option>
<option value="A">ABCD</option>
<option value="E">EFGH</option>
<option value="G">Greatly satisfied by the service</option>
<option value="Others">Others Specify</option>
</select>
<div class="error-message">Please select an item from the menu</div>
</div>
<div class="textarea-container">
<div></div>
<div class="error-message">Please fill out the required field</div>
</div>
</div>
<div class="section single-question" id="qs7">
<p>Why you decided to select:</p>
<div class="custom-select"><select id="q6_select" data-storage="experience_call">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="Others">Others Specify</option>
</select>
<div class="error-message">Please select an item from the menu</div>
</div>
<div class="textarea-container">
<div></div>
<div class="error-message">Please fill out the required field</div>
</div>
</div>
Script:
function capture() {
var qselect = $("#q6_select").find('option:selected').text();
if(qselect.indexOf("BCD") > 0)
{
$('#qs7').text('You have selected: ABCD');
}
else if(qselect.indexOf("FGH") > 0)
{
$('#qs7').text('You have selected: EFGH');
}
}
I think you have a small error in this line
<div class="section single-question" id="qs7">
You need to close the div and keep it as an empty div, like this:
<div class="section single-question" id="qs7"> </div>
When you are running your JS code, you are replacing all of its contents which includes the next dropdown. See JsFiddle
You can also replace the .text method to use .innerHtml if you want to add some html in that div. Read more here.
I think the above answers your exact question on why the next dropdown is gone. If now you want to also then have some logic to control the next dropdown content, I think this stackoverflow answer will answer it.
Try this:
var Options = {
'A': {
"Please select": "",
"A": "A value",
"B": "B value",
"C": "C value",
"D": "D value",
},
'E': {
"Please select": "",
"E": "E value",
"F": "F value",
"G": "G value",
"H": "H value",
},
'G': {
"Please select": "",
"G": "G value",
},
'Others': {
"Please select": "",
"Others": "Others value",
},
};
$('#q6_select').on('change', function(e) {
if (this.value == "") {
$('#qs7').hide();
$('#error-message-1, #error-message-2').show();
} else {
$('#qs7').text('You have selected: ' + this.options[this.selectedIndex].innerText);
$('#error-message-1, #error-message-2').hide();
$('#error-message-3, #error-message-4').show();
$('#q7_select').empty();
$.each(Options[this.value], function(key, value) {
$('#q7_select').append($("<option></option>").attr("value", value).text(key));
});
}
});
$('#q7_select').on('change', function(e) {
if (this.value == "") {
$('#error-message-3, #error-message-4').show();
} else {
$('#error-message-3, #error-message-4').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section" id="question" style="text-align: center;"><!-- Put the questions here - Start -->
<div class="section single-question" id="qs6">
<p><span class="number">6.</span>What do you like most about us?</p>
<div class="custom-select"><select id="q6_select" data-storage="experience_call">
<option value="">Please select</option>
<option value="A">ABCD</option>
<option value="E">EFGH</option>
<option value="G">Greatly satisfied by the service</option>
<option value="Others">Others Specify</option>
</select>
<div class="error-message" id="error-message-1">Please select an item from the menu</div>
</div>
<div class="textarea-container">
<div></div>
<div class="error-message" id="error-message-2">Please fill out the required field</div>
</div>
</div>
<div class="section single-question" id="qs7"></div>
<p>Why you decided to select:</p>
<div class="custom-select"><select id="q7_select" data-storage="experience_call">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="Others">Others Specify</option>
</select>
<div class="error-message" id="error-message-3">Please select an item from the menu</div>
<div class="textarea-container">
<div></div>
<div class="error-message" id="error-message-4">Please fill out the required field</div>
</div>
</div>
Have added an Id pId to the
<p id='pId'>Why you decided to select:</p>
and then in the script added the below code. This worked as per the requirement.
var ptag = docuemnt.getElementById('pId');
ptag.innerhtml = "Your string here";
Related
I am having a terrible time wrapping my head around arrays for Vue JS.
new Vue({
el: '#app',
template: `
<div class="cascading-dropdown">
<div class="dropdown">
<span>Cereal:</span>
<select v-model="cerealname">
<option value="">SELECT A CEREAL</option>
<option v-for="(addon1_obj, addon1) in cereals" :value="addon1">{{addon1}}</option>
</select>
</div>
<div class="dropdown">
<span>Addon 1:</span>
<select :disabled="addons1.length == 0" v-model="addon1">
<option value="">Select Addon 1</option>
<option v-for="(addon2_obj, addon2) in addons1">{{addon2}}</option>
</select>
</div>
<div class="dropdown">
<span>Addon 2:</span>
<select :disabled="addons2.length == 0" v-model="addon2">
<option value="">Select Addon 2</option>
<option v-for="addon2 in addons2">{{addon2}}</option>
</select>
</div>
<div class="dropdown">
<span>Addon 3:</span>
<select :disabled="addons2.length == 0" v-model="addon3">
<option value="">Select Addon 3</option>
<option v-for="addon2 in addons2">{{addon2}}</option>
</select>
</div>
<div>Addon 1 text <input id="addon1desc" type="text" v-midel="addon1desc"></div>
<div>Addon 2 text <input id="addon2desc" type="text" v-midel="addon2desc"></div>
<div>Addon 3 text <input id="addon3desc" type="text" v-midel="addon3desc"></div>
</div>
`,
data: function() {
return {
cereals: {
"Lucky Charms": {
"Marshmallows": ["Green Clovers",
"Pink Hearts",
"Yellow Moons",
"Blue Diamonds",
"Purple Horseshoes"
]
},
"Froot Loops": {
"Loops": ["Red Loop",
"Green Loop",
"Blue Loop",
"Yellow Loop"
]
}
},
addons1: [],
addons2: [],
cerealname: "",
addon1: "",
addon2: "",
addon3: ""
}
},
watch: {
cerealname: function() {
// Clear previously selected values
this.addons1 = [];
this.addons2 = [];
this.addon1 = "";
this.addon2 = "";
this.addon3 = "";
// Populate list of countries in the second dropdown
if (this.cerealname.length > 0) {
this.addons1 = this.cereals[this.cerealname]
}
},
addon1: function() {
// Clear previously selected values
this.addons2 = [];
this.addon2 = "";
this.addon3 = "";
// Now we have a continent and country. Populate list of cities in the third dropdown
if (this.addon1.length > 0) {
this.addons2 = this.cereals[this.cerealname][this.addon1]
}
}
}
})
.dropdown {
margin: 10px 0;
padding: 10px 0;
border-bottom: 1px solid #DDD;
}
.dropdown span {
display: inline-block;
width: 80px;
}
<body>
<div id="app"></div>
</body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
Here's a fiddle: https://jsfiddle.net/4zfh80au/
When you select Lucky Charms in the first dropdown, the 2nd dropdown changes to Marshmallows. The 3rd and 4th dropdowns change to the individual marshmallow types.
What I want is to add data to the text boxes based on the dropdown selection. When you choose the 2nd dropdown to be Marshmallows, I want the corresponding text box to fill in some text like "Marshmallows are yummy." The 3rd and 4th dropdowns should do the same.
Could anyone please point me in the right direction?? Much appreciated.
The binding is already set up in each of your <select> tags with v-model="addon1", addon2, and addon3.
In your <div>, have the bindings in the text fields match the ones defined in your <select> tags like so:
...
<div class="dropdown">
<span>Addon 1:</span>
<select :disabled="addons1.length == 0" v-model="addon1">
<option value="">Select Addon 1</option>
<option v-for="(addon2_obj, addon2) in addons1">{{addon2}}</option>
</select>
</div>
<div class="dropdown">
<span>Addon 2:</span>
<select :disabled="addons2.length == 0" v-model="addon2">
<option value="">Select Addon 2</option>
<option v-for="addon2 in addons2">{{addon2}}</option>
</select>
</div>
<div class="dropdown">
<span>Addon 3:</span>
<select :disabled="addons2.length == 0" v-model="addon3">
<option value="">Select Addon 3</option>
<option v-for="addon2 in addons2">{{addon2}}</option>
</select>
</div>
<div>Addon 1 text <input id="addon1desc" type="text" v-model="addon1"></div>
<div>Addon 2 text <input id="addon2desc" type="text" v-model="addon2"></div>
<div>Addon 3 text <input id="addon3desc" type="text" v-model="addon3"></div>
</div>
...
You can check out the working fiddle here.
Additionally, the fiddle link that you shared had a typo in v-model. If you run the app, you should see an error thrown into the console that says something like this:
[Vue warn]: Failed to resolve directive: midel
(found in anonymous component - use the "name" option for better debugging messages.)
If something in the app is failing, you can use the console to better debug your code.
For anyone wanting the solution, the Fiddle is here:
https://jsfiddle.net/q1jm0ccf/
The array looks as follows:
data: function() {
return {
cereals: {
"Lucky Charms": {
"Marshmallows": [
{"title": "Green Clovers", "value": "The Green Clovers is nice"},
{"title":"Pink Hearts", "value": "The Pink Hearts is cool"},
{"title":"Yellow Moons", "value": "The Yellow Moons is best"},
{"title":"Blue Diamonds","value": "The Blue Diamonds is bad"},
{"title":"Purple Horseshoes","value": "The Purple Horseshoes is normal"},
{"title":"Red","value": "The red ones are great."},
{"title":"Yellow","value": "The yellow ones are better"}
]
},
"Froot Loops": {
"Loops": [
{"title":"Red","value": "Red loops are cherry"},
{"title":"Green","value": "Green loops are lime"}
]
}
},
I have been wrecking my brain trying to get around this issue. I'm having trouble where a Select dropdown list is not being populated with the results returned based on a previous selection.
The relevant HTML code is as follow:
<div class="widget property_search">
<form action="https://www.agentsforbidden.co.za/" id="searchproperty" name="searchproperty" method="get">
<div class="search_frm_left clearfix">
<div class="form_row clearfix advt-ptype">
<span class="chkbox"><input type="radio" name="property_type" id="property_type_Sale" value="Sale" checked= checked><label for="property_type_Sale"> Sale</label></span>
<span class="chkbox"><input type="radio" name="property_type" id="property_type_Rent" value="Rent"><label for="property_type_Rent"> Rent</label></span>
</div> <div class="form_row">
<label>Keyword</label>
<input type="text" value="" name="s" id="search_near-1135114534" class="searchpost" placeholder="" />
</div>
<div class="form_row clearfix">
<label>Province</label> <div class="selectbox">
<select name="adv_zone" id="adv_zone" class="adv_zone">
<option value="">Select province</option>
<option value="5">Eastern Cape</option>
<option value="3">Free State</option>
<option value="6">Gauteng</option>
<option value="2">KwaZulu-Natal</option>
<option value="9">Limpopo</option>
<option value="7">Mpumalanga</option>
<option value="10">North West</option>
<option value="8">Northern Cape</option>
<option value="11">Western Cape</option>
</select>
</div>
</div>
<div class="form_row clearfix">
<label>City</label> <div class="selectbox">
<select name="adv_city" id="adv_city" class="adv_city">
<option value="">Select City</option>
</select>
</div>
</div>
The problem is that when I select the Province that the City drop down list is not getting populated. When I inspect the POST and return values with FireBug I can see that I am getting the response that is required (All the options for the dropdown) however it just simply doesn't get populated.
Here's the relevant jQuery Ajax bit:
jQuery(".adv_zone").live("change", function () {
var e = jQuery(this),
t = e.parents(".form_front_style").find(".adv_city"),
i = jQuery(this).val();
jQuery.ajax({
url: ajaxUrl,
type: "POST",
data: "action=fill_city_cmb&state_id=" + i,
success: function (e) {
if (t.html(e), t.trigger("change"), "" != t.find("option:selected").val()) t.trigger("change");
else {
var i = t.find("option").first();
t.next("span.select").text(i.text())
}
}
})
})
And lastly the response (truncated due to already long post):
<option value="">Select City</option><option value="5651">Akasia</option><option value="5652" >Alberton</option><option value="5653">Albertynsville</option><option value="5654" >Alexandra</option><option value="12694" >Alphen Park</option><option value="5655">Alrapark</option><option value="5656">Alrode</option><option value="5657">Althea</option>
When the ajax is fired I can see that the following part is true and is executed:
if (t.html(e), t.trigger("change"), "" != t.find("option:selected").val()) t.trigger("change");
I would GREATLY appreciate any insight as to why this is not working as expected.
Here is my HTML;
<div class="pagination__page" data-pagination-page="" data-pagination-group="group-0" style="display: block;">
<div class="question">
<h2 class="question__title">Country</h2>
<div class="form-field form-field--dropdown">
<select required="1" name="country" data-parsley-group="group-0">
<option selected="selected" value="">Please select...</option>
<option value="great-britain">Great Britain</option>
<option value="zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<div class="question"> // line 13
<h2 class="question__title">Postcode</h2>
<div class="form-field">
<input data-parsley-postcode="1" name="postcode" type="text" data-parsley-group="group-0">
</div>
</div>
</div>
How can I hide the div starting on "line 13" (see comment in code) unless the Country question above's input is Great Britain?
It's dynamic so I can't assign the div directly to give it a name. All I have to go on is the input which has name of postcode.
If I could access that div, then I think it would be something like;
$('#country').on('change.postcode', function() {
$("#").toggle($(this).val() == 'great-britain');
}).trigger('change.postcode');
There is a function in JQuery called parent(). You can use get the input node via
$("input[name='postcode']")
and then access the parent of it's parent to hide it like that:
$("input[name='postcode']").parent().parent().hide();
Learn more about parent() here.
EDIT (thanks to andlrc):
You could also use closest() instead of the double parent():
$("input[name='postcode']").closest("div.question").hide();
see here.
A combination of parent and next should do the trick:
$(function(){
$('select[name="country"]').change(function(){
var country = $(this).val();
if(country == 'great-britain'){
$(this).parent().parent().next('.question').show();
}
else{
$(this).parent().parent().next('.question').hide();
}
});
});
In order to hide the dinamically generated html, you can do something like this:
$('.question').each(function(i,item){
if((i+1) % 2 ==0){
$(item).hide();
}
});
Updated fiddle: https://jsfiddle.net/robertrozas/pen942nf/1/
You This must work:
<style>
.hide{display:none;}
</style>
<div class="pagination__page" data-pagination-page="" data-pagination-group="group-0" style="display: block;">
<div class="question">
<h2 class="question__title">Country</h2>
<div class="form-field form-field--dropdown">
<select required="1" name="country" data-parsley-group="group-0">
<option selected="selected" value="">Please select...</option>
<option value="great-britain">Great Britain</option>
<option value="zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<div class="question sh"> // line 13
<h2 class="question__title">Postcode</h2>
<div class="form-field">
<input data-parsley-postcode="1" name="postcode" type="text" data-parsley-group="group-0">
</div>
</div>
</div>
<script>
$("#country").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="great-britain"){
$('.sh').show();
}
else{
$('.sh').hide();
});
});
</script>
How would I be able to display select menu when someone select the value option in style id? Code is like this.
HTML :
<div class="row">
<select name="style" id="style">
<option value="banner"></option>
<option value="text"></option>
<option value="vedio"></option>
</select>
</div>
<div class="row">
<select name="language" id="language" style="display:none;">
<option value="EN"></option>
<option value="ES"></option>
<option value="FR"></option>
</select>
</div>
<div class="row">
<select name="english" id="english" style="display:none;">
<option value="text"></option>
<option value="img"></option>
<option value="vedio"></option>
</select>
</div>
<div class="row">
<select name="spanish" id="spanish" style="display:none;">
<option value="text"></option>
<option value="img"></option>
<option value="vedio"></option>
</select>
</div>
<div class="row">
<select name="french" id="french" style="display:none;" >
<option value="text"></option>
<option value="img"></option>
<option value="vedio"></option>
</select>
</div>
SCRIPT :
$('#style').change(function(){
selection = $(this).val();
switch(selection)
{
case 'text':
$('#language').show();
break;
default:
$('#language').hide();
break;
}
});
$('#language').change(function(){
selection = $(this).val();
switch(selection)
{
case 'EN':
$('#english').show();
break;
default:
$('#english').hide();
break;
}
});
i want select text value i get language choice when i select language i get anther select menu
You are using the id selector $('#language') and your selects have no ids. You should give ids to each of your selects or use the attribute-equals selector $('[name="language"]') instead.
Try changing
selection = $(this).val();
to
selection = $('#style option:selected').val();
I have this html code part
<div id="prt">
<select name="selectPrt" class="span12" onchange="sta_callPRT();">
<option value="noPrt">Choose one vehicle.</option>
<option value="prt1">PRT 1</option>
<option value="prt2">PRT 2</option>
<option value="prt3">PRT 3</option>
<option value="prt4">PRT 4</option>
<option value="prt5">PRT 5</option>
</select>
<div class="row-fluid">
<div class="span6">
<div class="section">
<div class="sectionTitle">
<h3>Vehicle Info</h3>
</div>
</div>
<div id="state"><strong>State:</strong> </div>
<div id="freeSeats"><strong>freeSeats:</strong></div>
<div id="battery"><strong>battery:</strong></div>
<div id="totalDistance"><strong>totalDistance:</strong></div>
<div id="location"><strong>Location:</strong></div>
<div id="estimatedTime"><strong>estimatedTime"</strong></div>
<div id="estimatedDistance"><strong>estimatedDistance:</strong></div>
<div id="speed"><strong>speed:</strong></div>
And this Javascript
function sta_callPRT(){
$.getJSON('PRTInfoGenerator.php', function(json){
$.each(json, function(key, value) {
if(key=="state") {
//$('#state').empty();
//document.getElementById("parameters").appendChild(divTag);
$('#state').append(value);
}
if(key=="freeSeats") {
$('#freeSeats').append(value);
}
if(key=="estimatedDistance"){
$('#estimatedDistance').append(value);
}
if(key=="estimatedTime"){
$('#estimatedTime').append(value);
}
if(key=="battery"){
$('#battery').append(value);
}
if(key=="speed"){
$('#speed').append(value);
}
if(key=="location"){
$.each(json.location, function(par_key, par_value) {
$('#location').append(par_key+': '+par_value+' ');
});
}
if(key=="totalDistance"){
$('#totalDistance').append(value);
}
});
});
}
I want to write the vehicle values randomly in html.I have also php code to produce random values for vehicles.When I select a vehicle, it shows some values but in the second selection the new values are added to the end of the first.How can delete the previous values, and add the new values when new selection is made?
For example this is first selection in the web page;
State: Running
freeSeats:0
battery:95
totalDistance:8541
Location:x: -5 y: 34
estimatedTime:15
estimetedDistance:809
Speed:18
This is second;
State: RunningRunning
freeSeats:04
battery:9540
totalDistance:85411848
Location:x: -5 y: 34 x: 84 y: -70
estimatedTime:15269
estimetedDistance:809513
Speed:1818
To clear the divs each time...
function sta_callPRT(){
$('#state, #freeSeats, #battery').empty();
$.getJSON('PRTInfoGenerator.php', function(json){
...
Move the prefix text to outside the divs like freeseats: <div id="freeSeats"></div> and
use $('#freeSeats').text(value) instead of $('#freeSeats').append(value);
appending will append whats already there but text will replace the value instead.
to change the text in the strong tags though you would want to use $('#freeSeats strong') but I recommend not using strong tags and use a style attribute on your div/divs instead.
here is your updated code then:
<div id="prt">
<select name="selectPrt" class="span12" onchange="sta_callPRT();">
<option value="noPrt">Choose one vehicle.</option>
<option value="prt1">PRT 1</option>
<option value="prt2">PRT 2</option>
<option value="prt3">PRT 3</option>
<option value="prt4">PRT 4</option>
<option value="prt5">PRT 5</option>
</select>
<div class="row-fluid">
<div class="span6">
<div class="section">
<div class="sectionTitle">
<h3>Vehicle Info</h3>
</div>
</div>
State:<div id="state"></div>
freeSeats:<div id="freeSeats"></div>
battery:<div id="battery"></div>
totalDistance:<div id="totalDistance"></div>
Location:<div id="location"></div>
estimatedTime"<div id="estimatedTime"></div>
estimatedDistance:<div id="estimatedDistance"></div>
speed:<div id="speed"></div>
and the script:
function sta_callPRT(){
$.getJSON('PRTInfoGenerator.php', function(json){
$.each(json, function(key, value) {
if(key=="state") {
$('#state').text(value);
}
if(key=="freeSeats") {
$('#freeSeats').text(value);
}
if(key=="estimatedDistance"){
$('#estimatedDistance').text(value);
}
if(key=="estimatedTime"){
$('#estimatedTime').text(value);
}
if(key=="battery"){
$('#battery').text(value);
}
if(key=="speed"){
$('#speed').text(value);
}
if(key=="location"){
$.each(json.location, function(par_key, par_value) {
$('#location').text(par_key+': '+par_value+' ');
});
}
if(key=="totalDistance"){
$('#totalDistance').text(value);
}
});
`