Develop Reference

Redirect after form submission with pure javascript

In my form, I have a user enter in a link, and my goal is to redirect to that link. However, my problem is that whenever I try and get the user to redirect, the form wont redirect to the page. Several people have recommended this:
<form>
<input type="text" name="blah blah blah" id="url">
<input type="submit" onclick="return submit_form()">
</form>
function submit_form(){
window.location.href="a url";
return false;
}
However, when I do this, my server does not receive the input by the user. How can I fix this?
Edit:
I have also tried this:
function submit(){
url = getElementById("url").value;
window.location.href = "url";
}

When you use browser javascript to set window.location.href to a URL, your browser immediately navigates to that URL without intervention from your server. It's similar to typing a URL into the browser's location bar.
If you want your server to do the navigation you need a more complex setup. On your browser, something like this.
<form action="/your/server/route">
<input type=hidden" name="redirect" value="https://example.com/where/to/redirect">
<input type="text" name="blah blah blah">
<input type="submit" >
</form>
Then in your node code handling /your/server/route ...
if (req.body.redirect) res.redirect(req.body.redirect)
That way your server tells the browser to redirect as part of handling the post of your form.
Security tip cybercreeps can misuse the situation where you pass a redirect URL from a browser to your server. Always validate req.body.redirect to make sure it matches what you expect before you use it to actually redirect.

Pushing a button programmatically to submit a form on another page in Javascript

Please forgive the basic question, I'm very new to Javascript and web development in general. I want to use a script on one page of my site to programmaticaly press a button to submit a form on another part of the site, making a POST request. The html I have to access is the following:
html
<form action="thing.jsp" method="post"> // Beginning of form
...
<input type="submit" id="submit" value="Do something"> // Button code
...
</form>
And I think the Javascript should look something like this:
JS
<script>
var xhr = new XMLHttpRequest();
xhr.open('POST', "/stuff.jsp", true);
var params = "???????"; // What do I need to put here?
xhr.send(params);
</script>
From reading around online, my suspicion is that I may just need to get the right value for params? Though if there's another way of achieving the same result (e.g. by just sending a POST request without doing anything to the button), I'd be perfectly happy to go with that.
Thanks in advance for your time and wisdom.

You don't need to use ajax, just use this:
<input type="button" value="GO" id="buttonId" />
<script>
function go() {
document.location.href = 'http://google.com';
}
document.getElementById('buttonId').onclick = go;
</script>
please notice the button type should be 'button', not 'submit'

