How to submit form without submit button - javascript

I'm trying to submit form without submit button. I used this code to submit: document.forms['form_id'].submit(); but this code submitin over and over again. I want submit just one time
<form method="POST" id="form_id">
<input type="hidden" id="lan" value="" name="number">
</form>
<script type="text/javascript">
document.forms['form_id'].submit();
</script>

the form is submitting it self everytime the javascript is loaded, which is everytime you load the page. The default behavior of a form is to submit to the location you are currently at, if not defined, you are continously submitting the form to the page that has the form and that again submits the form.
If you want this submit only to happen once, when a visitor is (re)directed to this page for instance, you should submit to a different one by using the action attribute of your form.
If you want the submit to happen on te request of a user, wrap your submit in a function that is called by an onclick event on a button, or any other event.
<script>
function submittheform(){
document.forms['form_id'].submit();
}
</script>
<form method="POST" id="form_id" action="someHandlerUrl">
<input type="hidden" id="lan" value="" name="number"/>
<input type="button" onclick="submittheform()" value="submit the form"/>
</form>
you could use this script in the PHP building your page;
<?php
if(isset($_POST['number'])){
$number = $_POST['number'];
$out = '<h1>The form was submitted</h1>';
}else{
$out = '
<h1>The form needs to be submitted</h1>
<form method="POST" id="form_id">
<input type="hidden" id="lan" value="" name="number">
</form>
<script type="text/javascript">
document.forms[\'form_id\'].submit();
</script>
';
}
echo $out;
?>
When the form is submitted and the number value is present,
it shows a page without the script and form.

<form method="POST" action="" id="mailform">
<input type="email" name="mail" placeholder="EMAIL" id="mail">
<div id="sub" onclick="mailsubmit()">Click Me to Submit</div>
</form>
<script type="text/javascript">
function mailsubmit(){
document.getElementById("mailform").submit();
var mailid = document.getElementById("mail").value;
return mailid?alert(mailid):alert("You did not submit your Email");
}
</script>

Related

Submitting form on same loaded page if the page is loaded via ajax

So i have a PHP page that is loaded via AJAX using the .load method.
This is then displayed on my page, however i need to be able to submit the form that is located on my second page that im loading using .load, submit this form and process the data on the same page without it reloading.
I'm very new to javascript and AJAX so i've no idea if i'm evening doing this correct using .load()
Any help would be appreciated.
page 1 is the following:
<button onclick="Test()" type="button">Load Content</button>
<div class="box" id="box" name="box">
</div>
<script>
function Test(id) {
$( "#box" ).load( "test.php?id=" + id );
}
</script>
The second page which is test.php houses the following
<form id="enrolemployee" action="" method="post">
<div class="form-group">
<label>Test</label>
<input type="text" class="form-control" id="Test" name="Test" placeholder="Test">
</div>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<button type="submit" class="btn btn-outline-custom">Submit</button>
</form>
Now to submit the form on test.php i use a custom token class to generate a random hash per form submit so i can validate the data on the same page and process it through my database.
is this possible to do? or do i need to have my form then post the data through a different page?
Basically i need the entire thing to stay on PAGE 1, process the form like it normally should whilst the persons page does not reload and is always static on page 1, this should never redirect to test.php
Thankyou.
You can do it like
index.php
<button onclick="Test('10')" type="button">Load Content</button>
<div class="box" id="box" name="box">
</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
function Test(id) {
$("#box").load("test.php?id=" + id);
}
</script>
test.php
<form id="enrolemployee" action="" method="post">
<div class="form-group">
<label>Test</label>
<input type="text" class="form-control" id="Test" name="Test" placeholder="Test">
</div>
<input type="hidden" name="token" value="">
<button type="submit" class="btn btn-outline-custom">Submit</button>
</form>
<script>
$("#enrolemployee").on('click', e => {
// Avoid reloading page
e.preventDefault();
console.log(<?php echo $_GET['id']; ?>);
})
</script>

Validate html5 form before calling php function?

I currently have a html5 form with a basic text-area inside of it, when you hit the submit button a php script is called that sends the data to the database.
However, before the PHP script is called, I would like to run some validation on the form (checking if it is null etc...) before the PHP is called, preferably in javascript.
Is there a way I can do this?
Thanks.
Html5 form:
<form action="submit.php" method="POST">
<tr>
<td id="textBox-back">
<textarea id="rage-box" type="text" name="rage" cols="40" rows="5" maxlength="160"> </textarea>
<input id="submit" value="" name="submit" type="submit"/>
</td>
</form>
<script language="javascript">
function validate(){
//Code of validation
return false;
}
</script>
<form action="submit.php" method="POST" onsubmit="return validate();">
<tr>
<td id="textBox-back">
<textarea id="rage-box" type="text" name="rage" cols="40" rows="5" maxlength="160"> </textarea>
<input id="submit" value="" name="submit" type="submit"/>
</td>
</form>
You need to add an onclick on your submit or form.
var sub = document.getElementById('submit');
var tex = document.getElementById('rage-box');
sub.onclick = function(e){
if(tex.value == ''){
//stopping it from being sent
e.preventDefault();
alert('make sure everything is filled out');
}
}
If you add the event on your form you need to:
Give an id to your form
Get your form and add the form.onsubmit = function(){};
Then just copy the code inside the anonymous function.

Javascript/PHP auto submit keeps submitting form

This code:
<?php
if(isset($_GET['submit']))
{
?>
<head>
<script type="text/javascript">
document.getElementById('up').submit(); // SUBMIT FORM
</script>
</head>
<?php
}
?>
form:
<form name="up" id="up" action="" method="post">
<textarea name="text" rows="40" cols="100"></textarea>
<input type="submit" name="ingameban" value="Save in-game banlist (Upload to server and make new bans take effect)" style="height: 64px; width: 550px;" />
</form>
Keeps looping all the time, the same result as smashing the reload button.
It has to submit the form when the url states ?submit=submit
What to do to fix this?
Thanks
Your approach is right, but the problem is that submit=submit in the URL is copied to the new URL used to submit the form. Because in your form you have:
<form name="up" id="up" action="" method="post">
Since action is empty, the exact same URL is used, so submit=submit stays in the URL. Instead, provide the proper URL in action. Then submit=submit won't be copied to the new URL:
<form name="up" id="up" action="/my-url" method="post">
How about setting an input hidden field, which you mark as true when you submit.
Check this field before submitting again.
Try this:
<?php
if(isset($_GET['submit']))
{
if(isset($_GET['submitted']) && $_GET['submitted'] == 'false') {
?>
<head>
<script type="text/javascript">
document.getElementById('submitted').value = 'true';
document.getElementById('up').submit(); // SUBMIT FORM
</script>
</head>
}
<?php
}
?>
<body>
<form method="get" id="up">
<input type="hidden" id="submitted" name="submitted" value="false" />
...
</form>

Using Javascript To redirect am embedded Form when submit button is clicked

I want a javascript to redirect the embedded form below when the submit button is clicked
The form is below
<div class="o-form-header"><h2 id="o-form-title">Mail List Subscription Form</h2><p id="o-form-description">Please fill in and submit the form below to subscribe to our mailing list.</p></div> <form action="http://sendfree.com/subscribe.php" method="post" accept-charset="UTF-8"><div class="o-form-row"><label for="FormValue_EmailAddress">Email Address</label><input type="text" name="FormValue_Fields[EmailAddress]" value="" id="FormValue_EmailAddress"/></div><div class="o-form-row"><label for="FormValue_CustomField689">Your Name</label><input type="text" name="FormValue_Fields[CustomField689]" value="" id="FormValue_CustomField689"/></div> <input type="hidden" name="ret_s" value="44" /> <input type="submit" name="FormButton_Subscribe" value="Submit" id="FormButton_Subscribe"/><input type="hidden" name="FormValue_ListID" value="8085"/><input type="hidden" name="FormValue_Command" value="Subscriber.Add" id="FormValue_Command"/></form>
The javascript I use below but it not redirecting to google.com after the submit button is clicked
<script type="text/javascript">
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function()
{
window.location.href="http://www.google.com"
}
</script>
Please Help
<script type="text/javascript">
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function()
{
location.replace("http://www.google.com");"
}
</script>
document.getElementById("FORMBUTTON_SUBSCRIBE").onclick=function(event)
{
window.location="http://www.google.com";
event.preventDefault();
}
Default action on form button click is submitting of form, so we should prevent it.
I used Eventlistener but not still redirecting, check what may be wrong as am not good in javascript
<script>
document.getElementById("FormButton_Subscribe").addEventListener("click", function(){
window.location.href=" http://www.google .com";
});
</script>

Detect post action in a form

I want to do something when a form is submitted.
var ispostaction = false;
$("#myform").submit(function () {
ispostaction = true;
});
When the form is submitted the .submit(function ()) is not called.
Is there anything wrong that I'm doing? I have the form id as myform.
I would appreciate any help.
Here's my xhtml page. I'm using JSF 2
<form id="myform" class="someclass" enctype="application/x-www-form-urlencoded"
action="pagename.jsf" method="post">
// custom input text field
// selectOneMenu
// a few more input text fields
// submit button is below
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="...." name="javax.faces.ViewState">
</form>
The jquery documentation:
The submit event is sent to an element when the user is attempting to submit
a form. It can only be attached to <form> elements. Forms can be submitted
either by clicking an explicit <input type="submit">, <input type="image">,
or <button type="submit">, or by pressing Enter when certain form elements
have focus.
Calling the submit function will not trigger the submit event. You can "fix" this by adding a hidden button which you click from jquery instead. Most, if not all, browsers unfortunately display the same behavior.
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<body>
<form id="myform" enctype="application/x-www-form-urlencoded"
action="posturl" method="post">
// custom input text field
// selectOneMenu
// a few more input text fields
// submit button is below
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="...." name="javax.faces.ViewState">
<input type="text" value="a value" />
<input id="submit" type="submit" value="submit" style="display: none;" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#myform").bind('submit', function() {
alert('');
});
$("#submit").click();
});
</script>
</body>
</html>

Categories

Resources