Can any one please tell me the wrong of this code, I just want to j=give an error message when the first_name is empty.
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var first_name=$('#first_name').val();
if(first_name==="" ){
$('#first_name').css('background-color','#D8D8D8');
$('#fNameErr').show();
return false;
}
else{
$('#first_name').css('background-color','#FFFFFF');
$('#fNameErr').hide();
return true;
}
});
});
</script>
HTML
<form name="myForm" action="../controller/users.php" method="POST"
enctype="multipart/form-data" >
<table align="left" width="700" height="330">
<tbody>
<tr>
<td>First Name: </td>
<td><input type="text" name="first_name" value=""size="45" id="first_name"/>
<div id="fNameErr" class="err"><b>Please Enter First Name</b></div></td>
</tr>
First of all i need to know whether you downloaded jquery file from ,if not do it first.. else jquery wont work.. follow this link http://code.jquery.com/jquery-1.11.1.min.js, save this file in the folder where is your code is...name of the file i used is 'jquery-1.11.1.min.js'
then there was some more mistakes in your code. you need to give a submit button first with the id 'submit', which you used in your script's 3rd line, then need to close form tag..
correct code is..
<html><script src="jquery-1.11.1.min.js"></script><script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var first_name=$('#first_name').val();
if(first_name=="" ){
$('#first_name').css('background-color','#D8D8D8');
$('#fNameErr').show();
return false;
}
else{
$('#first_name').css('background-color','#FFFFFF');
$('#fNameErr').hide();
return true;
}
});
});
</script>
<body>
<form name="myForm" action="../controller/users.php" method="POST" enctype="multipart/form-data">
<table align="left" width="700" height="330">
<tbody>
<tr>
<td>First Name: </td>
<td><input type="text" name="first_name" value=""size="45" id="first_name"/>
<div id="fNameErr" class="err"><b>Please Enter First Name</b></div></td>
</tr>
<input type="submit" id="submit" value="submit">
</form>
</body>
</html>
try to learn basics first.. Accept my answer if it helps.. :)
Related
I'm working on a form validation project that requires multiple input fields connected to a single submit button. I more or less figured the button out, but I'm having an issue getting the functions themselves to work properly. I currently only have three of the eleven fields typed up for testing, but what the page should do is let you know which fields are invalid when there is nothing filled out in them (changing text/background colors, message below, etc).
The issue I'm having is that when the requirements for the first field (Gift Card Number) are met, it acts as though there isn't any issues anywhere, regardless of whether or not the other input fields (First name, Last name) have been filled. They all seem to function correctly if none of the fields are filled, but my concern is that the functions seem to be firing in order and first one to work negates all the ones after (for example, Gift Card prevents First and Last, First prevents Last, etc).
Any ideas where I've gone wrong here? I'll include my html and my javascript. (Yes, I know the html is a bit ugly, I plan to move the material over to a div table later, just trying to get it to function for now) Any help appreciated as always!
HTML
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<table>
<tbody>
<tr id="rONE">
<td><h4>Gift Card Amount</h4>
<form name="giftForm" onsubmit="return validateGiftCard()" method="post" id="GiftCardForm">
<input type="text" name="giftInput">
<h5 id="giftMessage"></h5></td>
<input type="submit" value="Submit" style="display:none" />
<td></td>
</tr>
</form>
<tr id="rTWO-1">
<td><h4>Recipient's name</h4>
</td>
<td> </td>
</tr>
<tr id="rTWO-2">
<td>
<form name="firstForm" onsubmit="return validateRecipient()" method="post">
<input type="text" name="firstInput">
<br>
<h4>First</h4>
</form>
</td>
<td><form name="lastForm" method="post">
<input type="text" name="lastInput">
<br>
<h4>Last</h4></td>
</form>
</tr>
<tr>
<td><h5 id="recipientMessage"></h5></td></td>
<td> </td>
</tr>
</tbody>
</table>
<button type="submit" id="btn" form="GiftCardForm" value="Submit">Submit</button>
</body>
<footer>
<script src="Form Validation.js"></script>
</footer>
</html>
Javascript
document.getElementById('btn').addEventListener('click', function(){
validateGiftCard();
validateRecipient();
});
function validateGiftCard() {
valid = true;
if ( document.giftForm.giftInput.value == "" )
{
giftMessage.innerHTML = "This field is required";
document.getElementById("rONE").style.backgroundColor="#fff7f7"
valid = false;
}
return valid;
}
function validateRecipient() {
valid = true;
if ( document.firstForm.firstInput.value == "" )
{
recipientMessage.innerHTML = "This field is required";
document.getElementById("rTWO-1").style.backgroundColor="#fff7f7"
document.getElementById("rTWO-2").style.backgroundColor="#fff7f7"
valid = false;
}
return valid;
}
document.getElementById('btn').addEventListener('click', function(e) {
var v1 = validateGiftCard();
var v2 = validateRecipient();
console.log(v1, v2);
if (!v1 || !v2)
e.preventDefault();
});
function validateGiftCard() {
valid = true;
if (document.giftForm.giftInput.value == "") {
giftMessage.innerHTML = "This field is required";
document.getElementById("rONE").style.backgroundColor = "#fff7f7"
valid = false;
}
return valid;
}
function validateRecipient() {
valid = true;
if (document.firstForm.firstInput.value == "") {
recipientMessage.innerHTML = "This field is required";
document.getElementById("rTWO-1").style.backgroundColor = "#fff7f7"
document.getElementById("rTWO-2").style.backgroundColor = "#fff7f7"
valid = false;
}
return valid;
}
<table>
<tbody>
<tr id="rONE">
<td>
<h4>Gift Card Amount</h4>
<form name="giftForm" onsubmit="return validateGiftCard()" method="post" id="GiftCardForm">
<input type="text" name="giftInput">
<h5 id="giftMessage"></h5>
</form>
</td>
<input type="submit" value="Submit" style="display:none" />
<td></td>
</tr>
<tr id="rTWO-1">
<td>
<h4>Recipient's name</h4>
</td>
<td> </td>
</tr>
<tr id="rTWO-2">
<td>
<form name="firstForm" onsubmit="return validateRecipient()" method="post">
<input type="text" name="firstInput">
<br>
<h4>First</h4>
</form>
</td>
<td>
<form name="lastForm" method="post">
<input type="text" name="lastInput">
<br>
<h4>Last</h4>
</form>
</td>
</tr>
<tr>
<td>
<h5 id="recipientMessage"></h5>
</td>
<td> </td>
</tr>
</tbody>
</table>
<button type="submit" id="btn" form="GiftCardForm" value="Submit">Submit</button>
My html code is:
<table><tr><td onclick="submit_form_patient();")>
<form name="select_patient" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="27" />27</form>
</td></tr>
<tr><td onclick="submit_form_patient();")>
<form name="select_patient" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="49" />49</form></td></tr>
My Java script is:
<script>
function submit_form_patient()
{
document.forms["select_patient"].submit();
}
</script>
My form gets submitted but if I use $_POST to retrieve the values I get 27 all the time namely the first value I never get the other values.
Yours forms have same name. You need to name them differently.
And modify js code:
<script>
function submit_form_patient(formName)
{
document.forms[formName].submit();
}
</script>
And html code need to be like this
<table>
<tr>
<td onclick="submit_form_patient('select_patient');")>
<form name="select_patient" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="27" />27</form>
</td>
</tr>
<tr>
<td onclick="submit_form_patient('select_patient2');")>
<form name="select_patient2" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="49" />49</form>
</td>
</tr>
The name of the forms is the same. I don't know whether the standard handles this, but browsers pick the first matching item. So it's always going to be the first.
Create only one form, and based on the click POST the right value.
When you use document.forms["select_patient"].submit();, JS will find first form/element with that name.
Try this:
<script>
function submit_form_patient()
{
document.getElementsByName("select_patient")[0].submit();
document.getElementsByName("select_patient")[1].submit();
}
</script>
you can also create a for block to be more consistent.
i try to use confirm box but it does not work after 'OK' pressing
this is my confirm box
<script language="JavaScript">
{literal}
function confirmBox()
{
var where_to= confirm("Silmek istediğinizden emin misiniz?");
if (where_to== true)
return true;
else{
alert("Silme işleminden vazgeçtiniz yönlendiriliyorsunuz");
return false;
}
}
{/literal}
</script>
<form name="removeFortune" method="post" action="#">
<table border="0" name="tableArticle">
{foreach from=$articles value=article}
<tr>
<td><input type="checkbox" name="checkArticle[]" value="{$article.id}" /></td>
<td>{$article.title}</td>
</tr>
{/foreach}
</table>
<input type="submit" onclick="confirmBox()" name="removeArticle" value="Sil" />
<br /><br />
{$deleteMessage}
</form>
If you want it to submit after pressing OK, you need to change 1 simple thing. Add a return
onclick="return confirmBox()"
Although I would say:
onsubmit="return confirmBox()"
I have javascript code in a .js file which validates the text fields but it won't work when it's an external file. I mean when the code is separated from the JSP.
<script type="text/javascript">
function checkForm(form)
{
if(form.username.value == "")
{
alert("Error: Username cannot be blank!");
form.username.focus(); return false;
}
}
</script>
JSP
<HEAD><script type="text/javascript" src="check.js"></script></HEAD>
<form name="register" method="post" action="registerUser.jsp" onsubmit="return (checkForm(this) && false);">
<table summary="Register Form" cellspacing="15">
<tr>
<td align="right"> Username: </td> <td><input name="username" size=20 type="text"/></td> <td>*Min: 4 chars.</td>
</tr>
</table>
<div id="Buttons">
<p><input type="submit" value="Register">
<input type="reset" value="Reset Fields"></p>
</div>
</form>
You need to remove the tags
<script type="text/javascript">
</script>
from the external file.
The js file should only contains javascript code. The <script type="text/javascript"> line and the </script> line contain HTML code, not JavaScript. Remove them from the .js file.
It works ok for me. I know it sounds dumb, but did you removed the tags from the check.js file?
Now here is another problem..
my code:
<script type="text/javascript">
function validate_form ()
{
if ( document.myform.tele_caller.value == "" )
{
alert ( "Please insert the Name" );
return false;
}
else
{
return true;
}
}
</script>
and the form-
<form action="telecallerinfo.php?action=modify&id=<?php echo $id;?>" method="post" enctype="multipart/form-data" name="myform"
onsubmit="return validate_form ( );">
<table class="panel1">
<tr>
<td align="center">Caller Name:
<input name="tele_caller" type="text" size="15" value="<?php echo $tele_caller?>" /></td>
</tr>
<tr>
<td align="right">
<input name="submit" id="submit" type="image" src="images/submit.gif" width="60" onclick="this.form.submit();"/>
<img src="images/cancel.gif" height="25" width="70"/>
</td>
</tr>
</table>
</form>
now the validation is called and the alert box is also being displayed but the form is still being submitted. where is the mistake?
You're manually calling the submit() here:
onclick="this.form.submit();"
Just remove that onclick handler, there's no need for that handler, it'll happen automatically since it's inside the <form>.
Here's the comparison: your current code, with onclick (still submitting) vs. your code with onclick removed (only submitting when valid).
Remove onclick="this.form.submit(); from the input-submit tag.
Try to use input with type submit and no onclick event
<input type="submit" id="submit"/>
and you can put image in css
input#submit {
background-image: images/submit.gif;
width: 60px;
}