Using jQuery - a JS library - you can simply send a HTTP GET Request. This can then be picked up in PHP using $_GET['key'] which will hold the value.
$(function() {
$('#unique-id-btn').click(function() {
$.get('file.php', { key: $('unique-id-input').val() }).done(function(response) {
alert(response);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="unique-id-input" placeholder="enter something...">
<button type="button" id="unique-id-btn">Click me</button>
Note, you will need to create the file.php. Inside, it will control what happens with that data being sent across, ie:
$data = $_GET['key'];
echo $data == "foo" ? "bar" : "tell me foo!";
Also note you can only run PHP in a .php file extension, not JSP.

Log in from another php file with jquery load function

I would like to do a web site using Aptana IDE and xampp, and it has a few pages. Index page is where all users which does not log in the system and home is where all users which does log in the system must visit. I am very new to develop web site. Because of that I am changing a lot of and vital things during the development. An here my problem is began.
I have created log and sign pages separately using HTML5, CSS, Javascript, JQuery and Php. To achieve more quality service, decided to use also Ajax. These pages works correctly, log page can control validation with jquery
$('#login-form').validate({
//validation rules, messages and submitHandler(ajax code) goes here});
and with using ajax, it can communicate with php file and mysql database so can check whether the user is exist or not.
$.ajax({
type: 'POST',
url: 'log.php',
data: strAjax, //username and password
success: function(data) { //data is echoing from php file either as true or false
if(data) {
window.location.href = "home.php";
}
else {
//some error messages
}
}
});
Sign systems works like it and correctly. But I do not like the design of these pages because of emptiness. So in index file when user click log in button, the log file is showing inside a div with jquery load function.
$(".jumbotron").load("login.html").hide().fadeIn(1500).delay(5000);
Same thing for sign system as well. For good looking, I am satisfied but...
The whole system messed up. (I want to cry) I have to think before start to coding web site, very bad I know but this is my first complete web site. How can achieve a system working properly in this way? I have searched some pages on the internet and they said that the ajax can not work across the pages or something like that. I am also new to stack overflow too, so some important thing will be forgotten. I can edit if you want more information.
Thank You and Regards...
EDIT 1:
<div class="jumbotron">
<div class="container">
<h1>//sometext</h1>
<p>//some text</p>
</div>
</div>
Firstly this is showing on the screen. And when the user press login button, jquery load function running which is above. And loads login.html which works properly by itself.
<form id="login-form" class="text-left">
<div class="form-group">
<label for="lg_username" class="sr-only">Username</label>
<input type="text" class="form-control" id="lg_username" name="username" placeholder="username"
data-container="body" data-toggle="popover" data-placement="left" data-content=""
value="">
</div>
<div class="form-group">
<label for="lg_password" class="sr-only">Password</label>
<input type="password" class="form-control" id="lg_password" name="password" placeholder="password"
data-container="body" data-toggle="popover" data-placement="left" data-content="">
</div>
<div class="form-group login-group-checkbox">
<input type="checkbox" id="lg_remember" name="lg_remember">
<label for="lg_remember">remember</label>
</div>
<button type="submit" class="login-button">Submit</button>
</form>
The jquery validation works right. My rules are valid. If the inputs are ok upon my rules, it send me to home.php. I think ajax code can not work.
submitHandler: function() {
var username = $('#lg_username').val();
var password = $('#lg_password').val();
var checkbox = $('#lg_remember').is(":checked");
var strAjax = "username=" + username + "&password=" + password + "&checkbox=" + checkbox;
$.ajax({
type: 'POST',
url: 'logDeneme.php',
data: strAjax,
cache: false,
success: function(data) {
if(data) {
window.location.href = "home.php";
}
else {
//error message. but when this code run, always send to home page.
}
}
});
return false;
}
This parts all works. It does not works inside index.php. My question is why and how to handle this!

Problem 1
Your form is submitting via a GET request because the JS is not getting called (see #2 below) and the HTML is likely declared like this:
<form action='log.php'>
[...]
</form>
You must specify method='post' to submit POST data.
Problem 2
Unless you're using a jQuery plugin there is no .validate event for forms. You want to use .submit.
Finally, make sure all your javascript is in $(document).ready(function() { ... }); or it won't execute at the right time. Look in the Firefox/Chrome developer console, it's a lifesaver for debugging.

ReCaptcha: How to autosubmit the form when the captcha was send

I want to use ReCaptcha to load some extra data on the page. I want the form to be auto submitted when the ReCaptcha was entered. So that I don't need the extra submit button. The problem is that recaptcha loads its content inside an iframe, so its a bit difficult.
At the moment I have this form:
<form action="javascript:getInfo(grecaptcha.getResponse(widget1));" >
<div id="captcha"></div>
<br>
<input type="submit" value="Submit">
</form>
How do I get something like an Event-Listener on the recaptcha submit which submits the outer form?

That's sounds like an interesting technique. It would cut down on the clicking and key strokes for the user. Here is how you could do that, by listening for the successful captcha response you would be able to follow up with the desired action. Here is an example and some documentation. https://developers.google.com/recaptcha/docs/display#example
var RC2KEY = 'sitekey';
function reCaptchaVerify(response) {
if (response === document.querySelector('.g-recaptcha-response').value) {
document.forms['form-name'].submit();
}
}
function reCaptchaExpired() {
/* do something when it expires */
}
function reCaptchaCallback() {
grecaptcha.render('id', {
'sitekey': RC2KEY,
'callback': reCaptchaVerify,
'expired-callback': reCaptchaExpired
});
}
<script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'></script>

Use # instead of ?
? is used to begin query strings and will mess with method=GET type responses. # is the anchor symbol and will work.

html post form different destinations

I am developing a django web app in which I would like to have a registration process. In this registration process I have of course a form asking for name, email and password. What I would like to do is, send the form via post to 2 different places. One of which is of course the registration database which saves the password and the like, and the other being the Emencia newsletter app. In the case it helps, Emencia only needs email and a name (optional).
So how can I do this with only one form, 2 places to send it to and, taking just some of the data of the form and not all?
Thank you!

While I agree that the better approach is to handle this on the server side, let me correct that it is very possible to submit the same form to different server side scripts.
See the page below for the script and some demos:
How to create a multi-submit form
It works in IE, Firefox and Chrome.

You can't. There is no way to send a form to two ressources.
What you CAN do is send a HTTP request in your register script to the newsletter script, e.g. using urllib2.

To do this you would have to use Javascript & AJAX
http://www.tizag.com/ajaxTutorial/

This kind of trickery used to work in most browsers but...it seems that it only works in Firefox now. Adding a delay between the two submits makes it work in IE but not Chrome. I'm actually amazed it still works in firefox :)
<html>
<body>
<form method='post' action='place1.php' onsubmit='this.action="place1.php";this.submit();this.action="place2.php";this.submit();return false;'>
<input type='text' name='thing' value='something' />
<input type='submit' value='send' />
</form>
</body>
</html>

Here is a solution with jQuery...
$("input:submit").click(function(e) {
e.preventDefault();
// javascript validation
// run this if validation succeeds
$.ajax({
url: "url to emencia newsletter",
type: 'post',
data: "Email=" + $("#emailField").val() + "&Name=" + $("#nameField").val(),
success: function(result) {
// do stuff
$('form').submit();
}
});
// could also go here if you don't want the success callback -- $('form').submit();
});
So what happens is you click your submit button. The e.preventDefault tells the browser to stop the form from submitting. You then run an ajax request to submit to emencia. On success it submits the original form. I am not sure if you need to put the form submit in the success or simply place it after the ajax request. I don't think it really matters.