Validate html5 form before calling php function? - javascript

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.

Related

When handling a form submission with addEventListener the action performed is reverted immediately

My webpage has a simple form with an input box and the submit button, and an empty paragraph:
<form action="" class="form" method="post" id="f">
<input type="text" name="text" id="txt" value="">
<input type="submit" name="submitButton" value="go">
</form>
<p id="p1"></p>
I'm trying to write a script that once the submit button is submitted writes the submitted text into the paragraph:
let f = document.getElementById('f')
f.addEventListener('submit', function () {
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text
})
And it kinda works, meaning that it does shows the text in the paragraph but only for a split second, then it disappears. What am I missing?
You need to preventDefault
let f = document.getElementById('f');
f.addEventListener('submit', function(e) { // access the submit event
e.preventDefault(); // prevent the default behavior of the submit event
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text
});
when I tried to stop people from copying my image i used a Event listener
all you need to do is change contextmenu to p1 and then change #txt to txt
you need to change input type submit to button. this will not reload page.
function callClick(){
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text;
}
</script>
<form action="" class="form" method="post">
<input type="text" name="text" id="txt" value="">
<input type="button" id="f" name="submitButton" value="go" onclick="callClick()">
</form>
<p id="p1"></p>

Required Input Field + Onlick Button request

Currently I am trying to make my input field required.
<form name="myForm" method="post">
<input type="text" id="username" name="username" required>
<center><button id="process2" type="submit">Continue</button> </center>
</form>
When I have the above portion it works, however I need it to work whenever I have my button containing a onlick event. <button id="process2" type="submit" onclick="move()">Continue</button> how can I go about doing this?
The issue is currently - The onclick request will fire, and it'll prompt the required option, however the onclick request should not fire unless the required option is populated.
Instead of the onclick , you should listen for the form's submit, and call move() inside it
document.querySelector('form').addEventListener('submit', event => {
event.preventDefault();
console.log('submitted');
move();
});
function move() {
console.log('moving ..');
}
<form name="myForm" method="post">
<input type="text" id="username" name="username" required>
<button id="process2" type="submit">Continue</button>
</form>
Or you can just simply fire the move function but wrap your deserted effect inside if statement that will check if input is empty or not...
function move() {
element = document.getElementById("username").value;
if (element === "") {
console.log("input wasnt populated do something");
}
}
<form name="myForm" method="post">
<input type="text" id="username" name="username" required>
<center><button id="process2" type="submit" onclick="move()">Continue</button> </center>
</form>
Using jquery you can listen the submit event on form like then call move function to redirect to other page or whatever logic you want
$(document).on('submit','form',function(){
event.preventDefault();
// call move function here , move();
});

Multiple form validation with same function

I am using form twice on same page.
HTML Code
<form action="post.php" method="POST" onsubmit="return checkwebform();">
<input id="codetext" maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
It's working fine with one form but when i add same form again then it stop working. The second form start showing error popup alert but even i enter text in form field.
JS Code
function checkwebform()
{
var codecheck = jQuery('#codetext').val();
if(codecheck.length != 5)
{
alert('Invalid Entry');
} else {
showhidediv('div-info');
}
return false;
}
How can i make it to validate other forms on page using same function?
As I commented, you can't have more than one element with the same id. It's against HTML specification and jQuery id selector only returns the first one (even if you have multiple).
As if you're using jQuery, I might suggest another approach to accomplish your goal.
First of all, get rid of the codetext id. Then, instead of using inline events (they are considered bad practice, as pointed in the MDN documentation), like you did, you can specify an event handler with jQuery using the .on() method.
Then, in the callback function, you can reference the form itself with $(this) and use the method find() to locate a child with the name codetext.
And, if you call e.preventDefault(), you cancel the form submission.
My suggestion:
HTML form (can repeat as long as you want):
<form action="post.php" method="POST">
<input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
JS:
$(document).ready(function() {
//this way, you can create your forms dynamically (don't know if it's the case)
$(document).on("submit", "form", function(e) {
//find the input element of this form with name 'codetext'
var inputCodeText = $(this).find("input[name='codetext']");
if(inputCodeText.val().length != 5) {
alert('Invalid Entry');
e.preventDefault(); //cancel the default behavior (form submit)
return; //exit the function
}
//when reaches here, that's because all validation is fine
showhidediv('div-info');
//the form will be submited here, but if you don't want this never, just move e.preventDefault() from outside that condition to here; return false will do the trick, too
});
});
Working demo: https://jsfiddle.net/mrlew/8kb9rzvv/
Problem, that you will have multiple id codetext.
You need to change your code like that:
<form action="post.php" method="POST">
<input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
<form action="post.php" method="POST">
<input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
And your JS:
$(document).ready(function(){
$('form').submit(function(){
var codecheck = $(this).find('input[name=codetext]').val();
if(codecheck.length != 5)
{
alert('Invalid Entry');
} else {
showhidediv('div-info');
}
return false;
})
})

PHP form submit button but not leave page

I have a button that links to a php file that tracks user's email when clicked, but I don't want the user to leave the page when button is clicked, I just want to change button's value.
This is the html of the form.
<form action="mysql-query.php" method="post">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test" onclick="Press()">
</form>
And this is the script that handles the form:
<script>
function Press() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
}
</script>
I put the display:none; because I don't want to display anything but the button and have a way to connect with my php file.
Any ideas?
You need to use ajax:
html:
<form action="mysql-query.php" method="post" onsubmit="return Press(this)">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test">
</form>
js:
function Press(form) {
$.post($(form).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
}
or better bind submit event using jQuery:
$('form').submit(function() {
$.post($(this).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
});
Use:
<form action="javascript:void()">
Ok, this thing prevents the form from sending the data anywhere, unless you use "onclick" event on the submit button.
What you can do is remove the type="submit" on the button and replace it with type="button". Next you can do an ajax call to your php and do your magic.

How to submit form without submit button

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>

Categories

Resources