How To Submit An HTML Form Using PHP? - javascript

This is what I am trying to do without success :
<form name="something" action="ht.php" method="post">
Submit
</form>
When I click on the link I want to post the value helloworld to ht.php. How can I do this?

You can't just do document.url.submit(), it doesn't work like that.
Try this:
<form id="myForm" action="ht.php" method="post">
<input type="hidden" name="someName" value="helloworld" />
Submit
</form>
That should work!

Using jQuery, its rather easy:
$('form .submit-link').on({
click: function (event) {
event.preventDefault();
$(this).closest('form').submit();
}
});
Then you just code as normal, assigning the class submit-link to the form submission links:
<form action="script.php" method="post">
<input type="text" name="textField" />
<input type="hidden" name="hiddenField" value="foo" />
Submit
</form>
I find this method useful, if you want to maintain an aesthetic theme across the site using links rather than traditional buttons, since there's no inline scripting.
Here's a JSFiddle, although it doesn't submit anywhere.

try
<form id="frmMain" action="ht.php" method="post">
Submit
</form>

Try this,
<!-- you need to give some name to hidden value [index for post value] -->
<form name="something" action="ht.php" method="post">
<input type="hidden" name="somename" value="helloworld" />
Submit
</form>
Also try this
<!-- you need to give some name to hidden value [index for post value] -->
<!-- also you can use id to select the form -->
<form name="something" action="ht.php" method="post" id="myform">
<input type="hidden" name="somename" value="helloworld" />
Submit
</form>

You could add a hidden field on the page (set it's name property), set it's value to helloworld.
Then in your hyperlink's onclick call form.submit()

Related

Form inside angular component does not submit

I have a classic html form element which works fine when I insert it into the index.html of an angular application. A click on the button submits the form. If I insert the same form in an angular component html file, it is rendered as well but when I click the button, nothing happens.
<form method="post" action="https://blub.shtml" id="form" name="form" target="_parent">
<input type="hidden" name="data" value="data" />
<input type="submit" value="Send" />
</form>
Why does this happen and how can I fix it?
EDIT: I cant use (ngSubmit) because of the CORS policy of the server.
Try this approach to see if it work
<form method="post" action="https://blub.shtml" id="form" name="form">
<input type="hidden" name="data" value="data" />
<button type="submit"/>Send</button>
</form>
Try this
<form ngNativeValidate (ngSubmit)="onSubmit()" #form="ngForm">
and in onSubimit method you can to whaterver you want.

submitting a form via jquery removes submit input variable

Here's my HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" method="get" action="">
<input type="hidden" name="var1" value="true" />
<input type="submit" name="var2" value="submit" />
</form>
<script>
$("#test").submit();
</script>
The resultant request that that makes has var1 in it but not var2. My question is why and what can I do to get var2?
Here's a live demo:
http://www.frostjedi.com/terra/dev/submit.php
try: method="post" in form or use <button type="submit"></button>
A form should submit the value of a submit button only if it's clicked to submit the form (see HTML5 4.10.22.4 Constructing the form data set). Calling the submit method doesn't click the button, so it doesn't submit the value.
The code you've posted will endlessly submit the form, thanks.
You can call the click method of the button, but that may not work (i.e. submit the button's value) everywhere:
<form id="test" method="get" action="">
<input type="hidden" name="var1" value="true">
<input type="submit" name="var2" value="submit">
</form>
<button onclick="$('#test')[0].var2.click()">submit form</button>
Or, as user3701524 suggests, use method=post if that suits.
The value on button will only be submitted when u actually CLICK that button. To make it all work nice, I recommend binding to
$('form').on('submit', function(e) {
// here you have the button value if it was clicked.
e.preventDefault(); // optional this prevent default submission.
});
either way, calling $('form').submit() will NOT send the button value because is not triggered by the button itself.
Hope it helps!

How to make a form submit on div click using jquery?

I already tried this in single php file but doesn't work out, so i tried now in two separate php file one for form and another one for process.
How to submit the form on a div or link click?
Code i tried
$(document).ready(function(){
jQuery('.web').click(function () {
$("#g_form").submit();
alert('alert');
});
});
FORM
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
Here is the process file code p.php
<?php
if(isset($_POST['f1'])){
echo $_POST['f1'];
} ?>
When i click the submit button the form is submitting but when i click the .web div it is not submitting the form even i get the alert message but not submitting.
What wrong am doing here? It'll be helpful if i get a idea.
.submit() docs
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see
DOMLint.
You give your submit button a name of submit, which the above passage tells you will cause "confusing failures"
So if you accessed the dom element and looked at the .submit property you would see that since you name the button submit instead of .submitbeing a function its a reference to the buttons dom element
HTML
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
JS
//Get the form element
var form = $("#g_form")[0];
console.log(form.submit);
//prints: <input type="submit" value="submit!" name="submit"/>
And when you change the submit name
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="psubmit"/>
</form>
<div class="web">click</div>
JS
var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] }
so simply give your submit button a different name that does not conflict with a form's properties.
You can trigger submit button click.
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" id="f_submit" name="submit"/>
</form>
<div class="web">click</div>
$(document).ready(function(){
jQuery('.web').click(function () {
$("#f_submit").trigger( "click" );
alert('alert');
});
});
DEMO : http://jsfiddle.net/awladnas/a6NJk/610/
HTML (provide a name for the form, strip the name from the submit):
<form action="p.php" name="g_form" id="g_form" method="post">
<input type="text" name="f1" value="">
<input type="submit" value="submit!"/>
</form>
<div class="web">click</div>
JavaScript
//use jQuery instead of $ in the global scope, to avoid conflicts. Pass $ as parameter
jQuery(document).ready(function($){
//use on(), as it's the recommended method
$('.web').on('click', function () {
//use plain JavaScript. Forms are easily accessed with plain JavaScript.
document.g_form.submit();
alert('alert');
});
});
Change the name of the submit and Try,
<input type="submit" value="submit!" name="mySubmit"/>
Remove the submit from the form and try again:
<form action="http://test.com" id="g_form" method="GET">
<input type="text" name="f1" value=""/>
</form>
<div class="web">click</div>
I changed the action to a real URL and the method to a GET so something is seen changing.
Fiddle
$(".web").live('click', DivClick);
function DivClick(){
$("#g_form").submit();
}

