HTML/JavaScript: How to detect a blank submission Form? - javascript

below is a simple form requesting user feedback.
Using HTML and/or JavaScript, how do you create an alert box that pops up whenever it detects the the entire Form or a portion of the Form is blank? E.g. whenever the user clicks to submit a blank/incomplete form, alert box: "You forgot to fill out Name/Email/Comments".
Thanks lot.
<div>
<form method="post" enctype="text/plain" action="MAILTO:name#example.com">
Your Name<br>
<input type="text" size="40" name="name">
<br><br>
Email Address<br>
<input type="text" size="40" name="email">
<br><br>
Any Comments or Questions?<br>
<textarea name="comments" rows="8" cols="40"></textarea>
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
<br><br>
</form>
</div>

You could use HTML5 required attribute for this
<div>
<form method="post" enctype="text/plain" action="MAILTO:name#example.com">
Your Name<br>
<input type="text" size="40" name="name" required>
<br><br>
Email Address<br>
<input type="text" size="40" name="email" required>
<br><br>
Any Comments or Questions?<br>
<textarea name="comments" rows="8" cols="40"></textarea>
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
<br><br>
</form>
</div>

Expand your Form Tag
<form onsubmit="return validate();" method="post" enctype="text/plain" action="MAILTO:name#example.com">
Basic info here: The validate() method is called whenever you try to submit the form. The boolean return of the validate() function decides if the form is sumbmitted or not.
For convenience, add id attributes to all fields. Example:
<input type="text" size="40" name="email" id="email">
The validate() method
This is the heart of your form test.
<script type="text/javascript">
function validate()
{
var messages = new Array();
if (document.getElementById('email').value.length == 0)
{
messages.push('E-Mail missing');
}
if (document.getElementById('name').value.length == 0)
{
messages.push('Name missing');
}
if (0 == messages.length)
{
return true;
}
// Do something with the messages array
return false;
}
</script>
Have fun.

If you know javascript it's a piece of cake.If not, you can use this.

Related

How to add a form validation using JavaScript?

I have 3 fields which I want to validate
<form name='Login' method='post' target='_self'>
<div class="loginPic"...>
<input id="accountLoginField" class="loginEmail" type="text" name="account" value="" placeholder="">
<input id="userLoginField" class="loginUsername" type="text" name="user" value="" placeholder="">
<input id="passLoginField" class="loginPassword" type="password" name="password" value=""
placeholder=""> ....
And I have submit input
<input id="btn_login" type="submit" name="submit" class="buttonM bBlue" value="Connect">
How can I check if these fields are empty and show alert box?
I tried diferent ways that I found here and on other sites, but none of them seems to work... Thank you
You can validate using if and else and check with the values attribute like, this the sample code you can refer for,
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
Likewise, you can check for every field.
The following example will submit to a live test server and the response will be displayed in an <iframe> for demonstration purposes. Client side validation is minimal and of course the server should do the heavy lifting when it comes to validation. Here are the major points:
Make sure the submit button is within the <form>. If for some reason it isn't, add form="*" to it ("*" is the id of <form>). Although it's totally valid for <form> to have a name, an id is more useful so in example <form id='login'...>.
Each field has a required attribute so it can be validated when the "submit" event is triggered, the first blank <input> will have a popup.
The first <input> type has been changed to "email" so validation will stop submission should the user forget #.
<form id='login' action='https://httpbin.org/post' method='POST' target='response'>
<fieldset>
<input name="account" type="email" placeholder="Email address" required>
<input name="user" type="text" placeholder='User name' required>
<input name="password" type="password" placeholder="Password" required>
<input type="submit" value="Connect">
</fieldset>
</form>
<label>These two buttons are outside of form.</label><br>
<input type='submit' form='login' value='Works'>
<input type='submit' value="Doesn't Work"><br>
<iframe name='response'></iframe>

how to display a value(in text field) from one form(after submitting it) to another form (both are on the same page)

