Issue with javascript retrieve form data for url - javascript

I am kind of new to javascript however I have created a submit form that I want to redirect me to a url based on form input. Here is my current code...
The issue I'm running into however is that the form is sending me the initial value rather than the updated form value (It is using "whatevs" no matter what).
HTML
<form id="Search-Form" onClick="genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Javascript
function genURL() {
var searchSubmit = document.getElementById("searchSubmit").value;
window.location = "randomsite/view" + searchSubmit;
}

Add return and use onsubmit:
<form id="Search-Form" onsubmit="return genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Revise function like so:
function genURL()
{
location.href = "randomsite/view" + document.getElementById("search").value;
return false;
}
If you were to use onclick, it would go on the button, not the form.

Related

How can i pass arrays between HTML pages by using ONLY HTML and JS?

I have this simple code in the test0.html file, it sends data to test1.html :
<body>
<form action="test1.html">
<input type="text" name="array[0]" placeholder="val1" id="">
<input type="text" name="array[1]" placeholder="val2" id="">
<input type="submit" value="send">
</form>
</body>
Then i have this code on the test1.html, that is supposed to send some new data back to test0:
<body>
<form action="test0.html">
<input type="text" name="array[2]" placeholder="val3" id="">
<input type="text" name="array[3]" placeholder="val4" id="">
<input type="submit" value="send back">
</form>
When i send data back to test0, i just get the newest data typed in test1.html. I'd like to know how to keep track of the ones sent previously from test0.
Thanks!
As the default form method is GET, the form parameters will be passed using the query parameters
So you can add a hidden input field to your form for each query parameters.
<body>
<form action="test0.html">
<input type="text" name="array[2]" placeholder="val3">
<input type="text" name="array[3]" placeholder="val4">
<input type="submit" value="send back">
</form>
<script>
(function() {
var form = document.querySelector("form");
var queryParams = new URLSearchParams(location.search);
for (var key of params.keys()) {
var input = document.createElement("input");
input.type = "hidden";
input.name = key;
input.value = queryParams.get(key);
form.insertBefore(input, form.firstChild);
}
})();
</script>
</body>
You take the sent data and store it temporarily, so you can then pass it on to the following pages. Input fields of type hidden are suitable here.
<form action="test0.html">
<input type="hidden" name="array[0]" value="SUBMITTED_DATA">
<input type="hidden" name="array[1]" value="SUBMITTED_DATA">
<input type="text" name="array[2]" placeholder="val3" id="">
<input type="text" name="array[3]" placeholder="val4" id="">
<input type="submit" value="send back">
</form>
With this approach, you can not determine whether the data were subsequently edited! Here a signature can provide remedy.

How to pass the input entered in an html form to the action of the same form

<form action="<c:url value = "/deal/#value-that-user-enters#"/>" method="POST">
Kindly enter the deal id : <input type="text" name="dealId">
<input type="submit" value="Get the deal" />
</form>
In the above code, I want the action attribute of form to be /deal/(deal-id-entered-by-user). Is there any way to do it without using any javascript? And is it at all possible even with javascript?
You should be able to do it simply with javascript like this:
document.querySelector('form').onsubmit = function() {
this.setAttribute('action', "/baseurl/" + document.querySelector('input[name=dealId]').value)
}
<form action="/baseurl/" method="POST">
Kindly enter the deal id :
<input type="text" name="dealId">
<input type="submit" value="Get the deal" />
</form>
The best way is to change the form action by javascript:
document.forms[0].action=documnet.getElementById('dealId').value;
You can use it like this:
<form action="<c:url value = "/deal/#value-that-user-enters#"/>" method="POST">
Kindly enter the deal id : <input type="text" class="myBox" name="dealId">
<input type="submit" value="Get the deal" />
</form>
$('.myBox').on('change', function (event) {
var myVal = $(this).val();
$('form').attr('action', function(i, value) {
return value + myVal;
});
});

use js functions return value for html form action attribute

