We Keep Coding

How to using eq() while dealing in Div tag - Jquery

I am having this following HTML code,
<div class="row add_all">
<div class="col-lg-12">
<span class="pf-title">Title</span>
<div class="pf-field">
<input type="text" placeholder="Write Something here.." />
<button class="add-subject" type="button">
<i class="fa fa-plus"></i>
</button>
<div style="display: inline-flex; margin-bottom: 22px;">
<select data-placeholder="Allow In Search" id="input_data1" style="width: 70%; margin-right: 10px;">
<option value="">Level</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select data-placeholder="Allow In Search" id="input_data2" style="width: 70%; margin-right: 10px;">
<option value="">Level</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
</select>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="sodmzs"></div>
</div>
<div class="col-lg-12">
<button type="submit">Update</button>
</div>
</div>
Where I am having one textbox in the first row and two combo boxes in the second row. When the user will click on plus icon, another textbox in the first row and two combo boxes in the second row will get generated and added. User can generate as many as they wants (1 textbox and 2 combo boxes) via clicking on the add icon.
To get the whole values from the generated div tag, I wrote the following code,
$("#form_id_name").submit(function(e){
e.preventDefault();
var json_data = [];
$(".add_all").each(function(){
title = $(this).children().eq(0).find('input').val();
level_no = $(this).children().eq(0).find("option:selected").text();
level_ro = $(this).children().eq(1).find("option:selected").text();
var single_data = {"title":title, "level_no":level_no, "level_ro":level_ro}
json_data.push(single_data);
});
var string_data = JSON.stringify(json_data);
console.log(string_data);
*ajax code*
But this code doesn't help me to get the desired output that I want. Can you help me out to know where I am doing it wrong ?
Thanks.
NOTE: I am appending the HTML code using $('.sodmzs').append(fieldHTML); where fieldHTML contains html code encapsulated in single quotes.

I believe you're using too many methods to access the DOM elements, this code is a simplified version, I tested it in codepen and returns:
$("button").click(function (e) {
e.preventDefault();
var json_data;
$(".add_all").each(function () {
title = $(this).find("input").val();
level_no = $(this).find("option:selected:first").text();
level_ro = $(this).find("option:selected:last").text();
json_data = {
title: title,
level_no: level_no,
level_ro: level_ro
};
});
json_data = JSON.stringify(json_data);
console.log(json_data);
});
// "{'title':'my title','level_no':'1','level_ro':'III'}"

It looks like you're pushing single_data onto json_data before assigning it a value. Due to hoisting, single_data gets declared at the top of the function - so it's defined and you won't get an error. But, you also won't get your data.
Change
json_data.push(single_data);
var single_data = {"title":title, "level_no":level_no, "level_ro":level_ro}
to just
json_data.push({"title":title, "level_no":level_no, "level_ro":level_ro});
Also, you could clean up the code a bit by adding classes to your inputs & selects. So this:
title = $(this).children().eq(0).find('input').val();
could be simplified to this:
title = $(this).find(".titleinput").val();
It'll also be more robust if you change the underlying markup.

How to reset dropdown box in jquery (select2)?

I have the following code:
https://jsfiddle.net/rmxpq2z0/
<div class="swiper-pagination"></div>
<div id="quote-form" class="quote-form">
<div class="container">
<div class="range range-xs-center range-lg-right">
<div class="cell-xs-10 cell-sm-8 cell-lg-5 text-left offset-top-0">
<div class="inset-lg-left-70">
<div class="quote-form-body">
<div>
<h3 class="text-bold">Get a FREE Quote!</h3>
</div>
<div class="offset-top-25">
<p>Please select your repair from the drop down boxes for an instant quote.</p>
</div>
<div class="offset-top-20">
<div class="form-group">
<select data-minimum-results-for-search="Infinity" class="form-control select-filter" id="console">
<option value="selectconsole">Select My Console</option>
<option value="ps4">PS4</option>
<option value="xboxone">Xbox One</option>
</select>
</div>
<div class="form-group">
<select data-minimum-results-for-search="Infinity" class="form-control select-filter" id="model">
</select>
</div>
Get My Quote
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
ps4models = new Array("Select My Model", "PS4 (Release Model)", "PS4 Slim", "PS4 Pro");
xboxonemodels = new Array("Select My Model", "Xbox One (Release Model)", "Xbox One Slim", "Xbox One Scorpio");
populateSelect();
$(function() {
$('#console').change(function() {
populateSelect();
});
});
function populateSelect() {
console = $('#console').val();
$('#model').empty();
$('#model').html('');
if (console == 'ps4') {
ps4models.forEach(function(t) {
$('#model').append('<option>' + t + '</option>');
$('#model').trigger("chosen:updated");
$('#model').find('option:first').attr('selected', 'selected');
});
}
if (console == 'xboxone') {
xboxonemodels.forEach(function(t) {
$('#model').append('<option>' + t + '</option>');
$('#model').trigger("chosen:updated");
$('#model').find('option:first').attr('selected', 'selected');
});
}
</script>
It works perfectly in the jsfiddle, but when I post the code to the website, it doesn't work.
It DOES populate the dropdown box, but it won't auto select the first option in the second box, and it won't remove any previous option that was selected.
For example, if I select an option in the first box, the second box stays empty until I select something. The first option should be auto selected. Also if I select something in the second box, and then change the selection in the first box, the second box option stays there, instead of being reset.
It is the EXACT same code, no changes at all. Is it possible the CSS is interfering with it?
Any help would be greatly appreciated.
UPDATE
Thanks to DanielH! It turns out the template was using Select2 jquery plugin. His code worked perfectly.

Solution 1:
Since you are using select2, add $('#model').change(); at the end of your console dropdown's select2 config should trigger the update every time you update the model dropdown list.
Solution 2:
If you have no control over the select2 or not sure where to find it, the following also gonna work, add a onchange event to the parent dropdown console:
$( document ).ready(function() {
$('#console').on('change', function(){
$('#model').val('selectmodel');
$('#model').change();
})
});

Select combobox value and send it to next page by hidden field

I have a select combo box , I have to catch the value of selected item of combo box and set it for a hidden field so that I can catch it in next page. But I am not able to do it. Can any one help me in this.
My form tag is as follow ,
<form class="well" name="ddm" id="ddm" style="margin-left: 30px;" action="<%=request.getContextPath()%>/controller/SMSManagementController">
<input type="hidden" name="flowName" value="PERSIST_SCHOOLYEAR_INFO" >
<input type="hidden" name="schoolYearId" id="schoolYearId" value="">
next my select tag is ,
<div class="form-group control-group">
<select class="form-control selectpicker" name="schoolYear" id="schoolYear">
<option>--Select Grade--</option>
<c:forEach var="grade" items="${gradeInfo}">
<option value="${grade.getDropDownId()}">${grade.getDropDownName()}</option>
</c:forEach>
</select>
</div>
I used javascript to do this as,
<script language="JavaScript">
var schoolYear = document.form.schoolYea.value;
document.ddm.schoolYearId.value = schoolYear;
document.write (schoolYear);
</script>
What is the mistake I am doing?

Guys I solved it like this. ,
<script type='text/javascript'>
$(function() {
$('#schoolYear').change(function() {
// get value from combobox
var x = $(this).val();
// set it to hidden fields
$('#schoolYearId').val(x);
});
});
</script>
it worked.

Chosen-jquery show/hide under double condition

I'm trying to show/hide some radio buttons under a double condition with Chosen. Not sure if it can be done.
I've this first select which populates a second select. The second select are indeed several selects shown and hidden depending on the first select's choice.
The goal is to show/hide some radio buttons depending on the select's choices. So if you have select1=A and select2=a' show a certain radio button.
So far I've manages this succesfully with one single select as a condition (JS):
$(".chosen").chosen();
$("#a").chosen().change(function () {
var value = $(this).val();
if (value=="Opt1") {
$("#b").show();
} else {$("#b").hide();}
}).trigger('change');
This is the function that shows/hides the second select.
As I've tried a lot of stuff and didn't succeed I've come to a desperate solution which is forget about double condition and trigger the radio buttons upon the second select's choice, like this (JS):
$(".chosen").chosen();
$("#c").chosen().change(function () {
var value = $(this).val();
if (value=="Opt1") {
$("#radio").show();
} else {$("#radio").hide();}
}).trigger('change');
However it ruins the whole thing because it shows this "c" select when it should be hidden according to the previous functions. Any idea on how overcome this?
UPDATE
This is the whole code. I removed id's making no sense with the real names:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<form>
City
<div id="city">
<select data-placeholder="Select city" id="a" class="chosen-select" style="width:350px;" tabindex="2">
<option value="London">London</option>
<option value="Paris">Paris</option>
</select>
</div>
<br>
Trial
<div id="trial1">
<select data-placeholder="Select court" class="chosen-select" style="width:350px;" tabindex="2">
<option value="Court of District"> Court of District </option>
<option value="Magistrate’s Court"> Magistrate’s Court </option>
</select>
</div>
<div id="trial2">
<select data-placeholder="Select court2" class="chosen-select" style="width:350px;" tabindex="2">
<option value="Cour de cassation"> Cour de cassation </option>
<option value="Cour d’apell"> Cour d’apell </option>
</select>
</div>
<br>
<!--- this is a hidden radio that should show up when city== “Paris” and trial2== “Cour d’apell” --->
<div id=radio1><br>
<input type="radio" name="radiob" value="Apell Criminal"> Apell Criminal <br>
<input type="radio" name="radiob" value="Apell Civil" checked> Apell Civil <br>
</div>
<br>
<input type="button" id="btncalc" value="Go on">
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
<!--- Hides the third select and radio buttons--->
$('#trial2').hide();
$('#radio1').hide();
<!--- Shows/hides second and third select, depending on first select’s choice--->
$(".chosen").chosen();
$("#city").chosen().change(function () {
var value = $(this).val();
if (value=="London") {
$("#trial1").show();
$("#trial2").hide();
} else if (value == "Paris") {
$("#trial1").hide();
$("#trial2").show();
}
}).trigger('change');
<!--- show/hide the radio button--->
$('.chosen').chosen().change(onChange);
var onChange = function () {
var a = $('#city').find('select').val();
var b = $('#trial1').find('select').val();
var c = $('#trial2').find('select').val();
/* do all conditional checks here on values a, b, and c */
/* here is an example check on the values of a and b: */
if (a === 'Paris' && c === ‘Cour d’apell’) {
/* show radios */
$("#radio1").show();
}
}; $('.chosen').chosen().change(onChange);
</script>
</body>
</html>

For consistency's sake, let's wrap each select within a div. We can id the divs 'a', 'b', and 'c', but that is really ugly and I would suggest thinking up something more descriptive.
We can first write a function that we want to run whenever any of our selects has its value changed:
var onChange = function () {
var a = $('#a').find('select').val();
var b = $('#b').find('select').val();
var c = $('#c').find('select').val();
/* do all conditional checks here on values a, b, and c */
/* here is an example check on the values of a and b: */
if (a === 'X' && b === 'ya') {
/* show radios */
}
};
We will then pass our function as the change handler to all .chosen selects (we must be certain that all of the selects that we want to apply 'chosen' to have a class of 'chosen'):
$('.chosen').chosen().change(onChange);

Jquery Loop through fields and drop menus and display entry values into divs

Im trying to work out how to take form field values and selected drop down menu options using a single loop and display them into individual divs on the same page.
At the moment ive managed to only achieve this using repetitive code rather than using a single loop. The form will eventually be very long with many fields and drop down menus (select options), therefore a loop would be a better option.
I would appreciate any help. Thanks in advance.
My code
<html>
<head>
<script src="jquery.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#name").keypress(event) {
var stt = $(this).val();
$("#d_name").text(stt);
});
$("#email").keypress(event) {
var stt = $(this).val();
$("#d_email").text(stt);
});
$("#telephone").keypress(event) {
var stt = $(this).val();
$("#d_telephone").text(stt);
});
$("#car").change(function(event) {
var stt = $(this).val();
$("#d_type").text(stt);
});
$("#type").change(function(event) {
var stt = $(this).val();
$("#d_type").text(stt);
});
});//]]>
</script>
</head>
<body>
Name:
<input type="text" value="" id="name"/>
Email:
<input type="text" value="" id="email"/>
Telephone:
<input type="text" value="" id="telephone"/>
Car:
<select id="car" >
<option value="volvo">Volvo</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Type:
<select id="type">
<option value="automatic">automatic</option>
<option value="manual">manual</option>
</select>
Your Data
Name: <div id="d_name" ></div>
Email: <div id="d_email" ></div>
Telephone: <div id="d_telephone" ></div>
Car: <div id="d_car" ></div>
Type: <div id="d_type" ></div>
</body>
</html>

Do you mean:
$('input, select').change(function() {
$('#d_' + this.id).text($(this).val());
});
To your edit:
var updateText = function() {
$('#d_' + this.id).text($(this).val());
}
$('input').keypress(updateText);
$('select').change(updateText);
Example:
http://jsfiddle.net/kBGZ6/

Try something like this :
$(":input,:select").change(function(event) {
var val = $(this).val(); // get the val
var id = $(this).attr('id'); // get the id
$("#d_" + id).text(val); // use #d_ plus id to set the test to val
});
First line selects all input and select elements and adds processes the following function on change. This only works when the id of the div is d_ plus the id attribute from the form element.
And if you really wanted to, you could do it in a single line:
$(":input,:select").change(function(event) {
$("#d_" + $(this).attr('id')).text($(this).val());
});