I tried the suggestion such as submit();, but it doesn't work for me... Can someone help.
<section class="section_bkg" id="login">
<form action="login.php" method="post" id="submit_login">
<ul>
<li>
<label class="block" for="email">Email</label>
<input type="email" name="email" id="email"/>
</li>
<li>
<label class="block" for="password">Password</label>
<input type="password" name="password" id="password"/>
</li>
<li>Log in</li>
</ul>
</form>
</section>
First give the form an id attribute so you can reference it:
<form action="login.php" method="post" id="myform">
Now you can do a Javascript-submit, using the onclick event:
Click to submit the form
Building on #dbaseman's answer. If you are using jQuery to submit the form this should help.
Html
Click to save
jQuery
// submit
$('#MySubmitButton').click(function () {
$('form').submit();
return false;
});
// OR - bypassing any unbotrusive validation
$('#MySubmitButton').click(function () {
$('form')[0].submit();
return false;
});
// using the enter key to submit the form
$('#password, #email').keypress(function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == 13) {
$('form').submit();
event.stopPropagation();
}
});
JavaScript provides the form object that contains the submit() method. Use the ‘id’ of the form to get the form object. For example, if the name of your form is ‘myform’, the JavaScript code for the submit call is:
document.forms["myform"].submit();
But, how to identify a form? Give an id attribute in the form tag
<form id='myform' action='handle-data.php'>
Here is the code to submit a form when a hyperlink is clicked:
<form name="myform" method="post" action="handle-data.php">
Search: <input type='text' name='query' />
Search
</form>
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
Here Answer
<form action="login.php" method="post" id="myform" name="myform">
</form>
Click to submit the form
<a href="#" onclick=
"document.getElementById('submit_login').submit(); return false">Log in</a>
But it’s really more useable and more accessible to use a submit button, so it is better to fix whatever issues you have with styling, rather than implement basic functionality this way.
Related
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>
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
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 created a basic HTML contact form using cgimail and everything works, but I can't get it to keep from redirecting somewhere after the form is submitted. I'm trying to instead use a bootstrap alert at the top of the page.
How do I get the form to submit, then keep it from redirecting?
here's the code:
<form method="post" action="/cgi-bin/cgiemail/forms/email.txt">
<fieldset>
<h2 id="contact-header">Contact</h2>
<label>Name:</label>
<input type="text" name="yourname" placeholder="" autofocus>
<label>Email Address:</label>
<input type="email" name="email" value="" placeholder="">
<label>Phone:</label>
<input type="tel" name="phone" value="" placeholder="">
<label>Message:</label>
<textarea name="message" rows="2"></textarea>
<br>
<button type="submit" id="formSubmit" class="btn">Send</button>
<input type="hidden" name="success" value="">
</fieldset>
</form>
Thanks,
Ryan
The "action" attribute in your form is telling it to send the browser over to that email.txt, which would then have control over whether or not to redirect you to another page. By default it would at least redirect you to the email.txt page for the post, but odds are cgi is doing extra stuff when posting to that page.
Using jQuery AJAX, you can do the following (this code skips error checking):
$('form').submit(function() {
var data = { };
data.yourname = $(this).find('input[name="yourname"]').val();
data.message = $(this).find('textarea[name="message"]').val();
// do the same as above for each form field.
$.post("/cgi-bin/cgiemail/forms/email.txt", data, function() {
//add the alert to the form.
$('body').prepend('div class="alert">Success!</div>');
});
return false;
});
You have two straight-forward choices. You can use jQuery and its forms plugin to turn this into an ajax operation or you can roll your own equivalent. It would look something like this (using jQuery):
$('form').submit(function() {
... get all values.
... ajax post the values to the server.
return false;
});
If you're using jQuery, then you could try cancelling the submit event. First give your form an id
HTML:
<form id="myform" ...
JavaScript:
$('#myform').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: '/cgi-bin/cgiemail/forms/email.txt',
type: 'post',
data: $(this).serialize()
});
return false;
});
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>