I have form like this
<form name="test_form" action="" method="post">
<input type="text" value="demo">
Link
</form>
I want to submit that form by clicking the link and as well as go to that link(google.com) too .
How can I do this ?
I can submit the form by clicking the link but can't do it together .
You need to redirect on the server
for example in PHP:
<?PHP
$url = $_POST["url"]; // you need to clean this
// save whatever here
header("Location: ".$url);
?>
<script>
window.onload=function() {
document.getElementById("submitLink").onclick=function() {
var form = document.getElementById("myForm");
document.getElementById("url").value=this.href;
form.submit();
return false; // cancel link
}
}
</script>
<form id="myForm" action="saveandredirect.php" method="post">
<input type="text" name="somefieldname" value="demo">
<input type="hidden" id="url" name="url" value="">
</form>
Link
Related
I want to make a survey based on forms, in which I try to get the new (next) form after a submit on the first form like below.
<form id="pass" action="form.html" method="get">
---some code for users to select answers--
<button type="submit" form="nextpass" value="next">
</form>
<form id="nextpass" action="form.html" method="get">
Both forms are displayed on the same page, but when I press the next button, I get the error "cannot get /".
Simplest way is to give each submit button a unique name. Then check if it was submitted, and process accordingly.
<form id="form_1" action="" method="post">
<input type="submit" name="submit_1" value="Submit" />
</form>
<form id="form_2" action="" method="post">
<input type="submit" name="submit_2" value="Submit" />
</form>
<?php
if( $_POST['submit_1'] ) {
// Do stuff
//hide form 1
echo "<style>#form_1{display:none}</style>";
}
else if( $_POST['submit_2'] ) {
// Do stuff
}
?>
I've some form like this:
<form action="#" method="post">
<input type="text" name="website" />
</form>
How I can find if user enter website with http:// or without? I want to show it in:
<a href="value from input">
Any suggestions how to validate this form and send it to database as right link like: http://website...?
You may use javascript to validate input.
function validate()
{
var input = document.getElementsByName("website")[0].value;
if(input.startsWith("http://")) {
alert("valid input");
return true;
}
alert("invalid input");
return false;
}
<form action="#" method="post" onsubmit="return validate()">
<input type="text" name="website" />
<input type="submit" />
</form>
I want to use a text input as a link when user hits enter.
for instance user types "stacks" to the input area and when user hits enter, it directs user to "lookup/stacks".
How can I do this?
Thanks.
I have this code but it does not work.
<form class="ui icon input" role="form" action="/lookup/">
<input type="text" placeholder="Ara...">
<i class="search link icon"></i>
</form>
Here's a quick idea to update the form's URL whenever the input changes, although I haven't tested it. The hidden submit button means the enter key works as you intend. I think you should also follow Alex's idea for a server-side backup just in case a visitor has javascript disabled.
<form class="ui icon input" role="form" action="/lookup/">
<input type="text" placeholder="Ara..." id="input_lookup">
<i class="search link icon"></i>
<input type="submit" style="position: absolute; left: -9999px"/>
</form>
<script type="text/javascript">
// if "change" doesn't work then maybe "keyup"?
document.getElementById("input_lookup").addEventListener("change", function(){
this.form.setAttribute("action", "/lookup/" + this.value);
});
</script>
You can do it with jQuery .submit().
Here's the example given on jQuery's page:
<form id="target" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
</form>
<div id="other">
Trigger the handler
</div>
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
You could use PHP to do this..
Here is a basic example, you could expand on this later if needed.
1st page..
HTML:
<form action="url.php" method="post">
<input name="url" id="url" type="text">
<input type="submit" name = "submit" value="submit">
</form>
2nd page - url.php (must be called depending on form action url)
<?php
$url = $_POST['url'];
header('Location: ' . $url);
?>
I have the next HTML code:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
</body></html>
Which create a file input and submit button, which sends a POST method (/upload).
I want to create a new button (submitBig), which would send another POST method (/uploadBig).
How can I do it?
A simple workaround, Create 2 Forms:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
<form method='post' action='/uploadBig' enctype='multipart/form-data'>
<input type='file' name='uploadFileBig'/>
<input type='submit' /></form>
</body></html>
Else you should indeed refer to Javascript.
Use JavaScript to run a different function for each button. Set the .action and do the .submit from there.
You will need to use Javascript. Essentially this will edit the Action of the form and post it on click:
$('#big-submit').click(function(e) {
e.preventDefault();
$(this).closest('form').attr('action', '/uploadBig').submit();
});
An even better solution would be to just have the one button, and then get the file size on click and post to the relevant action.
You can use jQuery or simple Javascript:
<!DOCTYPE>
<html>
<body>
<form method="post" id="theForm" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile" />
<input type="submit" value="normal Submit (/upload)" />
<input type="button" id="bigButton" value="big Submit (/uploadBig)" />
</form>
<script type="text/javascript">
var theForm = document.getElementById('theForm');
/* When the button is clicked */
document.getElementById('bigButton').onclick = function() {
/* Change the location */
theForm.action = '/uploadBig';
/* Submit the form */
theForm.submit();
};
</script>
</body>
</html>
You can use the HTML5 formaction attribute to do that (but you have to check it's compatibility with your requirements to use it : it only works on recent browsers).
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile"/>
<input type="submit" value="Submit" />
<input type="submit" value="Submit big" formaction="/uploadBig" />
</form>
</body>
</html>
Here One way to get around this is to handle each button's OnClick event and set the "action" for the form dynamically:
<!-- create the form -->
<form name="Form1" method="post">
<!-- Add the data entry bits -->
Your Name <input type="text" name="text1" size="10" /><br />
<!-- Add some buttons -->
<INPUT type="button" value="Button1" name=button1 onclick="return OnButton1();">
<INPUT type="button" value="Button2" name=button2 onclick="return OnButton2();">
<!-- close the form -->
</form>
Our button click handlers for Button1 and Button2 would look like the following:
<script language="Javascript">
<!--
function OnButton1()
{
document.Form1.action = "Page1.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.Form1.action = "Page2.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
-->
</script>
<noscript>You need Javascript enabled for this to work</noscript>
Where Page1.aspx should be called when Button1 is pressed, and Page2.aspx called when Button2 is pressed.
This is my form code:
<form enctype="multipart/form-data" name="upload-file" method="post" action="http://example.com/upload">
<div class="formi">
<input id="text-link-input" type="text" name="url" class="link_form" value="your link" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" />
<input type="submit" value="OK" class="link_but" />
</div>
<div class="upl" title="Upload"><img src="http://example.com/example.png" alt="" style="vertical-align:middle;"/>Upload
<input type="file" name="file" size="1" class="up" onchange = "document.getElementById('text-link-input').value = String(this.value).replace('C:\\fakepath\\','')"/>
</div>
</form>
Now, I want to redirect the submitter to any page of my choice after the form data has been submitted, but the action resides on another website where I cannot edit. Is it possible to redirect the user to any page after he has submitted the data to that site?
From some Googling, this is what I have found. Adding this to form code:
onSubmit=window.location='http://google.com'
This didnt work. Maybe I didnt implement it correctly? This is what I did:
<form enctype="multipart/form-data" name="upload-file" method="post" onSubmit=window.location='http://google.com' action="http://example.com/upload">
Another person says adding a hidden field should work:
<input type="hidden" name="redirect" value="http://your.host/to/file.html">
How should I implement this is my code?
Suggestions and help awaited...
Try this Javascript (jquery) code. Its an ajax request to an external URL. Use the callback function to fire any code:
<script type="text/javascript">
$(function() {
$('form').submit(function(){
$.post('http://example.com/upload', function() {
window.location = 'http://google.com';
});
return false;
});
});
</script>