AJAX POST无法使用document.getElementById变量

Question

I have an html form and ajax call that store data in MySQL via a PHP page.

The code for all three is copied below. (Please note the //)

All three work fine as long as I have the variables hard coded in the function where the ajax call stores them. However, when I comment out the hard coded variables and run it with the regular variables, it does not work.

JavaScript AJAX Call $("#buttonSubmit").click(function() {

//var questionID       = obj.Questions[i].questionID;
//var shortAnswerValue = document.getElementById('txtShortAnswerValue').value;      
//var longAnswerText   = document.getElementById('txtLongAnswerText').value;

var questionID      = "SampleQID";
var shortAnswerValue    = "Sample Short";       
var longAnswerText      = "Sample Long";

$.ajax({
     type: "POST",
     url: "SaveUpdatesTemplate.php",
     data: "questionID=" + questionID + "&shortAnswerValue=" + shortAnswerValue + "&longAnswerText=" + longAnswerText, 
}); // end ajax function
     document.getElementById("txtLongAnswerText").reset();  
});  // end button submit function

Associated HTML Select Inspection or Project Phase Select Inspection or Project Phase

<label for="selectSection">Select Inspection or Project Phase</label>
<select class="form-control" id="selectSection" name="selectSection">
    <option> Select Inspection or Project Phase</option>
</select>   

<button type="button" class="form-control" id="buttonStart" name="buttonStart" value="List Questions">Start - Click to Populate Question List</button>
<label for="selectQuestion">Select Task or Question to Update</label>
<select class="form-control" id="selectQuestion" name="selectQuestion" >
<option> Select Task or Question to Update </option>
</select>   

<!-- short answer below -->
<label for="txtShortAnswerValue">Short Answer</label>
<select  class="form-control" id="txtShortAnswerValue" name="txtShortAnswerValue">
<option value="1" selected>worst</option>
<option value="3">middle</option>
<option value="5">best</option>
</select>

<!-- long answer below -->
<label for="txtLongAnswerText">Long Answer / Notes</label>
<textarea class="form-control" name="txtLongAnswerText" id="txtLongAnswerText" rows=3>
</textarea>

Associated PHP Code // Assign PHP variables to POST results from client

$questionID         = htmlspecialchars(trim($_POST['questionID']));
$shortAnswerValue       = htmlspecialchars(trim($_POST['shortAnswerValue']));
$longAnswerText         = htmlspecialchars(trim($_POST['longAnswerText']));

   //SQL STATEMENT 
   $sql="INSERT INTO Updates (questionID, shortAnswerValue, longAnswerText)
   VALUES
   ('$questionID', '$shortAnswerValue', '$longAnswerText')";

Answer 1

Ajax data gets formated like this

data: {questionID: questionID, shortAnswerValue: shortAnswerValue, longAnswerText: longAnswerText},

or

data: {key:value, key2,"staticvalue"}

jQuery will build the string that goes onto the end of the URL.

Answer 2

You could do this:

data: encodeURI("questionID=" + questionID + "&shortAnswerValue=" + shortAnswerValue + "&longAnswerText=" + longAnswerText);

The problem is the spaces in var questionID , and so on. Also you have an unnecessary comma before the end of the Object you passed to $.ajax() , right after your data property value.