I wrote the code to learn text input devices. However, this is the error i receive:
ReferenceError
processForm is not defined
Can someone please help me fix the code ? The code is as follows:
<body>
<h1>Text Input Devices</h1>
<form action = "">
<fieldset>
<label> Normal text field</label>
<input type = "text" id = "txtNormal" />
<label>Password field</label>
<input type="password" id ="pwd" />
<label>Hidden</label>
<input type ="hidden" id = "hidden" value = "I can't tell you it is hidden" />
<textarea id = "txtArea" rows = "10" cols = "40>"> This is big text area and it can hold a lot of text</textarea>
<button type = "button" onclick="processForm()">Click me</button>
</fieldset>
</form>
</body>
<script type ="text/javascript">
function processForm() {
//Dohvati polja formulara
var txtNormal = document.getElementById("txtNormal");
var pwd = document.getElementById("pwd");
var hidden = document.getElementById("hidden");
var txtArea = document.getElementById("txtArea");
// Spakuj u varijablu vrijednosti formulara
var normal = txtNormal.value;
var password = pwd.value;
var secret = hidden.value;
var bigText = txtArea.value;
//Create output
var result = ""
result += "<dl> \n";
result += "<dt>normal<\/dt> \n";
result += "<dd> + normal + <\/dd> \n";
result += "\n";
result += "<dt>password<\/dt> \n";
result += "<dd>" + password + "<\/dd> \n";
result += "\n";
result += "<dt>secret<\/dt> \n";
result += "<dd>" +secret + "<\/dt> \n";
result += "\n";
result += "<dt>big text <\/dt> \n";
result += "<dd>" +bigText + "<\/dt> \n";
result += "<\/dl> \n";
var output = document.getElementById("output");
output.innerHTML = result;
} //End function
</script>
When I run your code the button is not the issue. Here is the error I get:
file.html:44 Uncaught TypeError: Cannot set property 'innerHTML' of
null
at processForm (file.html:44)
at HTMLButtonElement.onclick (file.html:12) processForm # file.html:44 onclick # file.html:12
Your error comes from here :
var output = document.getElementById("output");
output.innerHTML = result;
What is output? It is not defined anywhere an element with an id called output in your HTML.
I assume your wanted to output the content of your normal, password and textarea field somewhere ? But only you can know.
Then just change your output definition to :
var body = document.getElementsByTagName("body")[0];
body.innerHTML += result;
As so your body will take the 3 values and output it below your fields when you click your button.
Also there is one mistake you made with " and + signs in order to get your normal's field value.
I fixed it for your, so your entire code should be like this:
<body>
<h1>Text Input Devices</h1>
<form action = "">
<fieldset>
<label> Normal text field</label>
<input type = "text" id = "txtNormal" />
<label>Password field</label>
<input type="password" id ="pwd" />
<label>Hidden</label>
<input type ="hidden" id = "hidden" value = "I can't tell you it is hidden" />
<textarea id = "txtArea" rows = "10" cols = "40>"> This is big text area and it can hold a lot of text</textarea>
<button type = "button" onclick="processForm()">Click me</button>
</fieldset>
</form>
</body>
<script type ="text/javascript">
function processForm() {
//Dohvati polja formulara
var txtNormal = document.getElementById("txtNormal");
var pwd = document.getElementById("pwd");
var hidden = document.getElementById("hidden");
var txtArea = document.getElementById("txtArea");
// Spakuj u varijablu vrijednosti formulara
var normal = txtNormal.value;
var password = pwd.value;
var secret = hidden.value;
var bigText = txtArea.value;
//Create output
var result = ""
result += "<dl> \n";
result += "<dt>normal<\/dt> \n";
result += "<dd>" + normal + "<\/dd> \n";
result += "\n";
result += "<dt>password<\/dt> \n";
result += "<dd>" + password + "<\/dd> \n";
result += "\n";
result += "<dt>secret<\/dt> \n";
result += "<dd>" +secret + "<\/dt> \n";
result += "\n";
result += "<dt>big text <\/dt> \n";
result += "<dd>" +bigText + "<\/dt> \n";
result += "<\/dl> \n";
var output = document.getElementsByTagName("body")[0];
output.innerHTML += result;
} //End function
</script>
Related
//home html
<body>
<h2>Search Data from NYC Open Data Site</h2>
<h3>Choose One Dataset Below to Start Searching</h3>
<div>
<label class="datasets">Data Sets:</label> <br>
<input type="radio" id="data1" name="dataset" value="data1" required>
<label>Data1</label><br>
<input type="radio" id="data2" name="dataset" value="data2" required>
<label>Data2</label><br>
<input type="radio" id="data3" name="dataset" value="data3" required>
<label>Data3</label><br>
</div><br>
<h3 id="searchvalues"></h3>
<br>
<table id="searchresults"></table>
</body>
////1st html with search field and 2nd and 3rd as the same
`
<table>
<tr><td>ID</td><td><input type="text" size="20" id="idnumber"></td></tr>
<tr><td>Year</td><td><input type="text" size="20" id="year"></td></tr>
</table>
`I'm doing a program with 3 different html pages to search the data using Json link. I have 3 radio buttons which will be called on change to 3 separate html pages on my home html. But when I click on radio 1 , I only get the contents of one html no matter which radio button I click, eg- when I click on 1st radio button , instead of getting data3.html, I still get the contents of data1.html and no search data is appearing. I just started learning Ajax and Json 2 weeks ago. Any help would be much appreciated.
var xhr;
var r;
var asynchrequest;
var radioChoices;
window.addEventListener("load", registerListeners);
function registerListeners() {
radioChoices = document.getElementById("data1");
radioChoices = addEventListener("change", function () { getContent("Data1.html"); }, false);
radioChoices = document.getElementById("data2");
radioChoices = addEventListener("change", function () { getContent("Data2.html"); }, false);
radioChoices = document.getElementById("data3");
radioChoices = addEventListener("change", function () { getContent("Data3.html"); }, false);
}
function getContent(infopage) {
asynchrequest = new XMLHttpRequest(); //step 1
asynchrequest.open("GET", infopage, true); //step 2
asynchrequest.onreadystatechange = function () { //step 3
if (asynchrequest.readyState == 4 && asynchrequest.status == 200) {
document.getElementById("searchvalues").innerHTML = asynchrequest.responseText;
}
};
asynchrequest.send(); //step 4
}
function loadData1() {
//event listener
document.getElementById("idnumber").addEventListener("keyup", function () { searchIDNumber(this.value); }, false);
document.getElementById("year").addEventListener("keyup", function () { searchYear(this.value); }, false);
xhr = new XMLHttpRequest();
xhr.open("GET", "https://data.cityofnewyork.us/resource/4d7f-74pe.json", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
r = JSON.parse(xhr.responseText);
//displayData(r);
}
};
xhr.send();
}
function searchIDNumber(idnumber) {
//var r=JSON.parse(xhr.responseText);
document.getElementById("searchvalues").innerHTML = "Search by ID Number" + "<br>";
//structure table
var output = "<tr><th> ID </th><th> Fiscal Year </th><th> Organization Name </th><th> Status </th><th> Amount </th></tr>";
var searchid;
for (var i = 0; i < r.length; i++) {
var obj = r[i];
searchid = obj.mocs_id; // convert id to string from number value
if (searchid.startsWith(idnumber)) {
output += "<tr><td>";
output += obj.mocs_id;
output += "</td><td>";
output += obj.fiscal_year;
output += "</td><td>";
output += obj.legal_name_of_organization;
output += "</td><td>";
output += obj.status;
output += "</td><td>";
output += obj.amount;
}
}
document.getElementById("searchresults").innerHTML = output;
}
function searchYear(year) {
//var r=JSON.parse(xhr.responseText);
document.getElementById("searchvalues").innerHTML = "Search by Year" + "<br>";
//structure table
var output = "<tr><th> ID </th><th> Fiscal Year </th><th> Organization Name </th><th> Status </th><th> Amount </th></tr>";
var searchid;
for (var i = 0; i < r.length; i++) {
var obj = r[i];
searchid = obj.fiscal_year; // convert id to string from number value
if (searchid.startsWith(year)) {
output += "<tr><td>";
output += obj.mocs_id;
output += "</td><td>";
output += obj.fiscal_year;
output += "</td><td>";
output += obj.legal_name_of_organization;
output += "</td><td>";
output += obj.status;
output += "</td><td>";
output += obj.amount;
}
}
document.getElementById("searchresults").innerHTML = output;
}
I can't figure out why this code won't display the user entered information. I need to have user enter information from the html form, add this info to the arrays, and then display the info (actually, need to do more than this, but can't get past this point). I need the entered information to display on the page. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homework 10</title>
<script type="text/javascript">
//Variables for arrays
var fName = [];
var lName = [];
var tScore = [];
//Variables from user input
var fNameInput = document.getElementById("firstName");
var lNameInput = document.getElementById("lastName");
var tScoreInput = document.getElementById("testScore");
//Variable for display
var display = document.getElementById("display");
//Function to add user info to arrays
function insert() {
fName.push(fNameInput.value);
lName.push(lNameInput.value);
tScore.push(tScoreInput.value);
clearAndShow();
}
//Function to display info entered from array
function clearAndShow() {
fNameInput.value = "";
lNameInput.value = "";
tScoreInput.value = "";
display.innerHTML = "";
display.innerHTML += "First Name: " + fName.join(", ") + "<br/>";
display.innerHTML += "LastName: " + lName.join(", ") + "<br/>";
display.innerHTML += "Test Score: " + tScore.join(", ") + "<br/>";
}
</script>
</head>
<body bgcolor="Cornsilk">
<h2>Average Student Scores</h2>
<form>
<fieldset>
<legend><strong>Enter First, Last Name and Test Score:</strong></legend><br />
<input type="text" id="firstName" placeholder="First name"/><p />
<input type="text" id="lastName" placeholder="Last name"/><p />
<input type="number" id="testScore" placeholder="Test Score"/><p />
<input type="button" value="Save/Show Average" onclick="insert()"/><p />
</fieldset><p />
</form>
<div id="display"></div>
</body>
</html>
I tried to run the code. I got an error like
test.html:23 Uncaught ReferenceError: fName is not defined
You can solve this by moving the variable declaration inside the function.
//Variables for arrays
var fName = [];
var lName = [];
var tScore = [];
//Function to add user info to arrays
function insert() {
var fNameInput = document.getElementById("firstName");
var lNameInput = document.getElementById("lastName");
var tScoreInput = document.getElementById("testScore");
fName.push(fNameInput.value);
lName.push(lNameInput.value);
tScore.push(tScoreInput.value);
clearAndShow();
}
//Function to display info entered from array
function clearAndShow() {
var display = document.getElementById("display");
var fNameInput = document.getElementById("firstName");
var lNameInput = document.getElementById("lastName");
var tScoreInput = document.getElementById("testScore");
fNameInput.value = "";
lNameInput.value = "";
tScoreInput.value = "";
display.innerHTML = "";
display.innerHTML += "First Name: " + fName.join(", ") + "<br/>";
display.innerHTML += "LastName: " + lName.join(", ") + "<br/>";
display.innerHTML += "Test Score: " + tScore.join(", ") + "<br/>";
}
The reason for this is the element is no there when the initial declaration is happening.
Move the script below the body
The main issue is that the Javascript is loaded before the HTML. As a result, when the Javascript attempts to find the element with the element "firstName", it fails to find it because it hasn't been loaded yet.
To fix this, you should move the script tag below the body tag so that the HTML is loaded before it is accessed by the Javascript.
As an added bonus, it improves page load time as the browser doesn't have to wait for the JavaScript to load before rendering the HTML
Example Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homework 10</title>
</head>
<body bgcolor="Cornsilk">
<h2>Average Student Scores</h2>
<form>
<fieldset>
<legend><strong>Enter First, Last Name and Test Score:</strong></legend><br />
<input type="text" id="firstName" placeholder="First name"/><p />
<input type="text" id="lastName" placeholder="Last name"/><p />
<input type="number" id="testScore" placeholder="Test Score"/><p />
<input type="button" value="Save/Show Average" onclick="insert()"/><p />
</fieldset><p />
</form>
<div id="display"></div>
</body>
<script type="text/javascript">
//Variables for arrays
var fName = [];
var lName = [];
var tScore = [];
//Variables from user input
var fNameInput = document.getElementById("firstName");
var lNameInput = document.getElementById("lastName");
var tScoreInput = document.getElementById("testScore");
//Variable for display
var display = document.getElementById("display");
//Function to add user info to arrays
function insert() {
fName.push(fNameInput.value);
lName.push(lNameInput.value);
tScore.push(tScoreInput.value);
clearAndShow();
}
//Function to display info entered from array
function clearAndShow() {
fNameInput.value = "";
lNameInput.value = "";
tScoreInput.value = "";
display.innerHTML = "";
display.innerHTML += "First Name: " + fName.join(", ") + "<br/>";
display.innerHTML += "Last Name: " + lName.join(", ") + "<br/>";
display.innerHTML += "Test Score: " + tScore.join(", ") + "<br/>";
}
</script>
</html>
I have table that is created that shows each item added to the array. In the last row of each column is an action field that lets you either edit or delete from the row. I am not sure how I am supposed to accomplish this. What I have so far does not work properly.
function del(item) {
participantList.splice(item,1);
displayLIst();
}
function addInfo() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
if(fname !='' && lname !="" && email !='') {
participantList[count] = new Object();
participantList[count].Fname = fname;
participantList[count].Lname = lname;
participantList[count].Email = email;
participantList[count].Action = "<button onclick='del("+count+")'>Delete</button>" + "<button onclick='edit("+count+")'>Edit</button>";
count++;
document.getElementById("fname").value ="";
document.getElementById("lname").value = "";
document.getElementById("email").value = "";
}
displayList();
}
I want to delete every object from the specified row in the array.
How are you getting the elements and putting them into the participant list?
Do you have references to the elements? Can you include the HTML as well and all the related code to what you want to do?
Below is how I would get all of the elements, and remove one.
You can remove an element by calling .remove() on it
Here is my example code: http://jsfiddle.net/gabs00/cxt170re/
var listItems = document.querySelectorAll('li');
var item = listItems[1];
item.remove();
querySelectorAll creates a live node list
I grab one of those elements (index 1) and delete it with Element.remove();
Check out the fiddle to see it in action.
Here is a current working version:
var participantList = [];
var edit = function(item) {};
var del = function(item) {
participantList.splice(item,1);
displayList();
};
function addInfo() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var count = participantList.length;
if(fname !='' && lname !="" && email !='') {
var item = {};
item.Fname = fname;
item.Lname = lname;
item.Email = email;
item.Action = "<button onclick='del("+count+")'>Delete</button><button onclick='edit("+count+")' disabled>Edit</button>";
participantList.push(item);
document.getElementById("fname").value ="";
document.getElementById("lname").value = "";
document.getElementById("email").value = "";
}
displayList();
};
var displayList = function () {
// clean previous data
console.log(participantList);
document.getElementById("results").innerHTML = "";
var content = "";
for(var i = 0; i<participantList.length; i++) {
content += "<tr>";
content += "<td>" + participantList[i].Fname + "</td>";
content += "<td>" + participantList[i].Lname + "</td>";
content += "<td>" + participantList[i].Email + "</td>";
content += "<td>" + participantList[i].Action + "</td>";
content += "</tr>"
}
document.getElementById("results").innerHTML = "<table>" + content + " </table>";
};
With the following HTML Code:
<input type="text" id="fname" />
<input type="text" id="lname" />
<input type="text" id="email" />
<button onclick="addInfo()">
Add
</button>
<div id="results">
EDIT: Missing JSFiddle link: https://jsfiddle.net/d64314uk/
I am implementing a Call list Where LOAD need a flame already Made is need list and Place checkbox Mark que um not been present . However NOT Giving .
I use a cursor idea , EO Bank Used And IndexedDB data , I do a Search All Students " , " the code " student " to equal When the " student " code in Table Presence , the problem happens here! HE DOES NOT When paragraph are a Correct ANSWER , he continues to test everyone.
The code below :
db.transaction ("tbl_PESSOAS"). ObjectStore ("tbl_PESSOAS"). get (cursor.value.COD_IDENT_PESSO) .onsuccess = function (event) {
$ wrapper = document.querySelector ('# check_presenca');
HTMLTemporario = $ wrapper.innerHTML;
= event.target.result person;
if (pessoa.FLG_IDENT_PESSO == "A" && cursor.value.FLG_IDENT_PESSO == "M") {
var w_codigo_reuniao = sessionStorage.getItem ("w_codigo_reuniao");
w_aux var = 01;
var bd = db.transaction ("tbl_PRESENCA"). ObjectStore ("tbl_PRESENCA")
index = bd.index ("COD_IDENT_REUNI");
index.openCursor (w_codigo_reuniao) .onsuccess = function (event) {
var = vector event.target.result;
if (vector) {
if (pessoa.COD_IDENT_PESSO == vetor.value.COD_IDENT_PESSO) {
HTMLNovo = '<li class = "item-item checkbox uib_w_69 widget" data-UIB = "ionic / checkbox" data-view = "0"> <label class = "checkbox"> <input class = "check" type = " checkbox "name =" '+ pessoa.COD_IDENT_PESSO +' "checked> <input id =" codigoPessoaPresente "value =" '+ pessoa.COD_IDENT_PESSO +' "type =" hidden "> </ label> '+ pessoa.TXT_NOMEX_PESSO +' </ li> ';
HTMLNovo = HTMLNovo + HTMLTemporario;
$ wrapper.innerHTML = HTMLNovo;
} else {
HTMLNovo = '<li class = "item-item checkbox uib_w_69 widget" data-UIB = "ionic / checkbox" data-view = "0"> <label class = "checkbox"> <input class = "check" type = " checkbox "name =" '+ pessoa.COD_IDENT_PESSO +' "> <input id =" codigoPessoaPresente "value =" '+ pessoa.COD_IDENT_PESSO +' "type =" hidden "> </ label> '+ pessoa.TXT_NOMEX_PESSO +' </ li > ';
HTMLNovo = HTMLNovo + HTMLTemporario;
$ wrapper.innerHTML = HTMLNovo;
vetor.continue ();
}
}
};
}
};
You will need to provide a key range if you want to filter the data.
store.openCursor(IDBKeyRange.lowerBound(0))
You can find some more info over here and about the different IDBKeyRanges here
I'm going to try to describe this the best I can. I have a form that the user fills out, when it confirms the users info, it then prints it out on a table, and the user may edit it directly on the table using the contendEditable attribute. The problem i'm having is if the user edits his/her email address, the browser detects it as an email address (since it's not in an input element) and doesn't pass the email through the form. All other values go through fine. I'm using PHP to process the form and just print out the fields to make sure it goes through properly.
The confirm page should like this:
John,Smith,JSMITH,abc#123.com,111-222-3345
But it looks like this:
John,Smith,JSMITH,null,111-222-3345
Any suggestions?
It would be easier if i posted my code so here it is:
HTML:
<html>
<head>
<script type = "text/javascript" src = "ext.js"></script>
</head>
<body>
<form name = "setupForm" id = "setupForm" action = "confirmSetup.php" method = "post">
<div id = "confirmInfo"></div>
<div id = "hiddenFields"></div>
</form>
</body>
</html>
/* I didn't put my full code on here as it is way too long.
But this HTML document is what is shown after input fields
have been previously submit, and this page is just to confirm
the user input.
*/
JS:
function verifyInfo(){ // This function is called when user submits all his info
var firstname = document.getElementById("txtFirstname").value;
var lastname = document.getElementById("txtLastname").value;
var username = document.getElementById("hdnUsername").value;
var email = document.getElementById("txtEmail").value;
var phone = document.getElementById("txtPhone").value;
var output = "";
output += "<table id = 'confirm'>";
output += "<tr>";
output += " <th>Firstname</th>";
output += " <td id = 'tdFirstname'>";
output += " <div onkeyup = 'updateUsername()' contentEditable>" + firstname + "</div>";
output += " </td>";
output += "</tr>";
output += "<tr>";
output += " <th>Lastname</th>";
output += " <td id = 'tdLastname'>";
output += " <div onkeyup = 'updateUsername()' contentEditable>" + lastname + "</div>";
output += " </td>";
output += "</tr>";
output += "<tr>";
output += " <th>Username</th>";
output += " <td id = 'tdUsername'>" + username + "</td>";
output += "</tr>";
output += "<tr>";
output += " <th>Email</th>";
output += " <td id = 'tdEmail'>";
output += " <div style = 'min-width:1px;' onkeyup = 'verifyEmail(this.parentNode.id,event)' contentEditable>" + email + "</div>";
output += " <div id = 'validInvalid'>";
output += " <span class = 'dgreen'><br/>Valid email!</span>";
output += " </div>";
output += " </td>";
output += "</tr>";
output += "<tr>";
output += " <th>Phone</th>";
output += " <td id = 'tdPhone'>";
output += " <div style = 'min-width:1px;' onkeyup = 'verifyPhone(this.parentNode.id,event)' contentEditable>" + phone + "</div>";
output += " <div id = 'validInvalid1'>";
output += " <span class = 'dgreen'><br/>Valid phone!</span>";
output += " </div>";
output += " </td>";
output += "</tr>";
output += "</table>";
output += "<input type = 'button' name = 'submitSetup' id = 'submitSetup' value = 'Get Set Up!' onclick = 'goToConfirm()'/>";
document.getElementById("confirmInfo").innerHTML = output;
}
/* The way that function works is it takes the inputted text,
and places it into the table. This table enables the user to dynamically make any
changes necessary right onto the table. The username is created from first initial
and last name, which is called on the 'updateUsername()' function, which I am leaving
out.
*/
function verifyEmail(id,e){
var unicode = e.charCode ? e.charCode : e.keyCode;
if((unicode < 37 || unicode > 40) && unicode != 9){ // This doesn't allow email to be verified if the arrow keys, or tab key is pressed
var email = document.getElementById(id).firstChild.firstChild.nodeValue;
var emailFilter = /^[^0-9][A-z0-9_]+([.]A-z0-9_]+)*[#][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/;
if(!emailFilter.test(email)){ // Checks if valid email
document.getElementById("validInvalid").innerHTML = "<span class = 'red'><br/>Not a valid email!</span>";
}else{
document.getElementById("validInvalid").innerHTML = "<span class = 'dgree'><br/>Valid email!</span>";
}
}
disableButton(); //If email or phone is invalid, button will be disabled
}
function verifyPhone(id,e){
var unicode = e.charCode ? e.charCode : e.keycode;
if((unicode < 37 || unicode > 40) && unicode != 9)){
var phone = document.getElementById(id).firstChild.firstChild.nodeValue;
if(phone.length > 12){ // Doesn't let user put it more than 12 characters (xxx-xxx-xxxx)
var difference = phone.length - 12;
phone = phone.substr(0,phone.length - difference);
document.getElementById(id).firstChild.firstChild.nodeValue = phone;
}
var phoneFilter = /\d{3}\-\d{3}\-\d{4}/;
if(!phoneFilter.test(phone)){ // Checks for valid phone number
document.getElementById("validInvalid1").innerHTML = "<span class = 'red'><br/>Not a valid phone!</span>";
}else{
document.getElementById("validInvalid1").innerHTML = "<span class = 'dgreen'><br/>Valid phone!</span>";
}
}
disableButton();
}
function disableButton(){
var email = document.getElementById("tdEmail").firstChild.nextSibling.firstChild.className;
var phone = document.getElementById("tdPhone").firstChild.nextSibling.firstsChild.className;
if(email == "red" || phone == "red"){
document.getElementById("submitSetup").disabled = true;
}else{
document.getElementById("submitSetup").disabled = false;
}
}
function goToConfirm(){ //This is the function that goes to confirmsetup.php. it works fine if email isn't edited in table, but if email is edited, it doesn't work
var firstname = document.getElementById("tdFirstname").firstChild.firstChild.nodeValue;
var lastname = document.getElementById("tdLastname").firstChild.firstChild.nodeValue;
var username = document.getElementById("tdUsername").firstChild.nodeValue;
var email = document.getElementById("tdEmail").firstChild.firstChild.nodeValue;
var phone = document.getElementById("tdPhone").firstChild.firstChild.nodeValue;
var hiddenfields = document.getElementById("hiddenFields");
var input = "<input type = 'hidden' name = 'hdnFirstname' id = 'hdnFirstname' value = '"+firstname+"'/>";
input += "<input type = 'hidden' name = 'hdnLastname' id = 'hdnLastname' value = '"+lastname+"'/>";
input += "<input type = 'hidden' name = 'hdnUsername' id = 'hdnUsername' value = '"+username+"'/>";
input += "<input type = 'hidden' name = 'hdnEmail' id = 'hdnEmail' value = '"+email+"'/>";
input += "<input type = 'hidden' name = 'hdnPHone' id = 'hdnPhone' value = '"+phone+"'/>";
hiddenFields.innerHTML = input;
document.setupForm.submit();
}
/* That is the end of my javascript file, it's a lot,
but hopefully you can understand it
*/
Finally, the final php script is simple:
<?php
$fn = $_POST['hdnFirstname'];
$ln = $_POST['hdnLastname'];
$un = $_POST['hdnUsername'];
$em = $_POST['hdnEmail'];
$ph = $_POST['hdnPhone'];
die($fn.",".$ln.",".$un.",".$em.",".$ph);
?>
the firstname, lastname, username, and phone alway print out correctly.
When the email is not edited, it prints out correctly,
When the email is edited, it prints out as null.
This is incorrect, values are parsed as text. Please review the code and make sure that you parse correct form names from http request object. It should fix your issue.