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>
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>
i am trying to change text of a span using onclick of javascript but its not working . Its very simple stuff but i am not sure why its not working
<div class="subscribe_block">
<h3><span>Stay Connected</span></h3>
<form method="post" action="" name="subscribeForm">
<span id="message"></span>
<p><input type="text" id="name" placeholder="Your Name" /></p>
<p><input type="text" id="email" placeholder="Email Id" /></p>
<p><input type="submit" value="subscribe" onClick='document.getElementById("message").value = "Thank you for subscribing";return false;' /></p>
</form>
</div>
<div class="subscribe_block">
<h3><span>Stay Connected</span></h3>
<form method="post" action="" name="subscribeForm">
<span id="message"></span>
<p><input type="text" id="name" placeholder="Your Name" /></p>
<p><input type="text" id="email" placeholder="Email Id" /></p>
<p><input type="submit" value="subscribe" onClick='document.getElementById("message").innerHTML = "Thank you for subscribing";return false;' /></p>
</form>
</div>
Use 'innerHTML' instead of 'value'.
On the onclick function, try changing,
'document.getElementById("message").value = "Thank you for subscribing";return false;'
to
'document.getElementById("message").innerHTML = "Thank you for subscribing";return false;'
using InnerHtml will set your Span text but as it will post back so you will be unable to see anything. Remove form tag then you will be able to see it.
<div class="subscribe_block">
Stay Connected
<span id="message"></span>
<p><input type="text" id="name" placeholder="Your Name" /></p>
<p><input type="text" id="email" placeholder="Email Id" /></p>
<p><input type="submit" value="subscribe" onClick='document.getElementById("message").innerHTML= "Thank you for subscribing";return false;' /></p>
Just change value to innerHTML as
<div class="subscribe_block">
<h3><span>Stay Connected</span></h3>
<form method="post" action="" name="subscribeForm">
<span id="message"></span>
<p><input type="text" id="name" placeholder="Your Name" /></p>
<p><input type="text" id="email" placeholder="Email Id" /></p>
<p><input type="submit" value="subscribe" onClick='document.getElementById("message").innerHTML = "Thank you for subscribing";return false;' /></p>
</form>
</div>
POST http method in my form does not work when I use JavaScript:
<form id="user" method="post"action="url" onsubmit="return false;">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit" onclick = "checkForm()">
</form>
However, it does seem to work when I do not use JavaScript:
<form id="user" method="post"action="url">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit">
</form>
How can I use JavaScript validations in my form and send the form to a given URL?
<form id="user" method="post"action="url" onsubmit="return checkForm();">
<!-- blah blah-->
<input class="button" type="submit" value="submit">
</form>
Thanks for your help; this is working fine now.
It is not submitting to server because onsubmit="return false;" tells the browser the validation failed and do not send to server. If onsubmit is not specified or returns true the data will be submitted to the specified url. The following code should work if the function checkForm() returns true when passing validation and returns false while failing validation.
<form id="user" method="post" action="url" onsubmit="checkForm()">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>Last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit">
</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 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>