Link to home
Start Free TrialLog in
Avatar of peter-cooper
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

<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>

Open in new window


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);
		}
	});

});

Open in new window


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>";
?>

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

You know you can send an array / object with $.ajax
...
row.edit = 'edit';
$.ajax({
  url: 'data.php',
  data: row,
}).then(function(resp) {
  ....
});

Open in new window


Secondly, consider dropping success and using then() - the former has been deprecated.

Third, you have a condition on editrow
$("#Save").click(function () { 
	if (editrow >= 0) { // <==== WHAT IF  editrow IS 0
		var row = {
        ....
       }
      // WHEN YOU GET HERE YOU WILL TRY TO PROCESS 
      // POTENTIAL LOGIC BOMB

Open in new window


Can you do a dump of row just before the $.ajax call

console.log(row);
$.ajax({ ...

Open in new window

Move

var row;

Open in new window


outside the functions

Then later do

row = {
  slot: $("#slot").val(),....

Open in new window

Avatar of peter-cooper
peter-cooper

ASKER

@Julian This is the result from console.log(row);

 
Object { slot="H-8-4-(1)",  activity="Box Return",  department="DEMO",  more...}

Open in new window


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)"

Open in new window

@Micahel Still the same problem as posted. Thanks
Just looked at your code again

"&address=" + +row.address + <--- PROBLEM SEEMS TO BE HERE

Open in new window

Why 2 plus signs?
You need
<script>
var row; // now a global var
$(.....

Open in new window

@Julian If you look at the code. they all have + at the end. Isn't that to join?
@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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
<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>

Open in new window

Result
edit=edit&slot=slot&activity=activity&department=department&address=NaN&company=company&item=item&date=date&destroydate=destroydate&id=1

Open in new window

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>

Open in new window

Result
edit=edit&slot=slot&activity=activity&department=department&address=address&company=company&item=item&date=date&destroydate=destroydate&id=1

Open in new window

NaN goes away

Your 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
@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
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 ++
@Michel No problem. Thanks for your input.
Thanks for your sharp eyes Julian.
You are welcome.
BTW could you do markup as a follow on to your comment
ID: 42145147. thanks
Not sure what you are asking
@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) {
  ....
});

Open in new window

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
$("#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);
      }
    });
  }
});

Open in new window

@Julian Thanks very much for that.
You are welcome peter.