peter-cooper
asked on
Why is my select returning NaN
Hello
I am making up a select element from php and javascript which displays the correct data in a popup form. However, when I send to php for processing, it inserts NaN in the field instead ov the value. I know that I probably haven't explained it well, but that is what is happening. Hopefully, my code will make it clearer.
I have put an alert in the save button and what comes up is this. [object HTMLSelectElement]
I would be gratful for any assistance in solving this. Thanks
html code
javascript
php code
I am making up a select element from php and javascript which displays the correct data in a popup form. However, when I send to php for processing, it inserts NaN in the field instead ov the value. I know that I probably haven't explained it well, but that is what is happening. Hopefully, my code will make it clearer.
I have put an alert in the save button and what comes up is this. [object HTMLSelectElement]
I would be gratful for any assistance in solving this. Thanks
html code
<div id="popupWindow" style="width: 300px !important;">
<div>Edit</div>
<div style="overflow: hidden;">
<table>
<tr>
<td align="right">Slot:</td>
<td align="left">
<input id="slot" />
</td>
</tr>
<tr>
<td align="right">Activity:</td>
<td align="left">
<input id="activity" />
</td>
</tr>
<tr>
<td align="right">Department:</td>
<td align="left">
<input id="department" />
</td>
</tr>
<tr>
<td align="right">Company:</td>
<td align="left">
<input id="company" />
</td>
</tr>
<tr>
<td align="right">Address:</td>
<td align="left">
<select id="address" name="address"></select> <--- problem
</td>
</tr>
<tr>
<td align="right">Item:</td>
<td align="left">
<input id="item" />
</td>
</tr>
<tr>
<td align="right">Intake Date:</td>
<td align="left">
<input id="date" />
</td>
</tr>
<tr>
<td align="right">Destroy Date:</td>
<td align="left">
<input id="destdate" />
</td>
</tr>
<td align="right"></td>
<td style="padding-top: 10px;" align="right">
<input style="margin-right: 5px;" type="button" id="Save" value="Save" />
<input id="Cancel" type="button" value="Cancel" />
</td>
</tr>
</table>
</div>
</div>
javascript
$("#Save").click(function () {
if (editrow >= 0) {
var row = {
slot: $("#slot").val(),
activity: $("#activity").val(),
department: $("#department").val(),
address: $("#address").val(), <--- DISPLAYS CORRECTLY HERE
company: $("#company").val(),
item: $("#item").val(),
date: $("#date").val(),
destroydate: $("#destdate").val()
};
var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
$('#jqxgrid').jqxGrid('updaterow', row);
$("#popupWindow").jqxWindow('hide');
}
var data = "edit=edit" +
"&slot=" + row.slot +
"&activity=" + row.activity +
"&department=" + row.department +
"&address=" + +row.address + <--- PROBLEM SEEMS TO BE HERE
"&company=" + row.company +
"&item=" + row.item +
"&date=" + row.date +
"&destroydate=" + row.destroydate +
"&id=" + rowID;
$.ajax({
cache: false,
//dataType: 'json',
url: 'data.php',
data: data,
success: function (data) {
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
source: dataAdapter
});
$("#searchField").val('');
//$('#jqxGrid').jqxGrid('updatebounddata');
//alert(data);
}
});
});
php code
<?php
$varcompany = $_POST['varcompany']; // get value from jqxgrid for address <--- is declared earlier and used in where statement
$sql = "SELECT DISTINCT * FROM company_com WHERE idcode_com = '$varcompany'" ;
$result = mysql_query($sql);
echo "<select id='address' name='address'>";
while ($row = mysql_fetch_array($result)) {
$value = $row['address1_com']. " ". $row['address2_com']. " ". $row['address3_com']. " ". $row['town_com']. " ". $row['postcode_com'];
$caption = $row['address1_com']. " ". $row['address2_com']. " ". $row['address3_com']. " ". $row['town_com']. " ". $row['postcode_com'];
echo "<option value='" . $value . "'>" . $caption . "</option>";
}
echo "</select>";
?>
Move
outside the functions
Then later do
var row;
outside the functions
Then later do
row = {
slot: $("#slot").val(),....
ASKER
@Julian This is the result from console.log(row);
Full span of object
Object { slot="H-8-4-(1)", activity="Box Return", department="DEMO", more...}
Full span of object
activity "Box Return"
address "7-9 Link Street London W1D 3JB"
company "DEMO"
date "16/05/2017 02:25:47"
department "DEMO"
destroydate ""
item "BTA6099"
slot "H-8-4-(1)"
ASKER
@Micahel Still the same problem as posted. Thanks
Just looked at your code again
"&address=" + +row.address + <--- PROBLEM SEEMS TO BE HERE
Why 2 plus signs?
You need
<script>
var row; // now a global var
$(.....
ASKER
@Julian If you look at the code. they all have + at the end. Isn't that to join?
ASKER
@Michael I just did that by declaring outside the function. Are you saying declare the var in the head of the page in <script> tag?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You are using jQuery - often it wraps all scripts in a $(document).ready construct - since your code is asynchronous, the function executed later than where you save the row, needs access to that row when executing. Making the var global is on way. Saving an is of the row in an attribute used later is another. My suggestion does pollute the global scope a tiny bit but is the simplest solution assuming that is your only issue. Yes in the head
Consider this script
Remove the extra '+'
Your problem is the double '+' after the = in the address row
<script>
var row = {
slot: 'slot',
activity: 'activity',
department: 'department',
address: 'address',
company: 'company',
item: 'item',
date: 'date',
destroydate: 'destroydate'
}
var rowID = 1;
var data = "edit=edit" +
"&slot=" + row.slot +
"&activity=" + row.activity +
"&department=" + row.department +
"&address=" + +row.address +
"&company=" + row.company +
"&item=" + row.item +
"&date=" + row.date +
"&destroydate=" + row.destroydate +
"&id=" + rowID;
console.log(data);
</script>
Resultedit=edit&slot=slot&activity=activity&department=department&address=NaN&company=company&item=item&date=date&destroydate=destroydate&id=1
Note NaN in the string.Remove the extra '+'
<script>
var row = {
slot: 'slot',
activity: 'activity',
department: 'department',
address: 'address',
company: 'company',
item: 'item',
date: 'date',
destroydate: 'destroydate'
}
var rowID = 1;
var data = "edit=edit" +
"&slot=" + row.slot +
"&activity=" + row.activity +
"&department=" + row.department +
"&address=" +row.address +
"&company=" + row.company +
"&item=" + row.item +
"&date=" + row.date +
"&destroydate=" + row.destroydate +
"&id=" + rowID;
console.log(data);
</script>
Resultedit=edit&slot=slot&activity=activity&department=department&address=address&company=company&item=item&date=date&destroydate=destroydate&id=1
NaN goes awayYour problem is the double '+' after the = in the address row
@Michel - then why do all the other fields sourced from row populate and not the address?
That needs to be fixed of course. I'm on my mobile so harder to see
ASKER
@julian How the F did I miss that. Yeh that was the problem. Thanks. BTW could you do markup as a follow on to your comment
ID: 42145147. thanks
ID: 42145147. thanks
ASKER
Just a general question. Why does the editor mess up my formatting? I always indent correctly but when I paste it here it puts spaces and extra indents.
replace all tabs by two spaces before posting
PS: apologies for not spotting the ++
PS: apologies for not spotting the ++
ASKER
@Michel No problem. Thanks for your input.
ASKER
Thanks for your sharp eyes Julian.
You are welcome.
BTW could you do markup as a follow on to your commentNot sure what you are asking
ID: 42145147. thanks
ASKER
@julian this piece of code and also how to avoid if editrow = 0. How can I incorporate what you suggested into my code. Thanks
row.edit = 'edit';
$.ajax({
url: 'data.php',
data: row,
}).then(function(resp) {
....
});
Still not sure what you mean by markup - also need to understand what you want to do if editrow is 0 - what action must be taken.
Assuming that no action is taken then you could use this code
Assuming that no action is taken then you could use this code
$("#Save").click(function () {
if (editrow >= 0) {
var row = {
edit: 'edit',
slot: $("#slot").val(),
activity: $("#activity").val(),
department: $("#department").val(),
address: $("#address").val(), <--- DISPLAYS CORRECTLY HERE
company: $("#company").val(),
item: $("#item").val(),
date: $("#date").val(),
destroydate: $("#destdate").val()
};
var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
$('#jqxgrid').jqxGrid('updaterow', row);
$("#popupWindow").jqxWindow('hide');
$.ajax({
cache: false,
url: 'data.php',
data: row,
success: function (data) {
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
source: dataAdapter
});
$("#searchField").val('');
//$('#jqxGrid').jqxGrid('updatebounddata');
//alert(data);
}
});
}
});
ASKER
@Julian Thanks very much for that.
You are welcome peter.
Open in new window
Secondly, consider dropping success and using then() - the former has been deprecated.
Third, you have a condition on editrow
Open in new window
Can you do a dump of row just before the $.ajax call
Open in new window