Submit a form using href - javascript

I have a form
<form method="post" id="ff">
<input type="name" id="aa" />
<input type="name" id="bb" />
Submit
</form>
Is it possible to post using the href ? I need to post the datas to href url.Is it possible?
Can someone help?
I dont want to use the normal action=

You can try this
<form method="post" action="http://www.example.php" id="ff">
<input type="name" id="aa" />
<input type="name" id="bb" />
Submit
</form>
<script>
function submitForm(){
$('#ff').submit();
}
</script>

Why don't you use
<form method="post" id="ff" action="http://www.example.php">
...
</form>

Yes, you can do this, but it will require JavaScript:
Submit
You could also write more complex JavaScript functions and call that.

Specify the target URL as the action attribute of the form:
<form method="post" action="http://www.example.php">
Strictly speaking, what you ask is possible but not pretty:
<a href="http://www.example.php"
onclick="var e=document.getElementById('ff').action=this.href;e.submit();return false">Submit</a>
I'd go for the action instead...

relace:
Submit
with:
Submit
<script type="text/javascript">
function frmsubmit(obj){
var url = obj.href;
document.getElementById('ff').action = url;
document.getElementById('ff').submit();
}
</script>
if you have more than one tag than use id and find it rather than by tag name

Related

Auto-fill specific login forms of a external webpage

I'm trying to pass credentials to fill automatically the inputs login of this website: https://www.pinterest.pt/login/ .
I don't know what are the variables. So I used the inspect of the browser to know what is the id of each input.
I'm using this code but it is not working:
function Test() {
var name = document.getElementById("id").value;
var password= document.getElementById("password").value;
document.forms["registerForm"].submit(); //form submission
}
<!DOCTYPE html>
<html>
<body>
<form id="registerForm" name="registerForm" method="post" target="_top" action="https://www.pinterest.pt/login/">
<input id="email" name="id" type="email" value="examplelogin" />
<input id="password" name="password" type="password" value="examplepassword" />
<input type="button" name="submit" id="btn" value="Submit" onclick="Test()" />
</form>
</body>
</html>
Do you know what I'm doing wrong?
Thank you for your help.
Not so much an answer to your question, but more of a future reference, you don't need to get all elements within a form via a selector. You can simply use the following technique:
function Test() {
let form = document.getElementById('registerForm');
var password = form.elements.password.value;
var email = form.elements.email.value;
form.submit();
}
Notice how accessing form.elements grants direct access to the element you're trying to read out.
I may just be nit-picking, but since this is a form submit, you probably need to use onsubmit and not just have the button click do something. Try this maybe?
<!DOCTYPE html>
<html>
<body>
<form id="formulario" name="formulario" method="post" target="_top" action="https://www.allianz.pt/area-privada" onsubmit="submitFunction()">
<input id="usuario" name="_58_login" type="text" value="examplelogin" />
<input id="password" name="_58_password" type="password" value="examplepassword" />
<button type="submit">Submit</button>
</form>
<script>
function Test() {
// your submit code
}
</script>
</body>
</html>
Forms can be very picky sometimes. Always best to use a working example for exactly what you're doing as a reference.

POST form to new window

I'm going to try my hardest to try and explain what I'm trying to achieve essentially what I'm after is for the form to POST to the post_form_here.html and then to redirect the main page to redirect_main_page.html I need the form to post the values to the popout window and then to redirect the main page to the redirect page.
<form method="POST" onclick="window.open('POST_FORM_HERE.HTML', 'newwindow',
'width=500,height=500'); return true;" action="REDIRECT_MAIN_PAGE.HTML">
This is what I have so far however this posts the form to the redirect_main_page.html and not the post_form_here.html. Thank-you for any help and I hope I've explained what I'm trying to achieve well enough.
use target="_blank" in form
<form action="demo_form.asp" method="get" target="_blank">
</form>
If you want new window use like this
<form method="post"
target="new_popup"
action="https://www.google.co.in/"
onsubmit="window.open('about:blank','new_popup','width=500,height=300');">
<input type="text" />
<input type="submit" />
</form>
Try this
HTML
<form id="form">
<input type="text" name="name" >
<input type="text" name="age" >
<input type="submit">
</form>
JS
var form = $("#form");
form.on("submit",function(){
window.open("POST_FORM_HERE.html?" + form.serialize(), "newwindow", 'width=500,height=500');
window.location.href = "/REDIRECT_MAIN_PAGE.html";
return false;
})

use js functions return value for html form action attribute

I want to use the return value of a JS function as the URL for a form get action. Is it possible or do I need to set the form attributes with a function call in the onSubmit attribute?
edit: this is basically what i want to do
<div class="search">
<form method="get" action="https://duckduckgo.com/" id="search-form">
<input id="searchbar" type="text" name="q" size="31" maxlength="255" value="" autofocus="autofocus"/>
</form>
<script type="text/javascript">
document.getElementById("search-form").action = "bang()";
</script>
</div>
the bang function is an implementation of the bang system from DDG in JS, so i can easily add bangs to a searchbox in my webpage.
You can use the onsubmit event for the form to set the action before the actual submit happens.
<form id="testForm" methods="get" action="#" onsubmit="setFormUrl()">
Search: <input type="text" name="q" />
<input type="submit" value="Go" />
</form>
function bang()
{
return "http://www.google.com";
}
function setFormUrl()
{
var url = bang();
document.getElementById('testForm').setAttribute('action', url);
}

javascript function call for single form

I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?
Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.
type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();

Form submitting using Javascript not working

I am using multiple form in a page here is my HTML code:
<form name="myform" id="myform" method="post" action="test.php">
<a href="javascript: submitform();" >submit</a>
<input type="hidden" name="encKey" value="12" />
</form>
<form name="myform" id="myform" method="post" action="test.php">
<a href="javascript: submitform();" >submit</a>
<input type="hidden" name="encKey" value="12" />
</form>
<form name="myform" id="myform" method="post" action="test.php">
<a href="javascript: submitform();" >submit</a>
<input type="hidden" name="encKey" value="12" />
</form>
And here is my javascript code:
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
When i click on submit link, form is not submitting and gererate error in backend:
TypeError: document.myform.submit is not a function.
What may be issue?
Thanks
I think you should use unique ids for all the forms. Then you can have a function that takes as a parameter the id of the form that you want to submit and then submit it. So you can have something like <script type="text/javascript">
function submitform(formid)
{
document.getElementById(formid).submit();
}
</script>
You may try this
<script type="text/javascript">
function submitform()
{
document.getElementById('myform').submit();
}
</script>
You can also use document.forms["myForm"].submit();.
In this case "myForm" is the name of each form and it has to be unique as well as id.
First of all you've got 3 id which are the same (myform), an id has to be unique.
the id of a form must be unique, try to change the form id to only name.
you can try to use document.getElementById('formId').submit() to submit the information of a form.

Categories