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')";
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.
Related
I am a beginner learning Ajax and javascript. After hours trying to find out whats was the problem, I gave up and brought the issue here. In tutorials from W3 schools, ajax works fine. My code has a form with a list and an input box. I want to collect the item selected in the list and the text entered in the input box. Then when a button is clicked, a function with ajax is called. It seems that my function is not being recognized or the function does nothing. The code is bellow. I wll be grateful on any light on this. Thank you.
function showCustomer() {
const xhttp = new XMLHttpRequest();
var selcriteria = document.getElementById('tcriteria');
var selcriteriavalue = selcriteria.options[selcriteria.selectedIndex].value;
var criteriavalue = document.getElementById('bananas').value;
alert(selcriteriavalue + ' ' + criteriavalue);
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xhttp.open("GET", "action_page.py?tycriteria=" + tcriteria + "&vacriteria=" + vcriteria);
xhttp.send();
}
<h2>Get Contact using Ajax </h2>
<form action="">
<select name="tcriteria">
<option value="">Select a criteria:</option>
<option value="Name">Name</option>
<option value="Phone 1 - Value">Telephone</option>
<option value="Notes">Notes</option>
</select>
<input type='text' id='apples' value=''>
<button type="button" id="bananas" onclick="showCustomer()">Get info</button>
</form>
<br>
<div id="txtHint">Contact data will be shown here...</div>
On your line 3 you are trying to get element with id tcriteria:
var selcriteria = document.getElementById('tcriteria');
But there isnt any element with that id so you need to replace it with this:
var selcriteria = document.querySelector('[name="tcriteria"]');
Note: If you don't need support for very old browsers you can use fetch instead of XMLHttpRequest, use ${var} text ${var2} (only in backticks) instead of tens of +-s and let-s and const-s instead of var-s. You can also use arrow functions.
My apologies if this has been answered before but I did do a search and haven't seen any answers for the questions asked in other posts. The answers I did see didn't relate to my question (mostly to do with dropdowns getting results from mysql).
I have a php dropdown list where you need to select a value (1, 2 or 3). Based on what you select, the list should update a variable and show a hidden div tag. Now from the information I gathered it seems like this cannot be done with php alone but requires a javscript or ajax script.
php:
<form>
<select name="options" onchange="{dosomething}">
<option value="0">[Select value]</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
</form>
This should then update this variable and div in REALTIME:
<div id="test" style="display:none">
$answer= 1 + $value
<?php
echo "1 + $value = $answer";
</div>
javascript/ajax:
<script>
function dosomething {
#update $value based on dropdown and do calculation
#unhide div with id "test"
}
</script>
I need to mention that I have no knowledge of javascript or ajax.
If you only need to view the new result in the same page without requesting something to the server add this script below your last div:
<script>
var element = document.getElementsByName('options');
if( element.length > 0 ){
element[0].addEventListener('change',update_text,false);
//element[0].addEventListener('change',function(){update_text(param)},false);
}
function update_text(evt){
console.log(evt);
var first_element = evt.target;
var selection = first_element.options[first_element.selectedIndex].value;
//do math:
selection = +selection + 1; //this cast selection as number and not as String
console.log(selection);
var test = document.getElementById('test');
test.style.display = 'block';
test.innerHTML = `<p>${selection}</p>`;
};
</script>
Next is html for text, button ,select elements:
<input type="button" id="addNextProjectID" value=" Add next project"/>
<input id="setNewProjectID" type="text" value=" project name "/>
<br>
<select id="selectProjectID" onfocus="onFocusSelectProject()">
<option value="Cats">Cats</option>
<option value="Dogs">Dogs</option>
</select>
</br>
Code which does add options to select element from text element on button click
function addNextProjectF(){
var x = document.getElementById("selectProjectID");
var option = document.createElement("option");
option.text = document.getElementById("setNewProjectID").value;
option.id = document.getElementById("setNewProjectID").value;
x.appendChild(option);
}
How to stringify all options from select and paste them to Json variable and then how to parse them back to select element.
My Select element has first 2 options set from html. I need to keep them.
Here i was thinking that the way would be to loop through the select element options and "append" each option to Json and reversal then to refill select element. But i did not meet any case of code to do this yet. Can you pleas help me with this code?
The case is also that i am not sure also how to use success function from ajax to fill the options of select. Anyway, maybe am thinking totally wrong approach to get to result i need.So how to proceed?
With next (code below) try i get
{"0":{},"1":{},"2":{}}
empty fields in DB. I presume "JSON.stringify(saveToprojectsList)" is wrong.
function saveToProjectsListF(){
whichProjectToSave=document.getElementById("selectProjectID").value;
saveToprojectsList=document.getElementById("selectProjectID");
var jsonProjectsListToPHP= JSON.stringify(saveToprojectsList);
console.log(jsonProjectsListToPHP);
$.ajax({
method:"POST",
url: '/wp-content/themes/mypage/PsaveJson.php',
data: {
"sendProjectsList":1,
"whichProjectToSave":whichProjectToSave,
"jsonProjectsListToPHP":jsonProjectsListToPHP
},
success: function(data){
}
});
}
The question is rather broad, so I will only focus on the part where you have tried to address it with code, i.e. stringifying the options in the select list.
That code does not work as intended because saveToprojectsList is a DOM object, and will just yield an empty object when you try to stringify it to JSON. You can use map to extract the text contents of the option tags.
NB: As you use jQuery for $.ajax, you could use it in other places as well:
function onFocusSelectProject() {}
$('#addNextProjectID').click(function addNextProjectF(){
var value = $("#setNewProjectID").val();
$("#selectProjectID").append($("<option>").text(value).attr("id", value));
});
$('#save').click(function saveToProjectsListF(){
var whichProjectToSave = $("#selectProjectID").val();
var saveToprojectsList = $.map($("#selectProjectID>option"), function (op) {
return $(op).text();
});
var jsonProjectsListToPHP = JSON.stringify(saveToprojectsList);
console.log(jsonProjectsListToPHP);
$.ajax({
method:"POST",
url: '/wp-content/themes/mypage/PsaveJson.php',
data: {
sendProjectsList: 1,
whichProjectToSave: whichProjectToSave,
jsonProjectsListToPHP: jsonProjectsListToPHP
},
success: function(data){
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="addNextProjectID" value=" Add next project"/>
<input id="setNewProjectID" type="text" value=" project name "/>
<br>
<select id="selectProjectID" onfocus="onFocusSelectProject()">
<option value="Cats">Cats</option>
<option value="Dogs">Dogs</option>
</select>
<input type="button" id="save" value="Save"/>
</br>
I have a dropdown I would like to load with options dynamically. I would also like to allow the user to "add" their own option and have it save to that dynamic list. So when anyone returns to that form, the new option is in the list. This is what I have so far - what do I need? Any information is greatly appreciated!
Here is my working project:
http://www.leskofolio.com/calendar/cal/gcal-script/index
The jsfiddle I was given with the ajax suggestion is here:
https://jsfiddle.net/o0qc8wvc/5/
Here is my dropdown - it doesn't pull from a dynamic "writable" list yet or, maybe it can?
<input type="hidden" name="action" value="<?php if($edit) echo 'edit';else echo 'insert';?>">
<input type="hidden" name="event_id" value="<?php if($edit) echo $event_data['id'];else echo '0';?>">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group" >
<label for="event_title">Surgeon Name <span class="required">*</span> </label>
<select name="event_title" id="event_title" class="form-control required">
<option value="">Select a Surgeon</option>
<option value="BERASI"> BERASI</option>
<option value="BERGHOFF"> BERGHOFF</option>
<option value="BIGGS"> BIGGS</option>
<option value="BORUS"> BORUS</option>
<option value="BURKE"> BURKE</option>
<option value="CANNONE"> CANNONE</option>
</select>
</div>
<label for="event_title">Add a Surgeon</label>
<input type="text" class="addingElement">
<button class="addingButton" >Add</button>
</div>
I was told I could use Ajax to do this but he coudldn't help me with "additional PHP" that would be needed. Here is his ajax code:
$(document).ready(function(){
$('.addingButton').on('click', function(){
var newElement = $('.addingElement').val();
console.log(newElement);
var newOption = $('<option>').attr('value', newElement).text(newElement);
$('#event_title').append(newOption);
$.ajax({
url: 'link/to/my/index.php',
method: 'POST',
data: {
'newElement': newElement
}, success: function(data) {
// the new element was successfully added to the database
console.log('success ! ');
},
error: function(error) {
//there was an error while adding the new element.
console.error('there was an error : ' + error);
}
})
})
});
Again my selectbox works but I can't save the users addition. What am I missing or doing wrong? Again, any information is greatly appreciated!
You need to store the items they've added. The simplest way to do this will be to use localStorage. I've modified your code to store the element they add to a localStorage item called options, then on page load, I'm reading in that localStorage item and populating the list.
Since SO won't allow localStorage to be read in the sandbox code environment, here's a fiddle - https://jsfiddle.net/o0qc8wvc/7/
The new option you want to append should look like this
Var newoption ="<option value='"+ newElement +"'>" + newElement + "</option>"
I would recommend if you want to store it in a database after the new record has been inserted to reload the entire list -- remove the old options and load in the entire list --
I am attempting to populate a jquery form with data from an XML where the XML has an id that will populate a dropdown in the form and upon selection of an id other form fields will be populated. BTW I will not be using PHP
My XML
<XMLReview>
<plan>
<planNumber>773</planNumber>
<Area>Upper Missouri</Area>
<ID>MISSOURI-NUT</ID>
<Name>Missouri River</Name>
<code>10030101</code>
<County>Broadwater</County>
<Station_ID>M09MISSR05</Station_ID>
</plan>
<plan>
<planNumber>774</planNumber>
<Area>Columbia</Area>
<ID>FLAT-STILL-TPA-2013</ID>
<Name>Sheppard Creek</Name>
<Description>- 3A</Description>
<code>17010210</code>
<County>Flathead</County>
<Station_ID>C09SHEPC04</Station_ID>
</plan>
</XMLReview>
The HTML
<form>
<input type="button" id="btnxml" value="XML" onclick="getXML()" />
ID <input type="text" name="ID" id="ID">
planNumber<input type="text" name="Name" id="planNumber">
area<input type="text" name="Area" id="Area">
Name: <input type="text" name="Name" id="Name">
Description: <input type="text" name="Description" id="Description">
Station ID <input type="text" name="Station_ID" id="Station_ID">
<label class="Code-label" for="code">HUC</label>
<select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
<option></option>
<option> 10010001</option>
<option> 10010002</option>
<option> 10020001</option>
</select>
<label class="county-label" for="County">County</label>
<select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
<option></option>
<option> Beaverhead </option>
<option> Big Horn </option>
<option> Blaine </option>
</select>
</form>
The script
<script>
function getXML()
{
$.get("XMLReview.xml", function(data) {
$.ajax({
type: "GET",
url: "XMLReview.xml",
dataType: "xml",
success: function (xml) {
var select = $('#ID');
$(xml).find('plan').each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected'));
var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
var value = $(this).text();
});
});
}
});
alert(data);});
}
</script>
Unfortunataly this is not working and I don't know why. Can anyone help me please
One or two things:
You are specifying the onclick event inline:
<input type="button" id="btnxml" value="XML" onclick="getXML()" />
Why not keep everything in one place -- since you already are using quite a bit of jQuery. Just add it to the javascript block like this:
<input type="button" id="btnxml" value="XML" />
and
$('#btnxml').click(function() {
getXML();
});
Without checking your javascript/ajax code, this construction is wrong:
function getXML(){
$.get("XMLReview.xml", function(data) { <<======= REMOVE
$.ajax({
type: "GET",
url: "XMLReview.xml",
dataType: "xml",
success: function (xml) {
var select = $('#ID');
$(xml).find('plan').each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected'));
var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
var value = $(this).text();
}); //END $(xml).find.eq.find.each
}); //END #ID.change
}); //END $(xml).find.each
alert(data);
} //END AJAX.success fn
}); //END $.ajax
}); //END $.get <<=================================== REMOVE
}
It should look like this:
function getXML(){
$.ajax({
type: "GET",
url: "XMLReview.xml",
dataType: "xml",
success: function (xml) {
var select = $('#ID');
$(xml).find('plan').each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected'));
var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
var value = $(this).text();
}); //END $(xml).find.eq.find.each
}); //END #ID.change
}); //END $(xml).find.each
alert(data);
} //END AJAX.success fn
}); //END $.ajax
}
The extra $.get() wrapper is unnecessary.
Note that $.ajax() and $.get() and $.post() do the same thing. You are using the more structured $.ajax() construction, which is (IMHO) easier to keep things straight.
$.get() simply hard-codes the type="GET" and $.post() hard-codes the type="POST"
Also, I haven't done much with the XML dataType, but I strongly suspect that xml -- in the success function of your AJAX code block, in this context:
success: function (xml) {
//post ajax code here, for eg.
alert(xml);
}
Is a variable that will contain whatever has been ECHOed/printed/etc from the server side script? I don't believe it's an XML object...
Ok there are kind of a lot of things going on here so I figured a fresh implementation would be easier to understand than a series of corrections (I'll try and note places where your understanding of JavaScript might need some work) First a demo. Now the JavaScript:
$('#btnxml').on('click', function() {
var select = $('#ID'),
xml = $($.parseXML($('#XMLData').text())),
plans = xml.find('plan');
plans.each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
});
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected')),
plan = $(plans[selectedIndex]);
$('#planNumber').val(plan.find('planNumber').text());
$('#Area').val(plan.find('Area').text());
$('#Name').val(plan.find('Name').text());
$('#Description').val(plan.find('Description').text());
$('#Station_ID').val(plan.find('Station_ID').text());
$('#code').val(plan.find('code').text());
$('#County').val(plan.find('County').text());
}).trigger('change');
});
And then the HTML
<script type='text/xml' id='XMLData'>
<XMLReview>
<plan>
<planNumber>773</planNumber>
<Area>Upper Missouri</Area>
<ID>MISSOURI-NUT</ID>
<Name>Missouri River</Name>
<code>10030101</code>
<County>Broadwater</County>
<Station_ID>M09MISSR05</Station_ID>
</plan>
<plan>
<planNumber>774</planNumber>
<Area>Columbia</Area>
<ID>FLAT-STILL-TPA-2013</ID>
<Name>Sheppard Creek</Name>
<Description>- 3A</Description>
<code>17010210</code>
<County>Flathead</County>
<Station_ID>C09SHEPC04</Station_ID>
</plan>
</XMLReview>
</script>
<form>
<input type="button" id="btnxml" value="XML" /><br/>
ID <select type="text" name="ID" id="ID"></select><br/>
planNumber<input type="text" name="Name" id="planNumber"><br/>
area<input type="text" name="Area" id="Area"><br/>
Name: <input type="text" name="Name" id="Name"><br/>
Description: <input type="text" name="Description" id="Description"><br/>
Station ID <input type="text" name="Station_ID" id="Station_ID"><br/>
<label class="Code-label" for="code">HUC</label>
<select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
<option></option>
<option>10010001</option>
<option>10010002</option>
<option>10020001</option>
<option>10030101</option>
<option>17010210</option>
</select>
<br/>
<label class="county-label" for="County">County</label>
<select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
<option></option>
<option>Beaverhead</option>
<option>Big Horn</option>
<option>Blaine</option>
</select>
</form>
First, I made these changes to make this easier to demonstrate in JSFiddle, but they don't necessarily match what your final code will be:
I faked the AJAX request (the other answer here gives you a clear explanation of how to properly use jQuery's excellent AJAX helper methods). When rolling this answer into yours you can just assume that all of this is wrapped in a $.get() that fetches your XML remotely.
I also bound the click handled in JavaScript to $('#btnxml') (this is cleaner, but also because JSFiddle doesn't like onclick attributes that point to named functions), this is not strictly wrong it's just cleaner.
Now for the substantive changes:
You are really trying to do two things, populate your $('#ID') selector (which was originally a <input type='text'> which is incorrect, in this code I updated to to a <select>, and then after it's populated you are trying to bind a change event handler. You had these steps inside each other, and I separated them back out. Also programmaticly changing a <select> doesn't trigger a change event automatically, so I appended a .trigger('change') at the end.
It also appears that you are attempting to take the child nodes of the selected plan and update the corresponding input with the same name. You could use the .childNodes property but this will include TextNodes for all of the white-space between XML nodes, and rather than trying to filter them out I thought it would be cleaner to just map them individually. This may not work for you if your HTML and XML are constantly being updated but the next point I'm going to make possibly would prevent a totally automatic approach anyways.
Selecting an option based on a value presents some challenges. jQuery is very smart. If you have a <select> element with a set of options that don't have value attributes and you try and set that <select> element's .val() by a string of one of those <option>s inside that element it will do the right thing. However if there are no elements that match that value then it will silently pass over it. Your XML has code and County values that do not appear in your HTML. I added the missing code values to show you that it is working, but I didn't add them to the County <select>. If you know all of your possible codes and county's and you can update your HTML then this won't be a problem, if instead you want new values to be appended while old values are just selected, then your code will get a little trickier.