These are the set of divs where i want to add the loop on some count.
I have tried jquery and javascript but doesn't work. Please help out.
It takes a count from checkbox and the count is values selected in checkbox the following set of divs need be populated dynamically. I have written a jquery that gets the count as well as the checkbox values.As and when user selects these boxes the set of divs need to be appear as the number of counts.
function arrayValues(item, index)
{
var cd = $("input[name=car_damage]:checked");
var eg = cd.map(function () {return this.value;}).get().join(",");
var temp = new Array();
temp = eg.split(",");
text="";
alert(temp);
//alert(eg);
var ef = cd.size();
alert(ef);
}
Checkbox code:
<hr>
<div class="car_map" id="carmap">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Front
<input type="checkbox" name="car_damage" value="Front" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Wing Left
<input type="checkbox" name="car_damage" value="Front Wing Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Wing Right
<input type="checkbox" name="car_damage" value="Front Wing Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Bonnet
<input type="checkbox" name="car_damage" value="Bonnet"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Windscreen
<input type="checkbox" name="car_damage" value="Windscreen"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Door Left
<input type="checkbox" name="car_damage" value="Front Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Door Right
<input type="checkbox" name="car_damage" value="Front Door Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Roof
<input type="checkbox" name="car_damage" value="Roof"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Back Door Left
<input type="checkbox" name="car_damage" value="Back Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Back Door Right
<input type="checkbox" name="car_damage" value="Back Door Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear Windscreen
<input type="checkbox" name="car_damage" value="Rear Windscreen"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Rear Left
<input type="checkbox" name="car_damage" value="Rear Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Rear Right
<input type="checkbox" name="car_damage" value="Rear Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear
<input type="checkbox" name="car_damage" value="Rear"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block" data-scroll="step3">Back</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block">Save For Later</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-sm btn-custom center-block" data-scroll="step5" id="add_trip" onclick="arrayValues()">Continue</div>
</div>
</div>
</div>
<hr>
<div class="col-xs-12 col-sm-6">
<div class="form-label">
Rear
</div>
<div class="photo-picker" id="photo-picker">
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box photos">
<div class="row">
<div class="col-xs-12">
<h4>Photo Instructions</h4>
</div>
</div>
<div class="photo-sample" id="photo-sample">
<div class="row">
<div class="col-xs-12">
<div class="form-sublabel">
Stand approx. 2m back from the Rear of the vehicle.</div>
<imgsrc="/hfiprojectstorefront/_ui/desktop/common/hfiproject/images/placeholder-photo.png" class="img-responsive center-block" alt="" />
</div>
</div>
</div>
<div class="photo-real" id="photo-real">
<div class="row">
<div class="col-xs-12">
<div class="cont">
<video id="v" class="img-responsive center-block"></video>
<div class="player-buttons" id="take" style="display:none;"></div>
</div>
<canvas id="canvas" style="display:none;"></canvas>
<img src="" id="photo" class="img-responsive center-block" />
</div>
<div class="col-xs-12">
<div class="form-label">
Was this photo taken at the scene?
</div>
</div>
<div class="col-xs-12">
<div class="list-group segmented-control">
<span class="list-group-item half active">
YES
<input type="radio" name="scene_photo" value="YES" checked="checked"/>
</span>
<span class="list-group-item half ">
NO
<input type="radio" name="scene_photo" value="NO"/>
</span>
</div>
</div>
<div class="col-xs-12">
<div class="form-label">
Optional Comment
</div>
</div>
<div class="col-xs-12">
<textarea class="form-control" name="optional" id="optional"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
Delete
</div>
<div class="col-xs-12 col-sm-6">
Save
</div>
</div>
</div>
</div>
</div>
<hr>
It is not clear the solution you are seeking.
However requiring the least amount of work would be creating a function to execute on change and jquery to manipulate your DOM elements not a great solution though if you require state management.
I believe a better solution would be use reactjs where use can create components and utilise jsx.
Or AngularJS frameworks where you can do an ng-repeat or custom directive that takes inputs to display your divs.
It's really not clear what you are trying to populate, but you can generate any DOM element dynamically like this.
fnCreateDOMElement = function(el, num, context) {
var e = document.createElement(el);
for(var i=0; i<num; i++){
document.context.appendChild(e);
}
}
above snippet could be utilized like this.
document.getElementById("populator").addEventListener('change', function(){
//reset contents of container if needed. comment if not needed
document.getElementById('container').innerHTML = "";
var times = this.value;
for(var i=0; i<times; i++) {
var mydiv = document.createElement('div');
var myparag = document.createElement('p');
mydiv.setAttribute('class', 'foo');
myparag.setAttribute('class', 'fooized');
var txt = document.createTextNode('Foo #'+(i+1));
myparag.appendChild(txt);
mydiv.appendChild(myparag);
document.getElementById('container').appendChild(mydiv);
}
});
<div id="container">
</div>
<input type="number" min="0" placeholder="how many?" id="populator">
above functions can be refactored with javascript's default/optional arguments.
Related
I have a foreach loop and this creates multiple div elements.
I added an onClick event when user clicks on the div it is doing fadeIn or fadeOut.
The problem is, that all of the div's obvouisly have same id and when I click on one of the div's it is fade in and fade out only the first div element.
I don't really know how to fade in and fade out them individually.
I have added my code in Fiddle
function showItems() {
var x = document.getElementById('showItemDiv');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems()">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 1</span>
</p>
</div>
</div>
<div id="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">1</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems()">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 2</span>
</p>
</div>
</div>
<div id="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">2</span>
</p>
</div>
</div>
</div>
</div>
</div>
You should not use same id for multiple elements. Id for each element should always be unique. If you use same id the selector returns only the first element with matching id.
You should use class with same name.
For each element clicked you can find its parent and for that you can find a child with required class and toggle its visibility.
function showItems(ev) {
var x = $(ev.target).parents('.row.rounded-top').find('.showItemDiv');
$(x).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems(event)">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 1</span>
</p>
</div>
</div>
<div class="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">1</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems(event)">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<span class="" style="font-size:10px;">Item Name:</span>
</div>
<div class="row">
<p>
<span class="" id="">Item 2</span>
</p>
</div>
</div>
<div class="showItemDiv" style="display: none;">
<div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row">
<span class="" style="font-size:10px;">Time Setup:</span>
</div>
<div class="row">
<p>
<span class="" id="id">2</span>
</p>
</div>
</div>
</div>
</div>
</div>
here is the code to reproduce the issue in bootstrap3.
what I want is to align the radio buttons below the center of the quiz title, while keeping text align left.
current title is inline flow by default bs3 sample form structure.
i'm thinking if using
position absolute; or display:block/inline-block; margin-left:auto; margin-right:auto; display:flex; methods etc. might break the responsive flow. any suggestions how you balance responsive and align nicely ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div><!--end of container-fluid-->
</div>
</body>
I received some suggestions among below answers for making it appear like center aligned in bootstrap3, however I also found some pitfalls using the above method , listed in below picture I roughly made.
Both the Answer text in radio label and the Quiz Title text length are Variable, so this is the tricky part in this case to make it center aligned while keep responsive using css.
Add Some CSS
.radio{display:inline-block;}
Add Class radio parent div to col-xs-12 with text-center
Have you tried changing the class "col-xs-12" to "col-xs-8 col-xs-offset-4" to center it?
You can achieve this by wrapping all your radio button divs inside a parent div. And then placing this div accordingly to the device using offset.
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
//.. all your radio buttons div's inside this
<div>
Below is the working snippet. Have a check.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="form-group">
<input type="hidden" name="Q2[cat]" value="Conscientiousness">
</div>
<div class="form-group">
<input type="hidden" name="Q2[POST_ID]" value="88">
</div>
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div>
<!--end of container-fluid-->
</div>
</body>
I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example
Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).
This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 8 years ago.
class selectors that are produced on the fly with my jquery functions are not working.
here is my jquery:
$(".add-category").on("click",function () {
// var id = $('#row-panel #col-panel').length.toString();
var id2 = ($('#parent-row #child-row').length + 1).toString();
$('#parent-row').append('<div class="row p-10" id="child-row">\
<div class="col-lg-12">\
<div class="panel panel-default panel-grey">\
<div class="panel-body">\
<div class="row p-10">\
<div class="col-lg-4" >\
<label>Category Name</label>\
</div>\
<div class="col-lg-8">\
<input type="text" class="form-control" id="website-url">\
</div>\
</div>\
<div class="row p-10">\
<div class="col-lg-4" >\
<label>Category URL</label>\
</div>\
<div class="col-lg-8">\
<input type="text" class="form-control" id="website-url">\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>\
');
});
$(".remove-category").on("click",function () {
if ($('#parent-row #child-row').length == 1) {
alert("You cannot remove the last form!");
return false;
}
$("#parent-row #child-row:last-child").remove();
});
and here is the mark-up
<div class="panel-body" id="parent-row">
<div class="row p-10">
<div class="col-lg-4">
<label>1 Category</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-lg-offset-6 col-lg-4">
<label>Add Sub Panel</label>
</div>
<div class="col-lg-2">
<a href="#" id="add-category" class="add-category">
<i class="fa fa-plus"></i>
</a>
<a href="#" id="remove-category" class="remove-category">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="row p-10" id="child-row">
<div class="col-lg-12">
<div class="panel panel-default panel-grey">
<div class="panel-body">
<div class="row p-10">
<div class="col-lg-4" >
<label>Category Name</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control" id="website-url">
</div>
</div>
<div class="row p-10">
<div class="col-lg-4" >
<label>Category URL</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control" id="website-url">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the div that has an id parent-row is inside a dynamic div that is produced on the fly.
here is the jsfiddle: http://jsfiddle.net/fn51hrgv/2/
EDIT:
here is the latest code now and its working perfectly based on the behavior that i want it to be. http://jsfiddle.net/fn51hrgv/4/
try something like this:
$(".panel-body").on("click", ".remove-category",function () {
I'm inexperienced with JS and jQuery and have this simple script written to total up some numbers of form inputs within the scope of an h3 into a div in that same scope. But I'm coming up with nothing. Using the Console, I can tell that it's getting the initial values for the keyup event correctly, but when I attempt to get these items within an h3 scope, it comes up with an empty array. Reading the jQuery() docs,
$( 'input#survey_scores_score_item, div.my_group')
yields a hash which nicely shows three arrays of these groupings. But also all the individual input items. So clearly, I'm not setting up these query correctly. How would I set up the scoping so that the individual inputs are not cluttering up the array so I can run the jQuery .each over the groups?
Here is my markup:
<body>
<form accept-charset="UTF-8" action="/surveys/1" class="edit_survey" id="edit_survey_1" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="patch"></div>
<h2>General</h2>
<h3>Policies and Procedures</h3>
<div class="my_group">
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
GivEx and Smart Cards being tracked?
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-6 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="2" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-6 small-6 columns">
/ 2
</div>
</div>
</div>
</div>
</div>
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
Change Fund/Petty Cash (810) reviewed daily?
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-8 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="5" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-8 small-6 columns">
/ 5
</div>
</div>
</div>
</div>
</div>
<div class="item enclosure row">
<div class="item_text total small-9 large-9 columns">
Total:
</div>
<div class="item_scoring item_scoring_total small-3 total columns">
<div class="row">
<div class="item_score item_score_total small-6 columns">
XX
</div>
<div class="item_hiscore total small-6 columns">
/ 7
</div>
</div>
</div>
</div>
</div>
<h3>Physical Security</h3>
<div class="my_group">
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
POS area is neat and well organized
<!-- br--><p>No clutter around POS - Check card readers
<br>Bills $20.00 and larger and checks under till and neatly organized</p>
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-7 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="1" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-7 small-6 columns">
/ 1
</div>
</div>
</div>
</div>
</div>
<div class="item enclosure row">
<div class="item_text total small-9 large-9 columns">
Total:
</div>
<div class="item_scoring item_scoring_total small-3 total columns">
<div class="row">
<div class="item_score item_score_total small-6 columns">
XX
</div>
<div class="item_hiscore total small-6 columns">
/ 1
</div>
</div>
</div>
</div>
<h3>Safety</h3>
<div class="my_group">
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
Attendant wearing gloves
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-10 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="8" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-10 small-6 columns">
/ 8
</div>
</div>
</div>
</div>
</div>
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
Proper Lifting by attendants
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-11 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="5" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-11 small-6 columns">
/ 5
</div>
</div>
</div>
</div>
</div>
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
Area in and around DEC clean
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-9 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="1" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-9 small-6 columns">
/ 1
</div>
</div>
</div>
</div>
</div>
<div class="item enclosure row">
<div class="item_text total small-9 large-9 columns">
Total:
</div>
<div class="item_scoring item_scoring_total small-3 total columns">
<div class="row">
<div class="item_score item_score_total small-6 columns">
XX
</div>
<div class="item_hiscore total small-6 columns">
/ 14
</div>
</div>
</div>
</div>
</div>
<input name="commit" type="submit" value="Edit survey">
</form>
</main>
</body></html>
The answers are helping me to see that I'm unable to select a specific tag within an h3 because it's its own element. so I've modified the markup so that each logical grouping is within a div with a class of "my_group". I'm trying to get my script in Fiddle to work on totaling up all the inputs found within these div's. I need to find a way to logically have this script find within these logical units.
My updated fiddle is here: http://jsfiddle.net/sam452/Yk33t/7/
I hope someone is kind enough to educate me on how I should scope this and get this script to work as expected.
The selector $('input#survey_scores_score_item', 'h3') is equivalent to $('h3').find('input#survey_scores_score_item').
Since the h3 contains no children you will never select any elements. If you already have the id of the element there is no need for placing the selector in any sort of context, just use: $("#survey_scores_score_item").