We Keep Coding

How to redirect to another page after form action?

I am using Simple Form (getsimpleform.com) to email the HTML form contents to my email. The problem I am facing is that the HTML Form action is handled by getsimpleform so when the user clicks on submit button of the form, they are redirected to https://getsimpleform.com/ but I want them to stay be redirected to another page (i.e. contact.html).
So I want the form action to be performed but at the same time, I want the user to be redirected to another web page.
Thanks.

Just fill up your action attribute
<form action="next-page-please-url">
<button>butt</button>
</form>

You can add an action calback on your button, for example :
in yout HTML
<form>
...
<input type="submit" onclick="redirect()">
</form>
and in your javascript :
var redirect = function(){
document.location.href="contact.html"
}

First of all you need to change the action url of the form to your domain name
From
action="https://getsimpleform.com/"
To
action="https://YourDomain.com/"
and then on your php or whatever server side language you are using you can redirect e.g. I will use php example.
header('Location: http://www.YourDomain.com/OtherPage');

Based on their official page recommendation on redirect
<input type='hidden' name='redirect_to' value='https://yourdomain.com/contact.html' />
Try to insert it into the form and see whether it solves your problem.
P.S. don't forget to change [yourdomain] to your actual domain.

Form submitting when clicked

I am having an issue with this login system, when ever I click the log in button, or the sign up button it re-directs me to a white page with writing on it, That being said it is interfering with my log in action.
Here is the code that I think is causing the issue,
<form method="POST" action="" accept-charset="UTF-8">
on line 16 of the HTML code, I tried to take that code out and it stopped the re-directing but the text boxes went out of place, and the white background/background-box was not there either,
Link, HERE