I want to use the return value of a JS function as the URL for a form get action. Is it possible or do I need to set the form attributes with a function call in the onSubmit attribute?
edit: this is basically what i want to do
<div class="search">
<form method="get" action="https://duckduckgo.com/" id="search-form">
<input id="searchbar" type="text" name="q" size="31" maxlength="255" value="" autofocus="autofocus"/>
</form>
<script type="text/javascript">
document.getElementById("search-form").action = "bang()";
</script>
</div>
the bang function is an implementation of the bang system from DDG in JS, so i can easily add bangs to a searchbox in my webpage.
You can use the onsubmit event for the form to set the action before the actual submit happens.
<form id="testForm" methods="get" action="#" onsubmit="setFormUrl()">
Search: <input type="text" name="q" />
<input type="submit" value="Go" />
</form>
function bang()
{
return "http://www.google.com";
}
function setFormUrl()
{
var url = bang();
document.getElementById('testForm').setAttribute('action', url);
}

Dynamic Hidden Form Field Data Absent From POST

I have a form that, when submitted, does not post the dynamically added hidden field.
html:
<div>
<form action="thankyou.php" onsubmit="return validate()" id="orderform" method="post">
<input type="text" name="name" /><br>
<input type="text" name="email" required /><br>
<input type="text" name="charterco" required /><br>
<input type="text" name="bname" /><br>
<input type="text" name="dtime" required /><br>
<input type="submit" />
</form>
</div>
jquery:
$('#orderform').submit(function(eventObj){
$('<input />').attr('type','hidden')
.attr('id','list')
.attr('name','shopList')
.attr('value',sliststr>)
.appendTo('#orderform');
return true;
});
POST data from Chrome DevTools:
name:b
email:b#b.com
charterco:b
bname:b
dtime:12:00
message:Comment
I can't work out what's gone wrong. My sliststr variable turns up filled and correct in my little debugging test on jsfiddle here. For whatever reason, it isn't POSTing.
EDIT: As #JayBlanchard pointed out below, I am adding to the form after the POST has been written.
Try to append the dynamic element, set the value of it and then submit the form. Otherwise it's submitting the form and then appending the html in callback.
Try the following.
function validate(){
var shoplist = [1,2,3];
$('#orderform').append("<input type='text' name='shop' id='list'>")
$('[name="shop"]').val(shoplist)
$('#orderform').submit(function(eventObj){
return true;
});
}

How to get data from form to javascript and redirect to another page?

I have a html5 form with name, surname ect. The reason why I'm using a form is so that the user has to fill in everything, for that I'm using required. I want to save all the data in localStorage, for that I need to move the data to JavaScript.
How do access the data in JavaScript when the submit button is pressed while redirecting the user to another page?
This is the code:
Html5
<form id="TheForm" method="post">
<input type="text" id="Name" placeholder="*Förnamn" required >
<input type="text" id="Surname" placeholder="*Efternamn" required >
<input type="email" id="FirstEmail" placeholder="*e-postadress" autocomplete="on" required >
<input type="email" id="SecondEmail" placeholder="*Verifiera e-postadress" autocomplete="off" required >
<input type="text" id="Address" placeholder="*Adress" required >
<input type="submit" id="Submit" onclick="function()" value="Skicka">
</form>
var submit = function () {
window.localStorage.name = document.getElementById('Name').value;
// Save all the other fields
// You either return a non-false value here and let the form submit
// Or you return false and do a window.location change
};
window.onload = function () {
var form = document.getElementById('TheForm');
if (form.attachEvent) {
form.attachEvent('submit', submit);
} else {
form.addEventListener('submit', submit);
}
}
Try this
Java Script
function storeDetails() {
if(typeof(Storage)!=="undefined") {
localStorage.setItem('name', document.getElementById('Name').value));
//code to store other values will go here
} else {
alert('Your browser do not support local storage');
}
}
HTML
<form id="TheForm" method="post" onsubmit="javascript:storeDetails();" action=" ">
<input type="text" id="Name" placeholder="*Förnamn" required >
<input type="text" id="Surname" placeholder="*Efternamn" required >
<input type="email" id="FirstEmail" placeholder="*e-postadress" autocomplete="on" required >
<input type="email" id="SecondEmail" placeholder="*Verifiera e-postadress" autocomplete="off" required >
<input type="text" id="Address" placeholder="*Adress" required >
<input type="submit" id="Submit" onclick="function()" value="Skicka">
</form>

Categories