Problems WIth Multiple Quotes in JavaScript

Question

I'm having a problem changing a select's options based on another select's option, below is the code that works:

dropdown2.innerHTML = "<?php echo($SQLFormElements->GetColumnAsOptions('SELECT `field2` FROM `table2` WHERE `field1` = \'8\' ')); ?>";

Explanation:

I have two database tables: table1 and table2. table1 has the field1. table2 has the fields field2 and field1. SQLFormElements is a php file that echoes out html elements based on mysql queries, in this case, options for a select element. dropdown1 contains field1 values. dropdown2 should display field2 values based on the value of field1, i.e. which is the selected item of dropdown1.

Anyways, the above code works fine, however i've hardcoded as opposed to getting the value, because when i do something like this:

var selectedItem = document.getElementById("ddField1");
dropdown2.innerHTML = "<?php echo($SQLFormElements->GetColumnAsOptions('SELECT `field2` FROM `table2` WHERE `field1` = \'" + selectedItem + "\' ')); ?>";

it does not work, any idea why!? i'm kinda stumped. Just a reminder, the first code snippet works.

I've tried the following:

parsing the variable as an Integer (field1 in my table is an integer type)
leaving out the quotes in the where clause
leaving out the quotes but hard coding the value in the where clause works

You potentially have a huge SQL Injection vulnerability. Never use un-sanitized user values directly in SQL code! — asawyer, Feb 25 '13 at 14:02
It's not a quotes problem, you are horribly trying to mix JavaScript with PHP. Think of when and where (by what) each of them is executed. The solution is called "AJAX", you will find plenty of help on that on the web. — Bergi, Feb 25 '13 at 14:04
I'm aware of Ajax but I've just started learning PHP and JavaScript. So learning Ajax is kinda backseat right now. But if I need it I guess I'm gonna have to go that route — Craig Wayne, Feb 25 '13 at 14:40
SQL injection problem? I don't quite understand. Please explain. Maybe I can sort it out. — Craig Wayne, Feb 25 '13 at 14:43
OK just checked it out! SQL Injection that is, and it's pretty serious! Security has always been my nemesis, but for now i'm going to overlook it since it is a intranet site i'm working on, mainly for myself, however it is seriously an issue i will have to look at, thanks @asawyer. — Craig Wayne, Feb 25 '13 at 15:46
@Bergi, I wasn't prepared to break my head over this issue, so I took you up and I tried out an AJAX method and guess what, YES :) it works. Thanks dude. The reason I wanted to use php is cause it made my sql query hidden from the user. Now with ajax it's freely available, i guess to hide that code is a whole 'nother topic altogether. Any direction on where i should get started? — Craig Wayne, Feb 25 '13 at 16:46

score 1 · Answer 1 · answered Feb 25 '13 at 14:03

1

I think you missed the value in your selectedItem.

var selectedItem = document.getElementById("ddField1"); change it to var selectedItem = document.getElementById("ddField1").value;

answered Feb 25 '13 at 14:03

TravellingGeek

1,581
11
16

Right, see the answers here: http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript – asawyer Feb 25 '13 at 14:04
I'm gonna give that a go. And let you know. Thanks :) – Craig Wayne Feb 25 '13 at 14:42
Didn't work :( When i use `alert(selectedItem)` it shows what it is selected, however when i concatenate the selectedItem, it doesn't work. Gosh this is driving me mad. – Craig Wayne Feb 25 '13 at 15:46

score 0 · Answer 2 · answered Feb 25 '13 at 23:23

So the AJAX method suggested by @Bergi did the trick:

here it is:

dropdown1's onchange event:

onchange="AJAXItemChangeEvent(this.value)"

...

JavaScript Function

function AJAXItemChangeEvent(selectedValue)
{
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
    document.getElementById("dropdown2").innerHTML = xmlhttp.responseText;
    };

    xmlhttp.open("GET","Getter.php?field1=" + selectedValue,true);
    xmlhttp.send();
}

...

Getter.php

<?php
  mysql_connect("dbhost","username","password");
  mysql_select_db("dbname");

  $field1 = $_GET["field1"];
  $sql = "SELECT field2 FROM table2 WHERE field1 = '".$field1."'";

  $result = mysql_query($sql);
  echo "<option></option>";

  while($row = mysql_fetch_array($result))
  {
      echo "<option>".$row[0]."</option>";      
  }         
?>

NOTE - my ajax code does not cater for old browsers \ backward capability

This still does not address the SQL Injection issue, and also you might be introducing an XSS attack vulnerability if those data elements you are writing to the DOM are in any way coming from user input. For example - Suppose I use a client debugger to edit the value of the drop down list to `' or 1=1; drop all; --` and then submit your Ajax request. What would happen? http://bobby-tables.com/ — asawyer, Feb 26 '13 at 13:03
Aha I'm aware that there's a huge security flaw. But this is only for a small group of end users. Less than 10 and they haven't even heard of Linux before. So it isn't really an issue. However when I do decide to implement id have to address this. Thanks asawyer for the link. — Craig Wayne, Feb 26 '13 at 16:47

Problems WIth Multiple Quotes in JavaScript

2 Answers2