jquery, alert when trying to submit empty field in form - javascript

I'm sure I must have missed something really obvious, but can't for the life of me see what it is.
I have the below javascript, that (in theory) looks at the form when I click submit, and tells me if I have left the 'RefNo' field blank (in the final form there will be various fields to check, so I have used class='required' to identify them all). But so far, when I click submit, nothing happens (except the form is submitted with the missing data).
I've tried various options that I have found on the internet, and this seemed the most promising.
If anyone can see what I have done wrong it would be really appreciated.
<html>
<head>
<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function submitForm()
{
$("#Form1").submit(function()
{
$('.required input').each(function()
{
if ($(this).val() == '')
{
$(this).addClass('highlight');
}
}
);
if ($('.required input').hasClass('highlight'))
{
alert("Please fill in a Ref Number and try again");
return false;
}
}
);
}
</script>
</head>
<body>
<form method="POST" action="test9.php" name="Form1" ID="Form1">
<input TYPE="text" ID="RefNo" NAME="RefNo" VALUE="" size="25px" class="required"></input>
</br>
<p>
<input type="submit" Name="submit" id="submitButton" value="Report History" onClick='submitForm()'></input>
</p>
</form>
</body>

Your selectors should be $('input.required'), not $('.required input').

First, I think you should use Jquery validation plugin.
Ohterwise, this code should work :
-add a onsubmit="return submitForm()" in your Form tag
<form method="POST" action="test9.php" name="Form1" ID="Form1" onsubmit="return submitForm();">
-get rid of the onclick on the submit button
-and here is the submitForm function :
function submitForm() {
var valid = true;
$('input[class="required"]').each(function() {
if ($(this).val() === '') {
alert("One field is empty and try again");
valid = false;
}
});
return valid;
}
But I really recommend jquery.validate.js

Your selector appears to be a bit off:
It should be $('.required')
The way you have it tries to select an input nested inside a Required class.

Instead of doing it on form submit, remove the submit input type from the button and just have it be a regular button.
With that in mind, your javascript should be:
<script>
$('#submitButton').click(function () {
$('input.required').each(function() {
if ($(this).val() == '') {
$(this).addClass('highlight');
}
});
if ($('.highlight').length > 0) {
alert("Please fill in a Ref Number and try again");
return false;
}
else {
$('#Form1').submit();
}
});
</script>
Otherwise, the way that you're doing it, you would have to cancel the event until you run your check for missing data, and then submit the form anyway. This way keeps you from having to cancel the action, as older IE browsers do that differently than the other browsers, and even newer versions of IE. So it makes your code more readable.

The selector should be either $('input.required') or $('#RefNo').
$('#RefNo') is more faster since it uses native getElementById method.

Related

How to detect the radio button's value change without resubmit the form?

I've got 2 radio buttons within a form here,
<form action='' method='post' onsubmit='return checkForm(this, event)'>
<input type = 'radio' name='allow' value='allow' checked>Allow
<input type='radio' name='allow' value='disallow'>Disallow
</form>
And in the checkForm function, there is a piece of code to verify whether the user checks the Disallow button, if yes, show an alert to force the user to allow, if not, return true.
Yet, I found that when I first checked the Disallow button, and the sign showed, and then I change it to Allow, but there is still the alert sign popping saying that I should alter my choice to Allow
This is the checkForm function:
<script type="text/javascript">
function checkForm(form, event) {
var radio = document.getElementsByName("allow");
var counter=0;
for(i=0;i<radio.length;i++){
if(radio[i].value=="disallow"){
alert("Please allow the system to get your data!");
return false;
}
}
return true;
}
</script>
Any ideas? Thanks a lot.
You need to check if the option is checked or not:
<script type="text/javascript">
function checkForm(form, event) {
var radio = document.getElementsByName("allow");
var counter=0;
for(i=0;i<radio.length;i++){
if(radio[i].checked && radio[i].value=="disallow") {
alert("Please allow the system to get your data!");
return false;
}
}
return true;
}
</script>
Modern browsers:
function checkForm(form, event) {
if(document.querySelector('input[name="allow"]:checked').value=="disallow") {
alert("Please allow the system to get your data!");
return false;
}
return true;
}
I think I found some things wrong with your HTML code:
<input type='radio' name='allow' value='disallow' Disallow
This tag is not closed, it should be
<input type='radio' name='allow' value='disallow'> Disallow
Also, what version of HTML are you using? If you're using HTML5 or XHTML Strict, then you need to self-close:
<input type='radio' name='allow' value='disallow' /> Disallow

