Rajat Bansal Rajat Bansal - 6 months ago 10
HTML Question

Selectmenu in the table is sending all options instead of selected one when doing 'post'

I have a table that gets data from backend and is displayed. It refreshes every few seconds. A user can press an 'Edit' button and stop table load and once that button is pressed, an additional column with 'Edit' buttons is appended to whole table. Once user presses on 'Edit' of that specific row only that row can be edited. Now this row, contains a field which is supposed to be a dropdown selectmenu with few options. Once one of the options is selected, and apply button is pressed, the post request is showing all options being sent in the header.
This function below parses xml data and prepares the table structure:-
(no problem here)

function parseAlmSettingDataXml(xml)
{

var $xml = $(xml),
numOfAlms = $xml.find('alrmNum').text();
use = 0,
alarmData = $xml.find('alrmData').text();

$(function(){

var rowCount=0;
var r1 = new Array(), r2 = new Array();

$.each(JSON.parse(alarmData.replace(/"/g,'"')), function(){

if (rowCount < 10) {
populateArray(r1, this);
}
else {
populateArray(r2, this);
}
rowCount++;
});

$('#itemList1 tbody').html(r1.join(''));
$('#itemList2 tbody').html(r2.join(''));

//selectmenu is initialized only when table is made
$('.alarmlvl').selectmenu({disabled:true});

// Hide tables not used
if (rowCount < 1) {
if ( $( "#table1" )[0] != undefined) {$( "#table1" )[0].style.display="none";}
if ( $( "#table2" )[0] != undefined ) {$( "#table2" )[0].style.display="none";}
}
else {
if ( $( "#table1" )[0] != undefined) {$( "#table1" )[0].style.display="";}
if (rowCount < 10) {
if ( $( "#table2" )[0] != undefined){$( "#table2" )[0].style.display="none";}
}
else {
if ( $( "#table2" )[0] != undefined){$( "#table2" )[0].style.display="";}
}
}
});

}


Here is populateArray function which fills the table with the data(no problem here):-

function populateArray(a, d)
{
var level = typeof(d.lvl) == 'undefined' ? 'UNK' : d.lvl;
a.push('<tr>');
a.push('<td>');
a.push(d.desc); //alarm desc
a.push('</td>');
a.push('<td>');
a.push('<select class="alarmlvl"><option selected value='+level+'>'+level+'</option></select>'); //alarm level
a.push('</td>');
a.push('<td contentEditable="false">');
a.push(d.sett); //alarm set time
a.push('</td>');
a.push('<td contentEditable="false">');
a.push(d.clrt); //alarm clear time
a.push('</td>');
a.push('</tr>');
}


Below is when the global 'edit' button is clicked:-

$("#editFields").click(function(){
clearInterval(ajax_interval);

/*need timeout to stop table load and add another column for edit*/
setTimeout(function(){
$("tbody tr").each(function(){
$(this).append("<td><button class='editRow'>Edit</button></td>");
});

//making editable rows highlight
$(".editRow").button().click(function(e){
e.preventDefault();
$(this).closest("tr").css('border','5px solid red').find("td").attr("contentEditable","true");
$(this).closest("tr").find('.alarmlvl').selectmenu('option','disabled',false);
var alarmLevel=$(this).closest("tr").find(".alarmlvl :selected").text();
alarmLevelDropdown(alarmLevel);
});

}, 500);

});

function alarmLevelDropdown(currentLevel){



switch(currentLevel){

case 'IGN': $(".alarmlvl").append("<option value='NFY'>NFY</option> <option value='MIN'>MIN</option> <option value='MAJ'>MAJ</option> <option value='CRI'>CRI</option>");
break;

case 'NFY': $(".alarmlvl").append("<option value='IGN'>IGN</option><option value='MIN'>MIN</option> <option value='MAJ'>MAJ</option> <option value='CRI'>CRI</option>");
break;

case 'MIN': $(".alarmlvl").append("<option value='IGN'>IGN</option> <option value='NFY'>NFY</option> <option value='MAJ'>MAJ</option> <option value='CRI'>CRI</option>");
break;

case 'MAJ': $(".alarmlvl").append("<option value='IGN'>IGN</option> <option value='NFY'>NFY</option> <option value='MIN'>MIN</option> <option value='CRI'>CRI</option>");
break;

case 'CRI': $(".alarmlvl").append("<option value='IGN'>IGN</option> <option value='NFY'>NFY</option> <option value='MIN'>MIN</option> <option value='MAJ'>MAJ</option>");
break;

default: console.log("invalid alarm level!");
break;

}

}


Below is where the problem is when I click global Apply button:-

$("#applyButton").click(function(){
$("#editFields").button("option","disabled",false);
$("#applyButton").button("option","disabled",true);
$("#cancelButton").button("option","disabled",true);

$("tbody tr").find("td").each(function(){
//traversing rows and adding td that are editable and making sure Edit buttons are not included in the array
if($(this).is("[contentEditable ='true']") && $(this).text() !== "Edit"){

if($(this).find('select.alarmlvl').length){ //checking if this is dropdown selector
tableData.push($(this).text()); //maybe changes required here ..im missing out on something
}
else{
tableData.push($(this).text());
}
}
});


Form submit part:-

$("#adminForm").submit();
if (console !== undefined) {console.log("apply clicked, ajaxdata2 should start");}
ajax_interval=setInterval(loadAjaxData2, 1 * 1000);
});


$("#adminForm").submit(function(e){
var tableDataAsString=JSON.stringify(tableData);


$.ajax({
type : 'POST',
url : '/scripts/postServices.php' ,
data : {mydata: tableDataAsString}
}).done(function(data) {
data=$.trim(data);
console.log("Response: "+data);
tableData=[]; //clearing the array
});

e.preventDefault();

});


Below is the form markup:-

<form id="adminForm">
<div id="protocolParIcons">
<a href="#!" class="sbtooltip" title="Apply"><button id="applyButton" type="submit" class="ui-icon ui-icon-circle-check" style="display:none;"></button></a>
<a href="#!" class="sbtooltip" title="Cancel"><button id="cancelButton" class="ui-icon ui-icon-cancel" style="display:none;"></button></a>
<a href="#!" class="sbtooltip" title="Edit"><button id="editFields" class="ui-icon ui-icon-pencil" style="display:none;"></button></a>
</div>
<div id="protocolParMain" style="height:580px">
<div id="alarmData" style="font-size:0.8em">
<div class="alarmDataTable" id="table1" style="margin-left:20px">
<table border="1" id="itemList1">
<thead>
<tr>
<th>Description &nbsp&nbsp&nbsp</th>
<th>Level &nbsp&nbsp&nbsp</th>
<th>setTime&nbsp&nbsp&nbsp</th>
<th>clrTime&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

<div class="alarmDataTable" id="table2" style="display:none;">
<table border="1" id="itemList2" width="360px">
<thead>
<tr>
<th>Description &nbsp&nbsp&nbsp</th>
<th>Level &nbsp&nbsp&nbsp</th>
<th>setTime&nbsp&nbsp&nbsp</th>
<th>clrTime&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>

</form>

Answer

instead of tableData.push($(this).text())
try
tableData.push($(this).find('.select.alarmlvl option:selected').text(). Basically you need to get the text of the selected option, your function is returning the text of the entire select box including all of the options, selected or not

Comments