Solved

Javascript Submit

Posted on 2014-04-05
5
511 Views
Last Modified: 2014-04-06
Hello,

Trying to submit from an hyperlink but its not working or redirecting to the action page.


<!--html code-->
<input hidden variables...>
<a href="javascript:doPost();" onClick="javascript:recordClickEvent();" target="_blank">New Page</a>
...


<script language="javascript">
function doPost() {
    document.forms[0].action = "http://site_that_accepts_post.com/redirectpage";
    document.forms[0].method = "post";
    document.forms[0].submit;
}
</script>

</html>


The above doPost method is being called from the hyperlink but the post redirect page is not opening the new widow.

Tried it in on click also but that opens a new tab with the address bar URL as "javascript:doPost()"

Is it possible to post form javascript and open the action page in a new tab/window?

Not sure if it matters but this is a sharepoint wsp solution page.
0
Comment
Question by:sansoftura
  • 3
  • 2
5 Comments
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 39980358
<a href="javascript:doPost();"

This simply does nothing at all. You have to put the javascript code to post the form in the recordClickEvent();

And I would suggest to consider to use jQuery: it makes using javascript easier...
0
 
LVL 6

Author Comment

by:sansoftura
ID: 39980581
Tried the code below:

<a href="#" onClick="javascript:doPost();" target="_blank">New Page</a>

function doPost() {
    $("#my_form").attr("action","http://site_that_accepts_post.com/redirectpage");
    $("#my_form").attr("method", "post");
    $("#my_form").attr("target", "_blank");
    $("#my_form").submit();
}

This doesn't work either. It opens new window but the new window has the same url as the current one. Not the url in action;
0
 
LVL 30

Accepted Solution

by:
Marco Gasi earned 300 total points
ID: 39980900
Okay, I've rewritten the code. Here you can see it in action. Obviously, my form leads to another page in my srver, but this should make you look at the right direction: eetest.delphicoding.com/sansoftura/form.html

Here the html page:

form.html
<!DOCTYPE html>
<html>
	<head>
		<title>sansoftura test</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="../js/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$('#submit').on('click', function(e){
					e.preventDefault();
					alert('submit');
					$("#my_form").attr("action","target.php");
					$("#my_form").attr("method", "post");
					$("#my_form").attr("target", "_blank");
					$("#my_form").submit();					
				});
			});//end jquery
		</script>
	</head>
	<body>
		<form id="my_form">
			<input type="text" name="text_field" value="" />
		</form>
		<a id="submit" href="#">Submit</a>
	</body>
</html>

Open in new window


And here the target page target.php:
<?php

error_reporting( E_ALL );
ini_set( 'display_errors', 'On' );
$txt = filter_input(INPUT_POST, 'text_field');
if ($txt)
{
	echo "That's $txt!";
}

Open in new window


Hope this makes sense for you.
Cheers
0
 
LVL 6

Author Closing Comment

by:sansoftura
ID: 39981331
Thanks for the effort!
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 39981371
Glad to help you!
Cheers
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now