Passing form variables from one page to another - javascript

I have an existing app http://www.successcalculator.com. Currently, it functions all on one page but I have been asked to change it to a multipage flow. I am having trouble passing data from one page to the next. I'm more of a hobbyist developer so programming is not my forte.
Here's a sample of the HTML code:
<form>
<output id="averageJobsOut">30</output>
<input type="range" id="averageJobs" value="30" min="0" max="100" step="5" oninput="averageJobsOut.value = averageJobs.value" required>
<output id="jobValueOut">30</output>
<input type="range" id="jobValue" value="30" min="50" max="2000" step="10" oninput="jobValueOut.value = jobValue.value" required>
<output id="yearsOpenOut">3</output>
<input type="range" id="yearsOpen" value="3" min="1" max="20" step="1" oninput="yearsOpenOut.value = yearsOpen.value" required>
<input type="submit" onSubmit="calculateAll()"></input>
</form>
Here is a sample of the JavaScript:
function calculateAll() {
var averageJobs = +document.getElementById("averageJobs").value;
var jobValue = +document.getElementById("jobValue").value;
var yearlyRev = parseInt((averageJobs * 50) * jobValue);
document.getElementById("yearlyRev").value = yearlyRev + " Yearly Revenue";
}
I would like the app to gather peoples input as it does now and on submission of the form I would like it to redirect people to results.html where the form results would be available.
I have adding the following JavaScript to the calculateAll() function but can't seem to get the data to move over. I also tried some basic PHP GET & POST functions in the form but could only bring over form input not the calculations.
var averageJobs = document.getElementById("averageJobs").innerHTML;
localStorage.setItem("averageJobs", averageJobs);
window.open("results.html","_self");
Any assistance or insight would be appreciated. Thanks in advance.

30
30
3
Use form action with php, instead of javascript.

Use form method to pass data and catch them via a php page. You can use POST to hide data and GET to show data that you are passing via url. For this POST is preferrable.
<form action="action_page.php" method="POST">
from the php file you can catch the data by creating your own variables and using this
$var1 = $_POST('Name_of_the_Controller');

Related

How can i run an <input type="number"> onchange event using thymeleaf?

Hello,
i have a little problem that maybe you could help me with. I searched the internet for quite a long time but i didn't find any answers.
I have a little web shop using Spring and Thymeleaf. My task is now to implement the option to change the quantity of a cart item inside the cart. This value is stored in a variable ${item.quantity}.
So in conclusion if I press "up" or "down" on the input field, the item in the cart should change its quantity and the total price of all cart items should be evaluated again.
I used an <input type="number"> combined with an onchange event running a javascript function, but all my tries went wrong.
Here is the code snippet of cart.html template:
<input
type="number"
onchange="change(this.value)"
min="1"
max="5"
th:value="${item.quantity}"
>
And this is my javascript code:
<script th:inline="javascript">
/*<![CDATA[*/
function change(data) {
var quantity = /*[[${item.quantity}]]*/ data;
location.reload(false);
}
/*]]>*/
</script>
but this doesn't work.
Hopefully you understand what I mean and someone can help me, because I really don't have any idea how to else do this.
You need to send the changed quantity back to the server. As a first step do it without JavaScript. Use a simple form, for example:
<form action="/change-quantity">
<input type="hidden" name="itemId" th:value="${item.id}">
<input type="number" min="1" max="5" th:value="${item.quantity}">
<input type="submit" value="Update">
</form>
Now you need to write a POST controller for the path /change-quantity that looks up the item by the ID, change it's quantity and finaly redirects back to the page you came from.

How to replace "undefined" with zero value in javascript or form to pass to spring-mvc controller?

I am creating with a mouse event two float values in a javascipt jquery function and pass these values via form to a spring mvc controller as parameters. It works fine when the values get actually created but when I do not create them, the form passes a string "undefined" and the whole thing crashes.
my javascript values:
$('#width').val(event.pageX);
$('#height').val(event.pageY);
my form:
<form:form modelAttribute="Float2" method="POST" action="getFloats">
<input type="hidden" id="width" name="width" value=width>
<input type="hidden" id="height" name="height" value=height>
<button type="submit">Save the floats</button>
Is there a possibility to change the "undefined" to zero so that the form always passes floats?
Well, one option is to create html input tags already with the default values:
<input type="hidden" id="width" name="width" value="0">
<input type="hidden" id="height" name="height" value="0">
Then alter this values with JS if you need, otherwise default "0" values will be submitted

Volume Slider back to the server, live

I'm trying to get a web volume slider for a RasPi Project. Therefore I need a way to transfer the value of the slider live to the server.
Currently the slider is working fine, but I do not get the data to the server.
I already found a way to do it it via a submit button, but that’s not what I’m looking for because I need the volume “live” at the server.
Best regards
geerkins
<script>
function verarbeiten(auswertung){
//var test = auswertung;
//alert(test);
return auswertung;
}
</script>
<form oninput="numerisch.value=verarbeiten(auswertung.value)">
<!--<form oninput="numerisch.value=auswertung.value">-->
<input type="range" name="auswertung" min="0" max="10" value="5" orient="vertical">
<br>
<output name="numerisch">5</output>
</form>

Displaying Different Pictures For Different Form Results

I have a form in google sites as two text fields. I don't know how to actually retrieve the data that is submitted. Is there a way to display a different image on the web page when a specific answer to the form is submitted?
Here's what I have now:
<form action="Interactive Map">
Start Room: <input name="StartRoom" type="text" value="" />
End Room: <input name="EndRoom" type="text" value="" />
<input type="submit" value="Submit" />
</form>
You should have an array of images
After the form is submitted you can use random for the index of the array images
Sample Code
var arrayImglocation = ['img1.jpg','img2.jpg'];
var rand = arrayImglocation[Math.floor(Math.random() * arrayImglocation.length)];

Javascript calculations working in IE only

I am trying to create a form so that user can enter certain information and JavaScript will do the calculations for them. I've been trying to use http://demo.rsjoomla.com/calculation-form-example (the one on the left) to get the basics started and I can manipulate from there. So far though it's only working in IE.
Here's the basic layout of my code:
HTML
<input type="number" name="income1" value="0" onkeyup="update()">
<input type="number" name="income2" value="0" onkeyup="update()">
<input type="number" name="income3" value="0" onkeyup="update()">
JavaScript
var op1=document.getElementById('income1');
var op2=document.getElementById('income2');
var result=document.getElementById('income3');
if(op1.value=="" || op1.value!=parseFloat(op1.value)) op1.value=0;
if(op2.value=="" || op2.value!=parseFloat(op2.value)) op2.value=0;
result.value=0;
result.value=parseInt(result.value);
result.value=parseInt(result.value)+parseInt(op1.value) - parseInt(op2.value);
You wrote code that is looking for id
document.getElementById('income1');
Where is the id on the input?
<input type="number" name="income1" value="0" onkeyup="update()">
Name is not the same thing as id.
And your parseFloat check, you probably should look at isNaN(). And you are using parseInt() at the bottom, and you are using parseFloat() above!
If you're going to do getElementById, you need to have an ID in your element.
<input type="number" id="income1" value="0" onkeyup="update()">
var op1=document.getElementById('income1');
Or you could use jQuery (requires including jQuery source):
<input type="number" name="income1" value="0" onkeyup="update()">
var op1 = ${"input[name=income1]").val();
Alternatively, you could do this, assuming you only have one element named income1. This isn't a very good way to do this, but it should work.
<input type="number" name="income1" value="0" onkeyup="update()">
var op1=document.getElementsByName('income1')[0];

Categories