Javascript form validation, what is missing?

I can't get a form to validate no matter what I try, so I have dumbed it down alot to see if I could get ANYTHING to work, and still when I submit the form the javascript does not validate, and simply sends me to the next page no matter what. You guys see anything wrong??
HTML
<form id="myform" action="/" method="post" onsubmit="return Validate()">
<input id="form_name" type="text" name="name" placeholder="Name" />
<div id="error">Name too short</div>
<input type="submit" id="submit" name="submit" value="Enter" />
JAVASCRIPT IN HEAD
<script language="JavaScript" type="text/javascript">
function Validate() {
if (form.name.value == "") {
$('#error').show();
return false ;
}
return true ;
}
</script>
And in the CSS I have the display for the #error div set to none.
Ultimately I want to check that the user entered at least 4 characters in the text input field, if they didnt then I don't want the form submitted but rather show the error message. But for now I'm just checking to see if its empty to see if I can get anything to work. Any ideas?
First of all remove language from the script tag, it's deprecated.
Then you should not load your script in the head section. Instead put it where body ends to ensure that the HTML has loaded.
Also in your validate function you don't seem to actually target the correct ID's.
Use this:
function Validate() {
if ($('#form_name').val() === '') {
$('#error').show();
return false ;
}
return true ;
}
Replace your javascript for this
function Validate() {
// Use form_name instead of form.name
if (form_name.value == "") {
// This line will break if you do not have jquery.
$('#error').show();
return false ;
}
return true ;
}
Define IDs for tags and use jQuery to get those tags and check their values. For example, if the name tag had id="form_name" you could do something like this:
if ($("#form_name").val() == ""))
$('#error').show();
On the other hand, I recommend you to check jQuery Validate plug-in which is great for validating forms:
http://jqueryvalidation.org/
Instead of
if (form.name.value == "") {
use:
var nameField=document.getElementById("form_name");
if (nameField.value == "") {
Let me know if this works.

prevent form submission (javascript)

I have a form with a text input:
<form name="form1">
<cfinput type="text" name="text1" id="text1" onChange="someFunc();">
</form>
I only want it to submit in certain cases. (I run some error-checking first)
<script>
function someFunc() {
if (1==2) {
document.form1.submit();
} else {
alert("Not submitting");
}
</script>
The problem is: even though the alert is triggering fine, somehow, the form is still submitting (There are no other submit statements aside from the one!).
Many thanks if anyone can shed some light on this . . .
There's a fundamental flaw with this approach. You are currently telling the form that when text1 changes, then call someFunc(). If true, use JavaScript to submit the form. If false, go on about your business. If you hit enter in the text input, the form still submits. If there is a submit button that gets clicked, the form still submits.
The basic way to approach this is like so:
<form name="form1" onsubmit="return someFunc()">
<input type="text" name="text1" id="text1">
</form>
When the from is submitted, call someFunc(). This function must return either true or false. If it returns true, the form submits. If false, the form does nothing.
Now your JavaScript needs a slight alteration:
<script>
function someFunc() {
if (1==2) {
return true;
} else {
alert("Not submitting");
return false;
}
}
</script>
You can still have other functions called when a field is changed, but they still won't manage the form's final submission. In fact, someFunc() could call the other functions to do a final check before returning true or false to the onsubmit event.
EDIT: Documentation on implicit form submission.
EDIT 2:
This code:
$(document).ready(function(){
$("#text1").on('change', function(event){
event.preventDefault();
});
});
is stopping the default processing for the change event associated with that element. If you want to affect the submit event, then you'd do this:
$(document).ready(function(){
$("#form1").submit(function(event){
event.preventDefault();
});
});
Which would allow you to do something like this:
$(document).ready(function(){
$("#form1").submit(function(event){
if ( $('#text1').val() !== "foo" ) {
alert("Error");
event.preventDefault();
}
});
});
var form = document.getElementById("Your Form ID");
form.addEventListener("submit", function (e) {
if ("Your Desired Conditions.") {
e.preventDefault();
}
});
use the following code it will work perfectly fine
<form onsubmit="return false;" >

Comparing html text inputs and redirecting to another page using Javascript

I am brand new to Javascript and am just using it to make a simple website for fun. I have tried searching the web but am still stuck, so if you could help me or redirect me towards other help, that would be great.
I am trying to use Javascript to send a user to another html page in my site if their input matches my criteria. So I wanted to use an if/else statement to do this: if the text input equals ODQHVHMJKD, it would send them to page3.html. However when I try this on the browser, nothing happens--it just takes me to an identical page with ?codebox1=f&button1=Submit at the end of the address.
Here is my script section:
<script type="text/javascript">
function testResults (form) {
if (form.codebox1.value == ODQHVHMJKD) {
window.location.pathname = 'page3.html';
}
else {
window.alert("Try again!");
}
};
</script>
Here are my form elements:
<form name="form1" method="GET">
<input name="codebox1" type="text" />
<input name="button1" type="submit" value="Submit" onClick="testResults(this.form)"/>
</form>
Can you help me so that I can get this to work? It's more than likely I've done everything completely wrong--any help is appreciated!
Try this,
function testResults (form) {
if (form.codebox1.value == "ODQHVHMJKD") {
window.location = 'page3.html';
}
else {
window.alert("Try again!");
}
return false;
};
You need to prevent the default action of the form. In the submit event, call e.preventDefault(); or return false In addition, you need quotation marks around ODQHVHMJKD
Js Fiddle: http://jsfiddle.net/prankol57/Ht45t/
Maybe this can help you.
<form name="form" onsubmit="Results()">
<input type="text" name="fname" id="val">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function Results() {
var val = document.getElementById('val').value;
if (val == "ODQHVHMJKD") {
window.location = 'page3.html';
} else {
window.alert("Try again!");
}
};
</script>

Avoid page submission on button click if condition false in javascript

I am checking the textbox value in javascript. and saving to database. where as my save is of submit type. I want if textbox value is greater than 100 then it should alert. and after alert , page should not submit.
Firstly, bind the click event of that button to a function. Secondly, use event.prevent default to stop that button from submitting the form. Thirdly, validate the value you want. If validated, use form id to submit the form. Something like this:
$("#ButtonId").on("click", function(event) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
if ($("#InputBoxID").val() < 100) {
$("#FormId").submit();
}
else {
alert("your message");
}
});
Above code is in jQuery, so do not forget to add the reference to jQuery.
I think you're looking for something like:
<form id="myForm" onsubmit="return validateForm();">
<input type="text" id="textfield"/>
<button type="submit">submit</button>
</form>
<script>
function validateForm(){
var value=parseInt(document.getElementById('textfield').value);
if(value>100){
alert('value is no good. larger then 100');
return false;
}
}
</script>
If you can show me your code I'd be happy to help you implementing such a feature.
Here you have an example of how to do it. I used a limit of 10 characters to make the test easier: Try if yourself
HTML:
<input type="text" id="myTextBox" onkeyup="checkValue(this)" maxlength="10"></input>
<input id="sendButton" type="submit" value="SEND"></inpu
JAVASCRIPT:
function checkValue(textbox) {
if (textbox.value.length > 10) {
alert("TEXT TOO LONG");
document.getElementById("sendButton").disabled = true;
}
else
document.getElementById("sendButton").disabled = false;
}

Categories