Javascript form post to another page [duplicate] - javascript

This question already has answers here:
Pass parameter between pages using jquery mobile
(2 answers)
Closed 8 years ago.
I am using jquery mobile for phonegap on an app I am making, so I am only allowed HTML, JavaScript, and CSS.(no PHP) I need to pass the input from a text box to the next page when they fill out the text area, I am just not sure how to do it in JavaScript without php.
//text input feild
<div data-role="fieldcontain"><label for="name-c">Enter Challenge:</label>
<input id="name-c" name="name" type="text" value="" /></div>
//button labels for selection
<div data-role="fieldcontain"><label class="select" for="select-choice-c">Challenge Type:</label> <select id="select-choice-c" name="select-choice-c"><option value="standard">Challenge</option><option value="rush">Public Challenge</option> </select></div>
Any help would be awesome! Thanks!

you have to use Jquery to do a more effective way I'll give you an example of how to do it:
Below is the Simple HTML Form.
<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST">
First Name: <input type="text" name="fname" value =""/> <br/>
Last Name: <input type="text" name="lname" value ="" /> <br/>
Email : <input type="text" name="email" value=""/> <br/>
</form>
For jQuery Ajax Form Submit, we can use jQuery.ajax() or jQuery.post() method. To serialize form data, we can use jQuery.serialize() or jQuery.serializeArray().
//callback handler for form submit
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#ajaxform").submit(); //Submit the FORM

Write your data in cookies or in the local storage of the browser.
After that you can access it on the other page.

Are any of these solutions acceptable?
http://www.gajotres.net/passing-data-between-jquery-mobile-pages/
I would advise against the local storage since there is a known "feature" that it is not accessible in any browser private browsing mode
(html5 localStorage error with Safari: "QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.")
Also I could consider cookies, but these can be manipulated. Depending on how sensitive your data is
http://www.javascripter.net/faq/settinga.htm

Related

How to pass POST parameters via URL in browser address bar

One can figure out from a webpage the parameters used for a POST request, e.g.
How to view the address of the POST request made when an HTML button is clicked?
Is this possible for POST method to enter the url with parameters in the address bar or maybe from the debugger console?
For get request, one inserts a ? between address and parameters, e.g.
https://www.w3schools.com/action_page.php?fname=Albert&lname=Einstein.
(The analog post form calls the same script.)
Here is my javascript solution.
E.g. the form on http://vizier.u-strasbg.fr/viz-bin/VizieR
requires post.
The following command can be run in the debugger console. It manipulates one input field.
form=document.getElementsByName("form0")[0]; form.isource.value="Gaia";
form.target="_blank"; form.submit()
The url is already inherited from form.action.
Sure it is possible for POST method to pass parameters in the address.
Set up a form to POST with an action /foo?bar=bat and the server will get POST form parameters and the query string parameters.
It would be trivial to create the action dynamically so that the query string in the action contains the form parameters. For example - here the when the form is submitted the POST data is appended to the query string before the form is posted via ajax. So you get the post parameters both in the URL and in the body data.
html
<!DOCTYPE html>
<html>
<body>
<form action="/something">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
js
$("form").submit(function(e) {
e.preventDefault();
let f = $(e.currentTarget);
$.ajax({
type: "POST",
url: `${f.attr("action")}?${f.serialize()}`,
data: f.serialize(),
success: function() {
//success message maybe...
}
});
});
That said this is probably not a good idea at all.
It's not possible.
The POST params can be passed only via the request body.
You can use some kind of API client tool such as Postman, Paw or just use plain curl.

Server-side form validation AJAX by comparing two textboxes on different pages

