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>
Related
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>
Im creating a form for a project and I have to set a validation rule so that if nothing is entered for the name then an alert will appear telling the user that a "Name must be filled out" I know this is probably a silly rookie mistake but I'm not quite sure why Its not working as I'm new to javascript.
I haven't included the CSS as its unnecessary. I'm also not posting the information to anything yet.
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
</script>
</head>
<body>
<div class="form_settings">
<form name="MyForm" onSubmit="return validateForm()"
method="post">
<p><span>Name</span><input class="contact" type="text"
name="fname" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p><span>Re type Email Address</span><input class="contact"
type="text" name="your_email" value="" /></p>
<p><span>Message</span><textarea class="contact textarea"
rows="8" cols="50" name="your_enquiry"></textarea></p>
<p style="padding-top: 15px"><span> </span><input
class="submit" type="submit" name="contact_submitted" value="Submit" /></p>
</form>
</body>
Try this:
function validateForm() {
var x = document.getElementsByClassName("contact")[0].value;
if (x == "") {
alert("Name must be filled out");
}
return false;
}
<form name="MyForm" onsubmit="validateForm();">
<p><span>Name</span>
<input class="contact" type="text" name="fname" value="" />
</p>
<p><span>Name</span><input class="contact" type="text" name="fname" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p>
<p><span>Re type Email Address</span><input class="contact" type="text" name="your_email" value="" /></p>
<p><span>Message</span><textarea class="contact textarea" rows="8" cols="50" name="your_enquiry"></textarea></p>
<p style="padding-top: 15px"><span> </span>
<input class="submit" type="submit" value="submit" />
</p>
</form>
How to disable require in inputs with name = "item_name",name="description" and name="quantity" when i click purpose and enable the require in purpose textarea by using javascript.
Edit: What I really mean is when i submit the form by clicking ADD, only the input with name item_name description quantity are required and When I submit the form by clicking Purpose, the textarea will be the one who is required
Here is my code:
<form action="../function/add_item.php" method="post">
<input id="autocomplete" name="item_name" placeholder="Item Name" required>
<input type="text" name="description" placeholder="Description placeholder="Quantity"" required>
<input type="number" name="quantity" required>
<button name="submit" type="submit" class="btn btn-default">ADD</button>
<textarea placeholder="Purpose (e.g. Office Use)" name="purpose" required></textarea>
<button name="purpose" type="submit" class="btn btn-info">Purpose</button>
</form>
I assume this is the code you might be looking for:
$(function() {
$('[type=submit]').on('click', function() {
if($(this).attr('name') == 'submit') {
$('[name=item_name], [name=description], [name=quantity]').attr('required', 'required');
$('[name=purpose]').removeAttr('required');
} else if($(this).attr('name') == 'purpose') {
$('[name=purpose]').attr('required', 'required');
$('[name=item_name], [name=description], [name=quantity]').removeAttr('required');
}
});
});
Add an id to your button
<button id="purpose" type="submit" class="btn btn-info">Purpose</button>
Then
$(function() {
$('#purpose').click(function() {
$('#item_name').removeAttr('required');
$('#description').removeAttr('required');
$('#quantity').removeAttr('required');
$('textarea').attr('required','1');
});
});
Try this one. I just added up some javascript and add id's
document.getElementById('purpose').onclick = function() {
document.getElementById("name").required=false;
document.getElementById("des").required=false;
document.getElementById("qnt").required=false;
}
<form action="../function/add_item.php" method="post">
<input id="name" name="item_name" placeholder="Item Name" required>
<input id="des" type="text" name="description" placeholder="Description placeholder="Quantity"" required>
<input id="qnt" type="number" name="quantity" required>
<button name="submit" type="submit" class="btn btn-default">ADD</button>
<textarea placeholder="Purpose (e.g. Office Use)" name="purpose" required></textarea>
<button id="purpose" name="purpose" type="submit" class="btn btn-info">Purpose</button>
</form>
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.
I'm using a JavaScript validator from http://www.javascript-coder.com/html-form/javascript-form-validation.phtml. The problem I'm facing is that I have one button that saves the registration (here I need to check for name and last name) and the second button which checks the entire form. However, if I press any button, it checks the entire form.
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
frmvalidator.addValidation("organization","req","Please enter the organization");
</script>
Maybe this will work. Add validation for proper input fields onClick:
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" onclick="return btnSave_click();" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" onclick="return btnRegister_click();" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
function btnSave_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
return true;
}
function btnRegister_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("organization","req","Please enter the organization");
return true;
}
</script>
I guess you will need to write a custom validation function