Random Order Number Post to Email - javascript

Hi I have a standard HTML side.
From the final page before submission of form (page3.php), i have all the details already there in hidden fields, once I click "Submit" and email is sent with the details.
I am trying to add a random number, like an order number.
I am able to do it with:
<script>
now = new Date();
randomNum = '#S';
randomNum += Math.round(Math.random()*9);
randomNum += Math.round(Math.random()*9);
randomNum += now.getTime().toString().slice(-6);
</script>
and in html on the form:
Order Number = <script>document.write(randomNum)</script>
<input type="hidden" name="orderid" onload="this.value=randomNum">
This works, a random number can be generated on that page itself (page3.php), however when I click submit, I cant seem to get it to appear in the email. Submit leads to an email.php that sends the form data to my email address. In that email.php I have it sent to collect "orderid" and post it into the email body as "$orderid"
Any idea what I am doing wrong?

Place the JavaScript code which generates the random number after the definition of the <input> element:
<input type="hidden" name="orderId" id="orderId">
<script>
now = new Date();
randomNum = '#S';
randomNum += Math.round(Math.random()*9);
randomNum += Math.round(Math.random()*9);
randomNum += now.getTime().toString().slice(-6);
var order = document.getElementById("orderId");
order.value = randomNum;
</script>
You may want to place your scripts at the bottom of the page for this and other reasons.

Related

Storing Array of Objects in localStorage and dynamically display them with HTML

I have a form where a user will input their contact details.
They can then choose to submit the form or press add another person.
If they choose to add another person then the data in the form is passed into local storage.
From there the user can input as many peoples details as they need to with all the data being stored locally.
I then need to be able to display the stored data above the form so that they can see what they have already added.
This is what I have which is where the data is displayed
<div class="guestTable" id="guestview"></div>
And this is what is passing it into dynamic HTML to be displayed.
<script>
let guests_deserialized = JSON.parse(localStorage.getItem("guests"));
let html = "<div>"; // Build the div output
var i;
for (i = 0; i < guests_deserialized.length; i++) {
html += `<div id='guests${i}'>`; // If you add a button to remove a guest you can use the counter similarly to determine which element you want to delete.
html += guests_deserialized[i].firstName + "<br>";
html += guests_deserialized[i].lastName + "<br>";
/* html += guests_deserialized[i].email + "<br>";
html += guests_deserialized[i].mobileNumber + "<br><br>"; */
html += "</div>";
}
html += "</html>";
localStorage.setItem("guestshtml", html);
}); /* resets the form */
/* document.querySelector('form').reset(); */
</script>
<script>
let guests_html = localStorage.getItem("guestshtml"); // Display the guests data
document.getElementById("guestview").innerHTML = guests_html;
</script>
Currently the output is like so
fName
lName
I would like to display the data in a table like so
Guest 1 fName lName (remove)
I have searched here, google and YouTube for help but I am coming up empty. Can anyone help?
Ive written a quick example on jsFiddle: click here
HTML:
<form onsubmit="addEntry(event)" >
<input type="text" name="fname" id="fname"/>
<input type="text" name= "lname" id="lname"/>
<button>
Add
</button>
</form>
<div class="guestTable" id="guestview"></div>
JS:
addEntry = (e) => {
e.preventDefault()
let entries = []
let fname = document.getElementById("fname").value
let lname = document.getElementById("lname").value
if(localStorage.getItem('guests')){
entries = JSON.parse(localStorage.getItem('guests'))
entries.push({fname,lname})
localStorage.setItem('guests',JSON.stringify(entries))
}else{
entries.push({fname,lname})
localStorage.setItem('guests',JSON.stringify([{fname,lname}]))
}
let html =''
for(i=0;i<entries.length;i++){
html += '<div>'+entries[i].fname+' '+entries[i].lname+'</div>'
}
document.getElementById("guestview").innerHTML= html
}

inserting random number into hidden field on submit

Trying to insert a random number into a hidden field in a form using javascript. Not passing any value since SQL error of - doesn't have a default value
var randomNum = '';
randomNum += Math.round(Math.random()*5);
var elem = document.getElementById("randSS").value = randomNum;
<input name="randSS" type="text" id="randSS"/>
Didn't have protected fillable added!

Javascript getElementById("string").value for HTML form input

