UrlDecode value on html textbox on submit - javascript

I have a very simple form with three fields that I need to submit to an mvc action. The form must be application/x-www-form-urlencoded. however, one of the fields is populated by users copying and pasting an already urlencoded value. I would like to decode that value prior to submitting the form. this seems really simple but I keep running into proplems with my javascript.
Here is the code:
<html>
<head>
<script>
function decodeURI()
{
decodeURIComponent(document.createprofile.URI.value);
}
</script>
<title>Test Create</title>
</head>
<body>
<center>
<h1> Spoof Profile Calls </h1>
<hr>
<div style="border: 1px solid black; width: 300px;">
<b>Create</b>
<form method="post" action="https://test.test-lab.com/Profile/Create/" name="createprofile">
<input type="hidden" name="ReturnURL" value="self.close()">
UserName: <input type="text" name="UserName"><br />
Client: <input type="text" name="Client"><br />
URI: <input type="text" name="URI" onblur="decodeURI();"><br />
<input type="submit" formenctype="application/x-www-form-urlencoded" value="Go To - Create"><br />
</form>
</div>
</body>
</html>
The URI field is the one that needs url decoded prior to submission because it gets reencoded and thus corrupted. I could ask the users to un-encode these values themselves but they are not terribly sophisticated users and it will likely not happen.
Thank you in advance!
UPDATED WITH FAILING CODE

Replace the line
URI: <input type="text" name="URI" onblur="decodeURI();"><br />
by
URI: <input type="text" name="URI" onchange="decodeURI(this);"><br />
And do something like
function decodeURI(elm) {
elm.value = 'foo ' + elm.value + ' bar';
return false;
}

Related

Passing data from a form to a table on another page (html) [duplicate]

I have two HTML pages: form.html and display.html. In form.html, there is a form:
<form action="display.html">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
The form data is sent to display.html. I want to display and use the form data serialNumber in display.html, as shown below:
<body>
<div id="write">
<p>The serial number is: </p>
</div>
<script>
function show() {
document.getElementById("write").innerHTML = serialNumber;
}
</script>
</body>
So how can I pass the serialNumber variable from form.html to display.html so that the above code in display.html will show the serial number and the JavaScript function show() gets the serialNumber from the first HTML?
If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.
In the form, add a method="GET" attribute:
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the serialNumber value as a parameter. Something like:
http://www.example.com/display.html?serialNumber=XYZ
You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:
// from display.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
See also JavaScript query string.
The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the display.html page loads.
See also How to use JavaScript to fill a form on another page.
You need the get the values from the query string (since you dont have a method set, your using GET by default)
use the following tutorial.
http://papermashup.com/read-url-get-variables-withjavascript/
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
Another option is to use "localStorage". You can easealy request the value with javascript in another page.
On the first page, you use the following snippet of javascript code to set the localStorage:
<script>
localStorage.setItem("serialNumber", "abc123def456");
</script>
On the second page, you can retrieve the value with the following javascript code snippet:
<script>
console.log(localStorage.getItem("serialNumber"));
</script>
On Google Chrome You can vizualize the values pressing F12 > Application > Local Storage.
Source:
https://www.w3schools.com/jsref/prop_win_localstorage.asp
Using pure JavaScript.It's very easy using local storage.
The first page form:
function getData()
{
//gettting the values
var email = document.getElementById("email").value;
var password= document.getElementById("password").value;
var telephone= document.getElementById("telephone").value;
var mobile= document.getElementById("mobile").value;
//saving the values in local storage
localStorage.setItem("txtValue", email);
localStorage.setItem("txtValue1", password);
localStorage.setItem("txtValue2", mobile);
localStorage.setItem("txtValue3", telephone);
}
input{
font-size: 25px;
}
label{
color: rgb(16, 8, 46);
font-weight: bolder;
}
#data{
}
<fieldset style="width: fit-content; margin: 0 auto; font-size: 30px;">
<form action="action.html">
<legend>Sign Up Form</legend>
<label>Email:<br />
<input type="text" name="email" id="email"/></label><br />
<label>Password<br />
<input type="text" name="password" id="password"/></label><br>
<label>Mobile:<br />
<input type="text" name="mobile" id="mobile"/></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" id="telephone"/></label><br>
<input type="submit" value="Submit" onclick="getData()">
</form>
</fieldset>
This is the second page:
//displaying the value from local storage to another page by their respective Ids
document.getElementById("data").innerHTML=localStorage.getItem("txtValue");
document.getElementById("data1").innerHTML=localStorage.getItem("txtValue1");
document.getElementById("data2").innerHTML=localStorage.getItem("txtValue2");
document.getElementById("data3").innerHTML=localStorage.getItem("txtValue3");
<div style=" font-size: 30px; color: rgb(32, 7, 63); text-align: center;">
<div style="font-size: 40px; color: red; margin: 0 auto;">
Here's Your data
</div>
The Email is equal to: <span id="data"> Email</span><br>
The Password is equal to <span id="data1"> Password</span><br>
The Mobile is equal to <span id="data2"> Mobile</span><br>
The Telephone is equal to <span id="data3"> Telephone</span><br>
</div>
Important Note:
Please don't forget to give name "action.html" to the second html file to work the code properly. I can't use multiple pages in a snippet, that's why its not working here try in the browser in your editor where it will surely work.
<form action="display.html" method="get">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
In display.html you should add the following code.
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var sn = getParameterByName('serialNumber');
document.getElementById("write").innerHTML = sn;
</script>
Use "Get" Method to send the value of a particular field through the browser:
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
If your situation is as described;
You have to send action to a different servelet from a single form and you have two submit buttons and you want to send each submit button to different pages,then your easiest answer is here.
For sending data to two servelets make one button as a submit and the other as button.On first button send action in your form tag as normal, but on the other button call a JavaScript function here you have to submit a form with same field but to different servelets then write another form tag after first close.declare same textboxes there but with hidden attribute.now when you insert data in first form then insert it in another hidden form with some javascript code.Write one function for the second button which submits the second form. Then when you click submit button it will perform the action in first form, if you click on button it will call function to submit second form with its action. Now your second form will be called to second servlet.
Here you can call two serveltes from the same html or jsp page with some mixed code of javascript
An EXAMPLE of second hidden form
<form class="form-horizontal" method="post" action="IPDBILLING" id="MyForm" role="form">
<input type="hidden" class="form-control" name="admno" id="ipdId" value="">
</form>
<script type="text/javascript">
function Print() {
document.getElementById("MyForm").submit();
}
</script>
*first html page*
<form action="display.jsp" >
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
*Second html page*
<body>
<p>The serial number is:<%=request.getParameter("serialNumber") %></p>
</body>
you will get the value of the textbox on another page.

