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.

creating table header with javascript

I am having two issues with my table, One of them is that I want it to only show when I click a button but when i do it shows and then hides and the other is how do I send a parameter based on the select option to this createtable function
This is part of my code
<form class="form-inline" role="form">
<select multiple class="form-control" style = "width:250px"id = "theselect">
<option selected disabled> Chose a number </option>
<option> all </option>
<option> 1 </option>
<option> 2 </option>
</select>
<button type="submit" id = "load" class="btn btn-default">Load</button>
</form>
<div id ="test">
</div>
<script type = "text/javascript">
$(document).ready(function(){
$("#example").hide();
$("#load").click(function(e){
$("#example").show();
});
});
function createTable(param){
var contents = "<table id='example' class='display' cellspacing='0' width='100%' border>";
....
....
$('#test').append(contents); append it to div
}
$(document).ready(createTable(1));
</script>
Thank you

The reason that the table is getting hidden again is because you've set type="submit" on your button. This means that after the click event handler is done processing, it will submit the form, which causes the page to reload. When it reloads, the table is hidden again. If you change it to type="button" that will prevent that.
You can get the currently selected value of the select, using jquery, with this:
$('#theselect').val();
You can then pass this in to your createTable function (or just get the value using that code, from within the function itself).
Also, it's a really bad idea to create markup from within your JavaScript. It's going to make future maintenance a nightmare, and if it gets complex enough, it could start causing performance issues. It's much better to keep your markup separate, and then show/hide it as needed via JS.

Take a look at this example. It gets the selected values, and inserts them into a table, and table into the dom... HTH.
$(document).ready(function(){
$("#load").click(function(e){
var bits = $('#theselect').val();
$("#example").hide();
$('#test').html('');
createTable(bits)
$("#example").show();
});
});
function createTable(param){
var contents = "<table id='example' class='display' cellspacing='0' width='100%' border><tbody><tr><td>"+param+"</td></tr></tbody></table>";
$('#test').append(contents)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select multiple class="form-control" style = "width:250px"id = "theselect">
<option selected disabled> Chose a number </option>
<option> all </option>
<option> 1 </option>
<option> 2 </option>
</select>
<button id = "load" class="btn btn-default">Load</button>
<div id ="test"></div>

Try this:
$(document).ready(function(){
$("#load").click(function(e){
createTable($("#theselect").val());
$("#example").show(); // In case of class 'display' gives it 'display:none'
});
});
function createTable(param){
var contents = "<table id='example' class='display' cellspacing='0' width='100%' border>";
$('#test').append(contents);
}
#example doesn't exists at the beginning so I removed $("#example").hide().

Hide/show div section - select option

Thanks to this post I've achieved to hide a dropdown menu when a value from a selectfield it's selectd:
$(function () {
var selectField = $('#id_type_contract'),
verified = $('#id_mod_contracts');
function toggleVerified(value) {
value == 'Modification' ? verified.show() : verified.hide();
}
// show/hide on load based on pervious value of selectField
toggleVerified(selectField.val());
// show/hide on change
selectField.change(function() {
toggleVerified($(this).val());
});
});
})(django.jQuery);
But it doesn't work as I wanted: Image , because still remains its label and 'Add' button (green cross). So, I think the best way to proceed is to hide the entire div, am I right?
html
<div class="form-row field-mod_contracts">
<div>
<label for="id_mod_contracts">Modification:</label>
<select id="id_mod_contracts" name="mod_contracts" style="display: none;">
<option value="" selected="selected">---------</option>
<option value="4">Contract foo</option>
<option value="7">Contrato bar</option>
<option value="8">contract CCCC</option>
</select> <img src="/static/admin/img/icon_addlink.gif" width="10" height="10" alt="Add another">
</div>
</div>
How could I adapt the above JavaScript function? Is there any other better option?

Either do as #Aumo suggest, unless you have the class field-mod_contracts on more elements (then it would hide them all).
If so you can instead use:
verified = $('#id_mod_contracts').parent();
This will select the inner most div
or:
verified = $('#id_mod_contracts').closest('.field-mod_contracts');
This will select the outer most div

Two hide the whole input section, change:
verified = $('#id_mod_contracts');
to
verified = $('.field-mod_contracts');

Keep an element disabled until dropdown is not selected in Angularjs

i am trying to do a small application and i am completely new to this.
here is what my code looks like.
<select id="servicename" ng-model="ServicePackages" ng-options="servicename for (servicename, ServicePackages) in ServiceType"><option value=''>Select</option></select>
<select ng-model="price" ng-disabled="!ServicePackages" ng-options="servicepack for (servicepack, price) in ServicePackages"><option value="">Select</option></select>
<h1 ng-disabled="!ServicePackages || !price">{{price + 1}}</h1>
I dont want H1 tag to show up until there is no second dropdown selected.
And i am not able to bind the data for
<form>
<select id="servicename" ng-model="ServicePackages" ng-options="servicename for (servicename, ServicePackages) in ServiceType"><option value=''>Select</option></select>
<select ng-model="price" ng-disabled="!ServicePackages" ng-options="servicepack for (servicepack, price) in ServicePackages"><option value="">Select</option></select>
<input type="text" ng-model="numberOfpages" />
<h1 ng-disabled="!ServicePackages || !price">{{(price + numberOfpages)}}</h1>
</form>
here also its just keep adding, but not performing the sum.
Thank you in advance

ng-disabled isn't applicable to a <h1> tag because it isn't any kind of user input. Try it using ng-if, or ng-show (or ng-hide).
<h1 ng-hide="!ServicePackages || !price">{{price + 1}}</h1>
As for the addition, you must ensure you're adding 2 numbers, not strings.

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.