You want to use preventDefault() if this is a purely Javascript: you should be able to pass the button press event into the listener when you create it:
$('.login').on('click', function(e) {
e.preventDefault();
// Will be executed on press
}
<form method="POST" class="login" accept-charset="UTF-8">
If there's no JS involved in this scenario, then you want to get rid of the action parameter entirely – leaving it as the empty string will still cause it to redirect in some cases.

As Jonathan Lonowski explained above, when the log in / sign up button is clicked, the form will post the data to the page mentioned in the action= attribute. Since this attribute is empty in your form tags, it will re-load the same page, posting the data to itself.
The data will arrive in key=value variable pairs. The variable value will be the contents of the field, the variable name will be the value of the name="" attribute on the element.
For e.g., for this field:
<input id="fname" name="first" value="Bobby" />
The data will be received like this:
$fn = $_POST['first']; //value is Bobby, or whatever user enters
On your page containing the form, add a section at the top like this:
<?php
if (isset($_POST['fname']) == true){
$fn = $_POST['fname'];
echo "Received First Name: " . $fn;
die();
}else{
?>
//Your current page, in its entirety, goes here
<?php
} //close the PHP if statement
?>
That is how you deal with a normal HTML <form> construct.
However, if you wish to use AJAX to communicate with a PHP file without changing the page, then:
(1) There is no need to use a <form> construct, just use a DIV with an input button: <input type="button" id="sub_btn" value="Submit" />
(2) Trap the button press using standard js/jQuery:
$('sub_btn').click(function(){
var fn = $('#first').val();
//etc.
$.ajax(function(){
type: 'post',
url: 'my_php_processing_file.php',
data: 'fname=' +fn+ '&lname=' etc
});
});
In your PHP processor file, the data will be received thus:
<?php
$fn = $_POST['fname'];
$ln = $_POST['lname'];
//Do your MySQL lookup here...
echo 'Received ' .$fn. ' ' .$ln;
(3) IF you do use the form construct, you can still do everything as above, but you will need to suppress the default form action of navigating to the page specified in the action= attribute (an attribute setting of action="" will post data to and reload the same page you are on).
To suppress navigating to the page specified in action= (involves page refresh, even if just action=""), use event.preventDefault(), as follows:
$('#buttonID').click(function(event){
event.preventDefault();
//remainder of button click code goes here
});

onsubmit property fails to open new window

A quick question here regarding forms. I've searched the web and can't seem to figure out why what I've implemented isn't working.
The idea is simple. I have a form inside a JSP page. The form has an 'onsubmit' property defined to open a different jsp with some parameters. Inside the form I have a few buttons, one of which calls a JavaScript function, which in turn submits the form (under some conditions).
Here's the code:
JSP:
...
<form id='testForm' onsubmit="window.open('another.jsp')">
<input type="button" onclick="callJsFunction()" />
..
</form>
JavaScript:
function callJsFunction() {
if (launchNow == 1) {
var form = document.getElementById("testForm");
form.submit();
}
}
If I add target="_blank" to the form definition, a new window does open, but NOT the jsp I want to open. Ultimately, I want the form to perform a servlet action (using the action attribute) and then open the new jsp. Any ideas???
Thanks!

The solution to what I was looking for is found here: Javascript Post on Form Submit open a new window
Rather than setting target="_blank", I can set the target to the window I define and open. In my servlet, I redirect to the desired jsp, and it appears in the new pop-up window.

<form id='testForm' action='another.jsp' target='_blank'>

I might be wrong but is this what you are looking for?
Please see the working demo at this link: http://fiddle.jshell.net/vf6AC/show/light/ (don't work in the jsfiddle)
<form action="http://google.com" id="testForm">
<input type="submit" />
</form>​
<script type="text/javascript">
var testForm = document.getElementById("testForm");
testForm.onsubmit = function(e){
window.open("http://stackoverflow.com");
return true;
};​
</script>
See the jsfiddle here: http://jsfiddle.net/vf6AC/

jquery accessing form element after ajax reply

I'm sending form to server and when I receive it back I need to access its elements
Here goes code.
some html
<here is the form>
<div style='border-style:solid' id='user_pic_n_1'></div>
and javascript
pic_type=($(this).attr('pic_type'));
pic_number=($(this).attr('pic_number'));
explanation : pic_type gets > user_pic and pic_number gets > 1
so the form is user_pic_form_n_1
$('#'+pic_type+'_form_n_'+pic_number).ajaxSubmit({
success: function(responseimage)
{
$('#'+pic_type+'_n_'+pic_number).html(responseimage);
now when the form gets into div, I need to get it's inputs values.
please write code sample of how can I Access it
In my example i'm trying to get values by alert like this but probably I write with mistakes
alert($(\"#'+pic_type+'_form_n_'+pic_number+' input[name=error]\").val());
elements name is 'error' so I'm trying to get it from the form.
UPDATE
Here is HTML form which I get from AJAX
<form id='user_pic_form_n_1' name='user_pic_form_n_1' action='/serv/pic_processor.php' method='POST'>
<input type='hidden' name='error' value='456'/>
</form>
So when it gets from server into responseimage variable, I put that into Div and then I want to access this form and alert value of tag named 'error'

You can pass the element contain the response html as a context along with selector.
selectorElem = '#'+pic_type+'_n_'+pic_number;
$(selectorElem).html(responseimage);
$('form[name=A] #B', $(selectorElem))
Edit, based on comments
Live demo
Html
<form id='user_pic_form_n_1' name='user_pic_form_n_1' action='/serv/pic_processor.php' method='POST'>
<input type='hidden' name='error' value='456'/>
</form>​
Javascript
pic_type = 'user_pic';
pic_number= '1';
selectorElem = pic_type+'_form_n_'+pic_number;
selectorElem = 'form[name='+selectorElem +'] :hidden[name=error]';
alert($(selectorElem).val());

After you have done this:
$('#'+pic_type+'_n_'+pic_number).html(responseimage);
and you are looking for val of #b inside form with class a, it would be as:
$('#'+pic_type+'_n_'+pic_number+ ' form.a #b').val()

Bug in IE when using Javascript to change a form action, when method=get and URL contains a hash

I'm using Javascript to change a form's URL when you submit the form. If that URL contains a hash string (#), then Internet Explorer ignores it and just submits to the part of the html before that. Firefox and Chrome are fine.
Demonstration:
<script type="text/javascript">
function changeURL() {
var myform = document.getElementById('myform');
myform.setAttribute("action", "page2.html#hello");
return false;
}
</script>
<form id="myform" action="page1.html" method="get" onsubmit="changeURL()">
<input type="submit">
</form>
If I change the method to a "post" then it's fine. If I use a "get", IE lands on page2.html but without the #hello in the URL.
This happens regardless of if I use jquery or only javascript, tried each of the following:
myform.action = "page2.html#hello";
myform.attr("action", "page2.html#hello");
myform.get(0).setAttribute("action", "page2.html#hello");
Any suggestions (assume that I have to keep the method as a 'get', and that I must use a hash in the URL, and that I must use Javascript to change this action dynamically)?

Testing on my own in IE8 reveals that it does insist that the hash (#hello) come after the query string (?foo=bar) in a URL. Sadly, your form doesn't do this for you and there's no way to force it to do so when submitting the form.
Try encoding the hash in the form instead:
<script type="text/javascript">
function changeURL() {
var hidden = document.createElement('input');
hidden.setAttribute("type", "hidden");
hidden.setAttribute("name", "hash");
hidden.setAttribute("value", "hello");
var myform = document.getElementById('myform');
myform.setAttribute("action", "page2.html");
myform.appendChild(hidden);
// return false;
}
</script>
<form id="myform" action="page1.html" method="get" onsubmit="changeURL()">
<input type="submit">
</form>
And at the top of page2.html, extract it back out:
<script type="text/javascript">
var qs = window.location.search.substring(1);
var qsarr = qs.split("&");
for (var i=0; i<qsarr.length; i++) {
var tarr = qsarr[i].split("=");
if (tarr[0]==="hash") {
window.location.hash = tarr[1];
}
}
</script>

I believe that IE just behaves differently with the hash and I don't think it is is meant to be used in this manor.
No javascript in the following will produce the same results...displays in FF and not in IE
<form action="#test" method="get">
<input type="text" value="test" />
<input type="submit" />
</form>
At least you know it's not a javascript problem. I lied about the question mark lol oops.

In the end we decided we could just update window.location.href to go to the new location rather than submit the form. This might seem like an odd answer, but actually the way we were handling our form meant this wasn't a problem to do. i.e. we were disabling all our form fields (hence no querystring being appended to the URL normally), then generating one of several different SEO-friendly style URLs based on what the form fields contained, then updating the form action and submitting the form. So now we do all that but don't bother submitting the form, just change the page location.