I want to add the user input values for rounds 1 and 2 when you press the calculate button but it's not retrieving the values of the input fields i'm "getting by id".
My script.js doc is linked to at the bottom of the html document already.
I've made some updates to the JS.
https://jsfiddle.net/f7p0swpk/2/
var roundOne = document.getElementById("roundOne").value;
var roundTwo = document.getElementById("roundTwo").value;
function add() {
var total = roundOne + roundTwo;
document.querySelector(".total").textContent = total;
}

Extracting data from array after HTML form submission (keypress event)

So I have a HTML form with a keypress event listener recording the charCode of the key pressed and then convert that charCode to a String of the letter related to the key.
Each time a letter is entered to the form, a new entry is created in input_array[].
I have each letter in the alphabet stored as a SVG within JS variables in a different part of my main.js file and I would like to be able to read what letters have been stored in input_array[] and then display the SVG appropriate to that letter on a new page once the form has been submitted.
I've tried using the method below to extract the data from the array, but it fires on the first keypress and therefore I can't get all of the array data to then display the 4 letters. I also feel like there has to be a more efficient way.
var letter_one = input_array[0];
var letter_two = input_array[1];
var letter_three = input_array[2];
Here's a JSFiddle, to show a basic version of what I'm trying to do. If you open the console you will see how input_array[] is being created.
I'm still very new to this language, so any help would be greatly appreciated.
As you suspected, this is much simpler than you're making it :)
When the form is submitted you can just snag the value from the input:
function handleSubmit() {
var val = document.getElementById('user_input').value;
validate(val);
console.log(val);
var letter_one = val[0];
var letter_two = val[1];
var letter_three = val[2];
var letter_four = val[3];
return false; // stops POST for dev
}
https://jsfiddle.net/1htpm6ag/
That being said, if you are actually doing this on a POST then on the page you are POSTing to you'll have to snag this from the POSTed form data, which is entirely different. Are you trying to do this in client side JS or a POST handler?
If I am understanding you correctly is sound like you want to do the following.
On Page 1 user enters text into textfield.
On Submit send that text to page 2.
On Page 2 convert that text into an array of letters to associate with SVG paths to display.
If the above is the case you need a lot less javascript.
Page 1: Should only have your form with your text box and a submit button so the data is submitted to the next page using the GET method.
Page 2: Here is where you will need the Javascript to retrieve that data sent across and process it into your array of letters. I would also filter for non-letter characters as well.
I have created an example form in the code below that submits to itself and then the javascript script tag will pull the variable from the url and process it into an array of letters. In your case you would move the Javascript to page 2.
<script type="text/javascript">
(function(){
function getParamValue(param) {
var urlParamString = location.search.split(param + "=");
if (urlParamString.length <= 1) return "";
else {
var tmp = urlParamString[1].split("&");
return tmp[0];
}
}
function isLetter(c) {
return c.toLowerCase() != c.toUpperCase();
}
var user_input = getParamValue('user_input');
var char_array = null;
if(user_input !== ''){
char_array = user_input.split("");
char_array = char_array.filter(isLetter);
for(var i in char_array){
console.log('Char ' + i + ' = ' + char_array[i]);
}
}
})();
</script>
<body>
<form id="user_form" class="" action="?" method="GET">
<input type="text" name="user_input" />
<input type="submit" value="submit">
</form>
</body>

how do I pass js variable value to php

I am trying to pass a random number from html to php
the random number (generated by js), is displayed on the webform and the user must supply its value on the form. php must GET this value and process accordingly.
In my webpage, i have this js and form action;
<script type="text/javascript">var rnd = Math.floor((Math.random() * 100) + 1);</script>
<form name="contactform" method="post" action="http://example.com/example.php&formvar=rnd">
In my example.php, i have
<?php
$rands = $_GET['formvar'];
echo "rands:" .$rands;
?>
In this example, the value of variable formvar is always 'rnd' instead of the value of rnd
Can you please advise the best way to do this ?
To put data from a JavaScript variable into the document (including into form data), you need to write JavaScript that will do that.
You can't just use the variable name as part of HTML.
If you really want to put it in the URL for the form, you could do something like:
<form id ="contactform" method="post" action="http://example.com/example.php">
</form>
<script>
var rnd = Math.floor((Math.random() * 100) + 1);
var form = document.getElementById('contactForm');
form.action =+ "?formvar=" + rnd;
</script>
But you would probably be better off including it in the post data and using an input.
<script>
var rnd = Math.floor((Math.random() * 100) + 1);
var form = document.getElementById('contactForm');
var input = document.createElement('input');
input.name = "formvar";
input.value = rnd;
input.type = "hidden";
form.appendChild(input);
</script>

Categories