So, I have the form1 where i am giving values in two fields and submitting it,
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
I want these values to automatically be written and visible in the two textinput and numberinput fields in form2.
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
how do i use javascript to automatically set values visible and ready to submit
to the fields in form2 ???
Note: i'm using two forms because they both have different actions after clicking submit and both the forms are on the same page.
Here is one small example using id hashes, with this idea, I think you can start, object hash will have pair list,
You can restrict specific form by mentioning id of it, in place of $('form :input').on():
var hash = {
aadhar_r : 'a_number',
cand_r : 'cid'
}
$('form :input').on('keyup',function(){
if(this.id in hash){
$('#'+hash[this.id]).val($(this).val())
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
If you use jQuery, you can serialize your first form and send it directly to the server. Then you get the value from the input field and set it to the other input field.
Form 1:
<form id="form1">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="idOfInput1" required/>
<button id="submit" />
</form>
Script:
$("#submit").click(function () {
$.post("new_cand.php", $("#form1").serializeArray(), function () { /* Nothing to do with new_cand.php data */});
$("#idOfInput2").val($("#idOfInput1").val());
});
Form 2:
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="idOfInput2" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
Attention: this is not tested, requires jQuery and is for a post method

How to get button to add text to input form

Forgive me I
function addText() {
var input = document.getElementById('something');
input.value = input.value +'URGENT PLEASE READ';
}
<form name="frm1" action="?" onsubmit="addText()">
<p> Subject </p><input type="text" name="Subject" size="40" id="something" onsubmit="addText()"maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="20"></textarea>
<input type="submit" value="MAKE URGENT" id="URGENT"/>
</form>
am very new to JS and I am attempting to create a button that adds the words "URGENT PLEASE READ" to the subject of a message; however, the following code simply clears my subject head. Thank you in advance,
I'm not sure if you wanted a separate button for make urgent and submit - if so you can do it like this
function addText() {
var input = document.getElementById('something');
input.value = input.value + 'URGENT PLEASE READ';
}
<form name="frm1" action="?" onsubmit="addText()">
<p> Subject </p><input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="10"></textarea>
<button type="button" id="URGENT" onclick="addText()">MAKE URGENT</button>
<input type="submit" value="SUBMIT" id="SUBMIT"/>
</form>
Use proper event handlers on the forms submit event, and prevent the form from submitting, otherwise the page just reloads, and the changed value is lost.
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault();
var input = document.getElementById('something');
input.value = input.value + 'URGENT PLEASE READ';
});
<form name="frm1" action="?" id="myForm">
<p> Subject </p>
<input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="20"></textarea>
<input type="submit" value="MAKE URGENT" id="URGENT" />
</form>
Why not use a Checkbox?
<form name="frm1" action="?">
<p> Subject </p>
<input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="50" rows="5"></textarea>
<br><br>
<input type="checkbox" name="Urgent" /> Make urgent
<br><br>
<input type="submit" value="Submit"/>
</form>

How to join input to form

Hi I have a little problem
I have 3 forms that send different parameters via GET to another page and i have 3 inputs outside all forms that I want to send with form that user chooses to submit.
Inputs with names one, two and three must be send with 1 of that forms.
This is my code:
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<form action="process.php" method="get">
<input type="text" name="name">
<input type="submit" value"Process by name">
</form>
<form action="process.php" method="get">
<input type="text" name="adress">
<input type="submit" value"Process by address">
</form>
<form action="process.php" method="get">
<input type="text" name="number">
<input type="submit" value"Process by number">
</form>
All I want to is, when someone submit any form, that three inputs name="(one,two,three)" are send with rest param of form.
EDIT: Just 1 form is submitted!
If you put everything into one form, and use a hidden type value, you can ensure that all values are passed on submit.
<form action="process.php" method="get" id="form1">
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<input type="text" name="name">
<input type="submit" name="btnName" value="Process by name">
<input type="text" name="adress">
<input type="submit" name="btnAddress" value="Process by address">
<input type="text" name="number">
<input type="submit" name="btnNumber" value="Process by number">
</form>
Since you are submitting to a PHP page, you can check which of the buttons was pressed with the following code...
if (isset($_POST['btnName'])) {
//do something with name
} else if (isset($_POST['btnAddress'])) {
//do something with adress
} else if (isset($_POST['btnNumber'])) {
//do something with number
}

Stay on current page, when form validation is false

I want to stay on the current page, if the "Name" input field is empty.
Right now, it shows the error message, and when you click ok, it still goes to the next page (contactcaptcha.php).
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
<form id="action" action="contactcaptcha.php" method="post">
<fieldset>
<textarea id="message" name="Message" placeholder="What's on your mind?"></textarea>
<input id="Name" name="Name" placeholder="Enter your full name" type="text">
<input id="Email" name="Email" placeholder="Enter your email address" type="email">
<input type="submit" onclick="notEmpty(document.getElementById('Name'), 'Please enter your name')" name="submit" value="Send your message">
</fieldset>
try like so, returning your function at submit event of the form element
<form id="action" action="contactcaptcha.php" method="post"
onsubmit="return notEmpty(document.getElementById('Name'), 'Please enter your name')">
<fieldset>
...
<input type="submit" name="submit" value="Send your message">
</fieldset>
</form>
Misssing return keyword:
<input type="submit"
onclick="return notEmpty(document.getElementById('Name'), 'Please enter your name')"
name="submit" value="Send your message">
As you use HTML5 anyway, you might want to use the required attribute: http://www.w3schools.com/html5/att_input_required.asp
<form>
<input id="message" required>
<input type="submit" value="Submit">
</form>

Categories