Mutliple forms on a page with each one being able to submit

How is it possible to have multiple forms on a page with each one being able to submit itself.
When i have it set up like this, the first forms submits, but the 2nd does not work. Any suggestions on how to make it work? (I will have many forms like this on 1 page)
thanks
<form action="/order-form2.php" method="post">
<input type="hidden" name="phoneType" value="iPhone 2g - 4GB//ATT">
<input type="hidden" name="price" value="75">
<div class="prodSize">4 GB</div>
</form>
<form action="/order-form2.php">
<input type="hidden" name="phone" value="iPhone 2g - 8GB//ATT">
<input type="hidden" name="price" value="25">
<div class="prodSize">8 GB</div>
</form>
use this for 2nd form it will work. as default method is set to get if it has no method.
<form action="/order-form2.php" method="post">
first form is set method to post, second has not, if you're catching with POST then it's empty, set the method to post or catch with GET, if it's not set method, default is GET
Please use the following
<form name='form1' id='form1' method='POST' action='/order-form1.php'>
<a href="#" onclick='return document.forms.form1.submit();'>4 GB</a>
</form>
Note the id and name attributes assigned to form, use that in javascript

.submit() doesn't work with Firefox and Greasemonkey

I'm trying to make an auto login script and I'm stuck on the submit part...
The source of the submit form from the website is
<input type="submit" value="Sign In" class="signin" id="sumbitLogin">
and I'm trying
document.getElementById("sumbitLogin").submit();
if I set an Attribute, for example the value, it changes just fine...
How can I solve it?
You don't submit an input field. You submit a form.
<form id="formid">
<input type="submit" value="Sign In" class="signin" id="sumbitLogin">
</form>
and ..
document.getElementById("formid").submit();
Use form_name.submit()
<form id='myform' action='formmail.pl'>
Here is the code to submit a form when a hyperlink is clicked:
<form name="myform" action="handle-data.php">
Search: <input type='text' name='query' />
Search
</form>
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>

Categories