I'm trying to create some very simple server side form validation using ajax, to check if the data a user has entered is equal to data I have on another page.
So for example, a user enters the number 10 in a textbox (#TextBox1) and then submits this; ajax should then check if this number matches the number I have in a textbox (#TextBox2) on another page and return the relevant information.
Currently my code returns false, but is this actually possible?
Here's some code I've been playing with:
<!-- Page 1 -->
<form method="post">
<input type="text" id="TextBox1" name="TextBox1" />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
$.ajax({
type: "POST",
url: "/myvalidationpage.aspx",
data: '{number: "' + $("#TextBox1").val() + '" }',
success: function (n) {
if(n === $("#TextBox2").val()){
alert("true");
}else{
alert("false");
}
}
});
</script>
<!-- Page 2 (/myvalidationpage.aspx) -->
<input type="text" value="10" id="TextBox2" name="TextBox2" />
PHP cannot check values on the page without it being sent to the server.
One possible solution would be to send the information from the first page, and save it in a session variable. Then once on the next page, trigger a function that asks the session if it is the same number or not.
Another solution would be to use cookies to store the information from page one, and check it on page 2.
If you are marketing towards newer browsers, you can use HTML5's local storage mechanism. This is very similar to storing information in cookies, but I believe it cannot be turned off.
I think there would be the three easiest solutions to implement.

Use JQuery to do server side validation then send user to another site

I want to 'postpone' (stop the default behavior of the form) sending the user to 'http://www.othersite.com' until server side validation is finished on check.php
Once complete, send the user on their way to 'http://www.othersite.com'. I can send to the validation page no problem, but I need to validate then send to another website. Say I have a form like this
$(document).ready(function(){
$('#sendbutton').click(function(){
$('#error').empty();
$('#send').ajaxForm(function (data, textStatus) {
$('#error').append(data);
});
});
});
<form id="send" name="send" method="post" action="http://www.othersite.com/index.htm">
<input type="text" id="fname" name="fname" />
<input type="text" id="lname" name="lname" />
<input type="text" id="address" name="address" />
<input type="text" id="city" name="city" />
<input type="text" id="state" name="state" />
<button id="sendbutton">Submit</button>
</form>
<div id="error"></div>
And server side validation occurs on check.php
check field inputs here on check.php
if not correct
echo error message
if successful echo "validation_ok"
If the returned data is 'validation_ok' then send the user to complete form submission on 'http://www.othersite.com'
Sounds like an excellent opportunity for AJAX (as implied by #nachito). Otherwise, you can also:
Have check.php render the form initially and do the client-side validation.
Have the form's action to check.php (effectively posting back to itself).
On successful validation, set the form's action to www.othersite.com and echo a javascript literal value (or a hidden input, if you're so inclined) flagging an "auto-submit".
You could also use jQuery to change the form's action, rather than flip it in check.php.
Once the flag is detected, submit the form on the document.ready event.
Failing that, you could also have check.php post to www.othersite.com if server-side validation has passed using cURL (and without, just google "HTTP POST from PHP, without cURL").
$(document).ready(function() {
$('#send').submit(function() {
$('#error').empty();
// Post the form to your validation page
$.post('/check.php', $(this).serialize(), function (data) {
// If validation failed, stop submission
if (data != 'validation_ok') {
$('#error').append(data);
// Prevent submission.
return false;
}
});
});
});

Using JavaScript to submit a particular form button

As a college student at QANTM I regularly use its portal system to check information that is relevant to my study. However, the site uses a specific system that makes it impossible to view on small resolutions, such as mobile browsers.
I'm developing a small personal application that should allow me to view the contents of the site in my own formatted view. However, I'm having some issues executing JavaScript to submit credentials.
<form id="userslogin" method="post" action="javascript: saePortal.users.submitLogin();" onsubmit="return false" class="x-hidden">
<input type="text" id="username" name="username" />
<input type="password" id="password" name="password" />
<button type="submit" id="submit" value="Login" class="x-hidden" /></button>
</form>
This is basically the form structure of the portal and I am successfully able to alter the username and password field with my desired contents using
document.forms[0].username.value = 'text';
However I am unable to submit the results. I have done some searching online and it's not a simple matter of submitting the form. It refreshes the page.
document.forms[0].submit();
I've also tried non-standard compliant code such as document.forms[0].submit.click(); and many variants of this, as well as using getElementById with no luck.
The site in question https://portal.qantm.com.au/. I'm unsure if this is a form of protection that's built into the site or if I'm simply using the wrong syntax.
You could use JavaScript FormData-class if your browser supports it.
var fd = new FormData();
fd.append("username", username);
fd.append("password", password);
Then you could post this using jQuery or something.
$.ajax({
url: portalurl,
type: 'POST',
data: fd,
contentType: false,
processData: false,
success: function(data){
console.log(data);
}
});
Change attribute onsubmit="return true" in form tag.

Is using a URL to call AJAX from a hidden field XSS safe?

Is it XSS safe to do something like this in jQuery?
<html>
...
<input type="text" id="message" value="" />
<input type="hidden" id="url" name="url" value="http://www.mysite.com/ajax-server-code" />
<script>
var url = $('#url');
$.ajax({
url: url,
dataType: 'json',
success: function(data) {
$('message').html(data.message);
}
});
</script>
...
</html>
Basically, what I do here is:
Use a hidden field to know which ajax URL to call
Call the Ajax to the URL
Use this data to change the DOM
Yea that's fine. I don't see any XSS problems with that.
The DOM is ediatble using the DOM Inspector in Firefox anyway, so you should never trust the browser to do or have what you think it should. Check any data you receive.

Categories