-1

So I am having some trouble with this code and need some help. I am not great at anything javascript related so this has thrown me for a loop. I have a select box with different locations. Based on the location the user chooses, an input box appears with a specific number. The php page works if I fill in the variable, but I cannot seem to get the variable to pass from one page to another.

Here is the front page callded Dropdown_test.php:

<body>

<label>
    <span>Office Location</span><br>
    <select name="office" id="office" onChange="loadDoc()">
        <option value="">Select Office Location</option>
        <option value="place1">Place 1</option>
        <option value="place2">Place 2</option>
        <option value="place3">Place 3</option>
        <option value="place4">Place 4</option>
    </select>
</label>
<div id="drawing"></div>
<script>
    function loadDoc(){
        var xhttp = new XMLHttpRequest();
        var office = document.getElementsByName("office");
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200){
                document.getElementById("drawing").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "fetch_details.php?=q" +office, true);
        xhttp.send();
    }
</script>

Here is the fetch_details page:

$office=$_GET['office'];
$rowSQL = mysqli_query($con, "SELECT MAX( DWG ) AS DWG FROM dwg WHERE 
Office='$office';");
$row = mysqli_fetch_array($rowSQL);
$largestNumber = $row[ 'DWG' ];
$pieces = explode("-", $largestNumber);
$digit = $pieces[ 2 ] + 1;
$result = $pieces[ 0 ] . "-" . $pieces[ 1 ] . "-" . $digit;
echo "<input type='text' value='$result'></input>";

The fetch_page works just fine with the database, but when I combine them I get an undefined index. Any thoughts on where I am going wrong?

Thanks.

Taplar
  • 24,788
  • 4
  • 22
  • 35
Swagoner
  • 29
  • 6
  • 2
    Your script is wide open to [SQL Injection Attack](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) Even [if you are escaping inputs, its not safe!](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) Use [prepared parameterized statements](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) – RiggsFolly Apr 18 '18 at 16:15
  • Change: `xhttp.open("GET", "fetch_details.php?=q" +office, true);` to `xhttp.open("GET", "fetch_details.php?office=" +office, true);`. – Danny Fardy Jhonston Bermúdez Apr 18 '18 at 16:16
  • try changing to this: `xhttp.open("GET", "fetch_details.php?=office" +office, true);` – manix Apr 18 '18 at 16:17
  • 2
    @DannyFardyJhonstonBermúdez you mean `'office=' + office`, right? – u_mulder Apr 18 '18 at 16:17
  • 1
    Why the clunky vanilla javascript when you have the jquery tag? I'm not seeing ANY jquery here. – IncredibleHat Apr 18 '18 at 16:17
  • 1
    I really would suggest if you just use the JQuery `AJAX` shortcuts, It would really make your life easier. – Toleo Apr 18 '18 at 16:18
  • I edited the question, but just incase it was not a typo, java != javascript – Taplar Apr 18 '18 at 16:19
  • @manix I tried that and still getting the undefined index. – Swagoner Apr 18 '18 at 16:19
  • You're assigning the entire `select` object, not the value. – Patrick Q Apr 18 '18 at 16:20
  • @Toleo Honestly I don't know why I am not using ajax, I have been having trouble wrapping my head around how any of the java types (javascrip, jquery, ajax) work, and I am to the point I just want this to work. – Swagoner Apr 18 '18 at 16:21
  • 2
    none of the things you mentioned are "java type". java is an entirely different language that is not related to any of these things. you are writing javascript. jQuery is a javascript library. ajax is a javascript mechanism for making web requests in javascript that do not involve browser transitions. – Taplar Apr 18 '18 at 16:22
  • Yes, @u_mulder, the sintax is: `xhttp.open("GET", "fetch_details.php?office=" +office, true);`. – Danny Fardy Jhonston Bermúdez Apr 18 '18 at 16:22
  • I put the equal sign in the correct place and it works. Thank you for your help. I know it isn't pretty right now but it is a start. – Swagoner Apr 18 '18 at 16:23
  • `ajax` is a process under javascript (ajax is not something all by itself). `jquery` is a library for javascript to make life much easier, especially when dealing with ajax. – IncredibleHat Apr 18 '18 at 16:24
  • Since I seem to be completely out of my depth when it comes to this part of design, is there a good place go to wrap my head around jquery and ajax? I spent alot of time looking at w3schools but they are so simple I have a hard time ramping up to real world examples. – Swagoner Apr 18 '18 at 16:27
  • 1
    learn.jquery.com is a great place to start reading about the library. There are also some introductory problems you can work at try.jquery.com for some hands on learning. – Taplar Apr 18 '18 at 16:28

1 Answers1

2

Solution to your current problem is in fixing query string.

Query string looks like name=value.

Now you have =namevalue. This is obviously wrong.

So, fix is:

// first `q` (name) then `=`, then office (value)
xhttp.open("GET", "fetch_details.php?q=" +office, true);

And second - on server side you will recieve $_GET['q'], not $_GET['office'].

So, another fix is:

$office=$_GET['q'];

Or if you want: 

$office=$_GET['office'];

then fix is:

// first `office` (name) then `=`, then office (value)
xhttp.open("GET", "fetch_details.php?office=" +office, true);

As stated in comments, string

var office = document.getElementsByName("office");

returns not what you expect. If you have an id - replace it with

var office = document.getElementById("office").value;

As already noticed in comments

  • if you have jquery - use jquery, it will be simpler.
  • protect agains sql-injections.
ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
u_mulder
  • 54,101
  • 5
  • 48
  • 64