Auto-fill specific login forms of a external webpage

I'm trying to pass credentials to fill automatically the inputs login of this website: https://www.pinterest.pt/login/ .
I don't know what are the variables. So I used the inspect of the browser to know what is the id of each input.
I'm using this code but it is not working:
function Test() {
var name = document.getElementById("id").value;
var password= document.getElementById("password").value;
document.forms["registerForm"].submit(); //form submission
}
<!DOCTYPE html>
<html>
<body>
<form id="registerForm" name="registerForm" method="post" target="_top" action="https://www.pinterest.pt/login/">
<input id="email" name="id" type="email" value="examplelogin" />
<input id="password" name="password" type="password" value="examplepassword" />
<input type="button" name="submit" id="btn" value="Submit" onclick="Test()" />
</form>
</body>
</html>
Do you know what I'm doing wrong?
Thank you for your help.
Not so much an answer to your question, but more of a future reference, you don't need to get all elements within a form via a selector. You can simply use the following technique:
function Test() {
let form = document.getElementById('registerForm');
var password = form.elements.password.value;
var email = form.elements.email.value;
form.submit();
}
Notice how accessing form.elements grants direct access to the element you're trying to read out.
I may just be nit-picking, but since this is a form submit, you probably need to use onsubmit and not just have the button click do something. Try this maybe?
<!DOCTYPE html>
<html>
<body>
<form id="formulario" name="formulario" method="post" target="_top" action="https://www.allianz.pt/area-privada" onsubmit="submitFunction()">
<input id="usuario" name="_58_login" type="text" value="examplelogin" />
<input id="password" name="_58_password" type="password" value="examplepassword" />
<button type="submit">Submit</button>
</form>
<script>
function Test() {
// your submit code
}
</script>
</body>
</html>
Forms can be very picky sometimes. Always best to use a working example for exactly what you're doing as a reference.

Console Log not Logging -it's at the very beginnng of the js file

my console log is not outputting anything. It's at the very start of the javascript file, so I have no idea why it doesn't log anything.
Otherwise I'm getting a 302 "Error", but I assume the problem is server side.
Lastly, the ajax post is not getting written into the database. As I've never worked with AJAX before, any pointers would be welcome.
Note: I'm using a Mikrotik as a HotSpot, and it's using $ (dolar signs) for it's own purpuse, so I can't use JQuery.
Thanks for all the help.
This is the whole code, as is...
<!DOCTYPE html>
<html>
<head>
<title>HotSpot</title>
</head>
<body>
<!-- Hotspot login form -->
<form name="hotspot" action="$(link-login-only)" method="post" id="hotspot"
$(if chap-id) onSubmit="return doLogin(); return false;" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<input type="hidden" name="username" type="text" value="HSuser" />
<input type="hidden" name="password" type="password" value="SimpleUserPassword" />
</form>
<!-- Mail for which gets inserted into the DB -->
<form name="mail" action="http://some.domain/validate-sanitize.php" method="post" id="mail">
<h1>Hotspot</h1>
<h2>To gain internet access, enter your email.</h2>
<br />
<input type="text" id="email" name="email" autofocus="autofocus" />
<br />
<input type="submit" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
<script rel="javascript" type="text/javascript">
document.getElementById("submit_ok").addEventListener("click", SendAjax);
function SendAjax() {
var email = document.getElementById("email").value;
console.log(email);
// Check if fields are empty
if (email=="") {
alert("Please enter your email.");
}
// AJAX code to submit form
else{
var xhr = new XMLHttpRequest();
xhr.open('POST', '$(link-login-only)', true);
xhr.send("dst=$(link-orig)&popup=true&username=HSuser&password=SimpleUserPassword");{
setTimeout(function(){
console.log("Fired " + email);
document.getElementById("submit_ok").submit();}, 500 );
}
}
}
</script>
</body>
</html>
This does not answer you question, still it will show the result.
Try replace console.log(email); with alert(email);.
Did you try another browser?
The problem was with Mikrotik. Login was set as CHAP (password authentication with salt), and this method was not implemented. Still don't know why that would be causeing the console.log problems, but well, there it is.

