Reputation: 67
I have 3 HTML lists that I am trying to iterate through check which options are selected and pass the inner HTML to the web service. The first table id="colorList"
is passing the variables through correctly but amount and consistency are not, I can't see what I'm doing wrong. I've tried creating different functions but it didn't work.
The JavaScript code below:
function iterateCheckBoxList(listname) {
var checkBoxListId = listname;
var elementRef = document.getElementById(checkBoxListId);
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];
if (checkBoxRef.checked == true) {
var labelArray = checkBoxRef.parentNode.getElementsByTagName('span');
if (labelArray.length > 0) {
if (checkedValues.length > 0) checkedValues += ',';
checkedValues += labelArray[0].innerHTML;
}
}
}
return checkedValues;
}
function updateSymptoms() {
Parse.initialize("v9s5EdsZ4u9fSfTpr8SD0u3Xcb56nen1GWge47kV", "fjuiNrsJk3AubBY1zDfosLKDoPxzGgKlUxegxbtx");
var UsualSymptoms = Parse.Object.extend("UsualSymptoms");
var query = new Parse.Query(UsualSymptoms);
query.equalTo("PatientID", getUserID());
query.find({
success: function (results) {
var object = results[0];
object.set("SputumColour", iterateCheckBoxList("colourList"));
object.set("SputumAmount", iterateCheckBoxList("amountList"));
object.set("SputumConsistency", iterateCheckBoxList("consistencyList"));
object.save(null, {
success: function (object) {
// The object was saved successfully.
},
error: function (object, error) {
// The save failed.
// error is a Parse.Error with an error code and description.
alert('PARSE didnt work');
console.log(error);
}
});
},
error: function (error) {
alert("Error: " + error.code + " " + error.message);
}
});
}
The HTML Code is below:
<div class="sputumDetails" style="display:none" id="checkboxdiv">
<h2>Colour</h2>
<ul id="colourList" class="lists">
<li><span>Clear</span>
<input id="Clear" type="checkbox" class="checkbox" />
</li>
<li><span>White</span>
<input id="White" type="checkbox" class="checkbox" />
</li>
<li><span>Yellow</span>
<input id="Yellow" type="checkbox" class="checkbox" />
</li>
<li><span>Green</span>
<input id="Green" type="checkbox" class="checkbox" />
</li>
</ul>
<h2>Consistency</h2>
<ul id="consistencyList" class="lists">
<li>Watery
<input type="checkbox" class="checkbox" />
</li>
<li>Sticky
<input type="checkbox" class="checkbox" />
</li>
</ul>
<h2>Amount</h2>
<ul id="amountList" class="lists">
<li>1 Teaspoon
<input type="checkbox" class="checkbox" />
</li>
<li>1 Eggcup
<input type="checkbox" class="checkbox" />
</li>
<li>Half a cup
<input type="checkbox" class="checkbox" />
</li>
<li>1 Cup
<input type="checkbox" class="checkbox" />
</li>
</ul>
</div>
<div id="nextSection">
<input onclick="updateSymptoms()" type="button" class="next" value="Next" />
<br/>
<br/>
<br/>
</div>
The onclick
method is updateSymptoms()
called by a button.
Thanks
Upvotes: 1
Views: 2170
Reputation: 4924
It's because you're looking for innerHTML inside a span.
var labelArray = checkBoxRef.parentNode.getElementsByTagName('span');
amountList
and consistencyList
don't have spans inside them.
Just wrap those labels in a span tag like you did in the colourList
and you'll be good.
Upvotes: 1