AJAX POST Не работает с переменными document.getElementById

Question

У меня есть html-форму и ajax-вызов, которые хранят данные в MySQL через страницу PHP.

Код для всех трех копируется ниже. (Обратите внимание на //)

Все три работают нормально, если у меня есть переменные, жестко закодированные в функции, где хранится их вызов ajax. Однако, когда я комментирую жестко закодированные переменные и запускаю их с помощью обычных переменных, это не работает.

JavaScript AJAX вызова $ ("# buttonSubmit"). Нажмите (функция() {

//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 Выбор инспекции или фазы проекта Выбор инспекции или фазы проекта

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

Связанный код PHP // Назначение переменных PHP для результатов POST от клиента

$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: {questionID: questionID, shortAnswerValue: shortAnswerValue, longAnswerText: longAnswerText}, 

или

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

JQuery построит строку, которая идет на конце URL.

Answer 2

Вы можете сделать это:

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

Проблема состоит в том, что пробелы в var questionID, и так далее. Также у вас есть ненужная запятая перед концом Объекта, который вы передали $.ajax(), сразу после вашего значения свойства data.