HTML Submit Button Is Navigating Away From the Page

I have a mobile app with a submit button. When I enter the parameters and hit submit, I want the page to reload with the new value displayed. For some reason, when I click submit, it navigates to index.html. I can't get it to stop. I've tried event.preventDefault(); and action = "saved_locations.html" but that took me to a weird pure html version of the page outside of the app.
<div class="pages">
<div data-page="saved_locations" id="saved" class="page navbar-through no-toolbar" align="center">
<h2><br><u>Enter A Location<br><br></u>
<form id="enter_location">
Latitude: <input type="text" id="Latitude" value=""><br>
Longitude: <input type="text" id="Longitude" value=""><br>
Location: <input type="text" id="Location" value=""><br>
<input type="submit" value="Submit">
</form>
<h2><u>Saved Locations</u></h2>
</div>
</div>
This is how a proper HTML form looks like. I'll do a basic example here:
function showData() {
let x = document.getElementsByTagName("input")[0].value;
let y = document.getElementsByTagName("input")[1].value;
let z = document.getElementsByTagName("input")[2].value;
alert(`For the location ${z} the latitude is ${x} and the longitude is ${y}`);
}
form {
font-weight: bold;
letter-spacing: 3px;
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<form action="https://stackoverflow.com/questions/52657111/html-submit-button-is-navigating-away-from-the-page">
Latitude:<br>
<input type="text" name="Latitude" value=""><br> <hr/>
Longitude:<br>
<input type="text" name="Longitude" value=""><br><hr/>
Location:<br>
<input type="text" name="Location" value=""><br><hr/>
<input type="submit" value="Submit" onclick="showData()">
</form>
<p id="demo"></p>
</body>
</html>
Like others in the comments suggested, you're missing an action. Here is a brief explanation of why is needed and what happens if it omitted:
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called "/server_side.php". This page contains a server-side script that handles the form data.
<form action="/server_side.php">
If the action attribute is omitted, the action is set to the current page. - [In your case the root index page].
Turns out that the issue is that I'm using Framework7 for my app. window.location.reload(); doesn't work, but this does:
setTimeout(mainView.router.refreshPage(),5);

Printing Error/Stopping Form Submission For Digits JavaScript

Issue 1:
I'm trying to create a simple javascript function to check if all the characters entered into the field are numeric. The function is running, but not as I had hoped. I've located the isNaN function in javascript and it does not appear to be working. It enters the if statement every time, no matter if I type "asdf" or "1234" into the box.
Issue 2:
I want the form to stop submission obviously if the check for digits fails. However, I want it to continue to the submission page otherwise. I've been reading on ways to do this with pure JavaScript, and have the returns implemented as instructed. Is this a viable way to perform this? Alternatives?
Any help would be great on issue 1 or 2.
Here's my entire code:
<title>Bank System</title>
<script type="text/javascript">
function checkNumeric()
{
var pin = document.getElementById('pin');
if(isNaN(pin))
{
document.getElementById('message').innerHTML="Not A Valid Number";
return false;
}
else
{
return true;
}
}
</script>
<body style="background-color: gray;">
<h1>Welcome To Clayton's Credit Union</h1>
</br></br>
<form action="process.php" method="POST">
<label>Username: <input type="text" name="username"/></label>
</br>
<label>Pin Number<input type="text" maxlength="4" name="pin" id="pin"/></label>
</br></br>
<input type="submit" value="Submit" name="submit" onClick=" return checkNumeric()"/>
<p id="message"></p>
</br>
</form>
*Please note, I know this is not secure in anyway. I'm making this example specifically to show how vulnerable it is.
You are passing an element to isNaN rather than it's value. Try this:
var pin = document.getElementById('pin').value;
BTW
You should run this validation on the form submit rather than the button click:
<form action="process.php" method="POST" onsubmit="return checkNumeric()">
<input type="submit" value="Submit" name="submit" />
instead of:
<form action="process.php" method="POST">
<input type="submit" value="Submit" name="submit" onclick="return checkNumeric()" />

Categories