On window load, only radio buttons and lable is display. Onclick of radio button only, want to put textboxes and buttons in front of each lable of radio buttons. Eg. Email me(lable)-textbox-email button-validation error in one single line. In code, it comes below the every lable which i don't want. I don't know how to do this. can anybody please tell me how to do this... Thanks in advance.
window.onload=function()
{
document.getElementById("emailhide").style.display = 'none';
document.getelementByid("phonehide").style.display = 'none';
document.getelementByid("chathide").style.display = 'none';
document.getelementByid("quehide").style.display = 'none';
}
function showemail()
{
if(document.getElementById("emailbtn").checked)
{
document.getElementById("emailhide").style.display='block';
document.getElementById("emailid").style.display='block';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='none';
}
}
function showphn()
{
if(document.getElementById("callbtn").checked)
{
document.getElementById("emailhide").style.display='none';
document.getElementById("emailid").style.display='none';
document.getElementById("phonehide").style.display='block';
document.getElementById("phoneno").style.display='block';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='none';
}
}
function showchat()
{
if(document.getElementById("chatbtn").checked)
{
document.getElementById("emailhide").style.display='none';
document.getElementById("emailid").style.display='none';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='block';
document.getElementById("chat").style.display='block';
document.getElementById("quehide").style.display='none';
}
}
function showquotes()
{
if(document.getElementById("quebtn").checked)
{
document.getElementById("emailhide").style.display='none';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='block';
document.getElementById("que").style.display='block';
}
}
function validation1()
{
document.getElementById("emailid").innerHTML="";
var emailpattern=/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
if(document.form1.email_id.value=="")
{
//alert(document.getElementById("email_id").value);
document.getElementById("emailid").innerHTML="fields are mandetory";
document.form1.email_id.focus();
return false;
}
else if(!emailpattern.test(document.form1.email_id.value))
{
document.getElementById("emailid").innerHTML="enter valid id";
document.form1.email_id.focus();
return false;
}
return true;
}
function validation2()
{
document.getElementById("phoneno").innerHTML="";
var phoneno = /^[0-9]{10}$/;
if(document.form2.phn.value=="")
{
document.getElementById("phoneno").innerHTML="enter phone number";
document.form2.phn.focus();
return false;
}
else if(!phoneno.test(document.form2.phn.value))
{
document.getElementById("phoneno").innerHTML="Your contact Number must be 10 digits number.";
document.form2.phn.focus();
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form name="form1" method="post">
<input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />
Email me :<span id="emailhide" style="display:none"><input type="text" size="50" name="email" id="email_id" placeholder="*************" /><input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" /></span>
<span id="emailid"></span></form>
<form name="form2" method="post">
<input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />
Call Me :<span id="phonehide" style="display:none"><input type="text" size="50" name="phn" id="call" placeholder="*************" /><input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" /></span>
<span id="phoneno"></span>
</form>
<input type="radio" value="chat" name="select" id="chatbtn" onclick="showchat()" />
Chat with me<span id="chathide"><input style="display:none" type="submit" name="chat" id="chat" value="Go"/></span>
<br />
<input type="radio" value="que" name="select" id="quebtn" onclick="showquotes()" />
Detail Questionnarie<span id="quehide"><input type="submit" name="que" id="que" value="Go" style="display:none"/></span>
window.onload=function()
{
document.getElementById("emailhide").style.display = 'none';
document.getelementByid("phonehide").style.display = 'none';
document.getelementByid("chathide").style.display = 'none';
document.getelementByid("quehide").style.display = 'none';
}
function showemail()
{
document.getElementById("emailhide").style.display='block';
document.getElementById("emailid").style.display='block';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='none';
}
function showphn()
{
document.getElementById("emailhide").style.display='none';
document.getElementById("emailid").style.display='none';
document.getElementById("phonehide").style.display='block';
document.getElementById("phoneno").style.display='block';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='none';
}
function showchat()
{
if(document.getElementById("chatbtn").checked)
{
document.getElementById("emailhide").style.display='none';
document.getElementById("emailid").style.display='none';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='block';
document.getElementById("chat").style.display='block';
document.getElementById("quehide").style.display='none';
}
}
function showquotes()
{
document.getElementById("emailhide").style.display='none';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='block';
document.getElementById("que").style.display='block';
}
function validation1()
{
document.getElementById("emailid").innerHTML="";
var emailpattern=/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
if(document.form1.email_id.value=="")
{
//alert(document.getElementById("email_id").value);
document.getElementById("emailid").innerHTML="fields are mandetory";
document.form1.email_id.focus();
return false;
}
else if(!emailpattern.test(document.form1.email_id.value))
{
document.getElementById("emailid").innerHTML="enter valid id";
document.form1.email_id.focus();
return false;
}
return true;
}
function validation2()
{
document.getElementById("phoneno").innerHTML="";
var phoneno = /^[0-9]{10}$/;
if(document.form2.phn.value=="")
{
document.getElementById("phoneno").innerHTML="enter phone number";
document.form2.phn.focus();
return false;
}
else if(!phoneno.test(document.form2.phn.value))
{
document.getElementById("phoneno").innerHTML="Your contact Number must be 10 digits number.";
document.form2.phn.focus();
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form name="form1" method="post">
<input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />
Email me :<input type="text" size="50" name="email" id="email_id" placeholder="*************" /><input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" />
<span id="emailid"></span></form>
<form name="form2" method="post">
<input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />
Call Me :<input type="text" size="50" name="phn" id="call" placeholder="*************" /><input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" />
<span id="phoneno"></span>
</form>
<input type="radio" value="chat" name="select" id="chatbtn" onclick="showchat()" />
Chat with me</a>
<br />
<input type="radio" value="que" name="select" id="quebtn" onclick="showquotes()" />
Detail Questionnarie<span id="quehide"><input type="submit" name="que" id="que" value="Go" style="display:none"/></span>
Related
I am developing a Registration form for my assignment. All things are working but when I click on the submit button, the warning messages on the label are just shown for a very short period of time. I am using eclipse and apache tomacat. here is my code.
JSP Code:
<form method="post">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<label id="itemid_l">Item Id:</label> <input type="text" name="itemid" id="itemid"/><br/>
<label id="itemname_l">Item Name:</label> <input type="text" name="itemname" id="itemname"/><br/>
<label id="uname_l">Your Name:</label> <input type="text" name="uname" id="uname"/><br/>
<label id="email_l">Your Email Address:</label> <input type="text" name="email" id="email"/><br/>
<label id="amount_l">Amount Bid:</label> <input type="number" name="amount" id="amount"/><br/>
<label id="autoincrement_l">Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement"><br/>
<input type="submit" value="Submit Bid" onclick="validate()"/>
</form>
Javascript Code:
function validate()
{
var itemid=document.getElementById("itemid").value;
var itemname=document.getElementById("itemname").value;
var uname=document.getElementById("uname").value;
var email=document.getElementById("email").value;
var amount=document.getElementById("amount").value;
var autoincrement=document.getElementById("autoincrement");
var flag=true;
if(itemid.length==0){
flag=false;
document.getElementById("itemid_l").innerHTML="<b>Required field!</b> Item Id: ";
}
if(itemname.length==0){
flag=false;
document.getElementById("itemname_l").innerHTML="<b>Required field!</b> Item Name: ";
}
if(uname.length==0){
flag=false;
document.getElementById("uname_l").innerHTML="<b>Required field!</b> Your Name: ";
}
if(email.length==0){
flag=false;
document.getElementById("email_l").innerHTML="<b>Required field!</b> Your Email Address: ";
}
if(amount.length==0){
flag=false;
document.getElementById("amount_l").innerHTML="<b>Required field!</b> Amount Bid: ";
}
if(!autoincrement.checked){
flag=false;
document.getElementById("autoincrement_l").innerHTML="<b>Required field!</b> Auto-increment to match other bidders:: ";
}
if(flag==true){
alert('Good job!!');
return true;
}
else
{
document.getElementById("msg").innerHTML="Required data is missing. Please fill";
return false;
}
}
Any suggestion will help me a lot..
You can use onsubmit event so that whenever user click on submit button this gets call and if the function validate() return true form will get submitted else it will not submit form .
Demo code :
function validate() {
var itemid = document.getElementById("itemid").value;
var itemname = document.getElementById("itemname").value;
var uname = document.getElementById("uname").value;
var email = document.getElementById("email").value;
var amount = document.getElementById("amount").value;
var autoincrement = document.getElementById("autoincrement");
var flag = true;
if (itemid.length == 0) {
flag = false;
document.getElementById("itemid_l").innerHTML = "<b>Required field!</b> ";
} else {
//if fill remove error any
document.getElementById("itemid_l").innerHTML = ""
}
if (itemname.length == 0) {
flag = false;
document.getElementById("itemname_l").innerHTML = "<b>Required field!</b> ";
} else {
//if fill remove error any
document.getElementById("itemname_l").innerHTML = "";
}
if (uname.length == 0) {
flag = false;
document.getElementById("uname_l").innerHTML = "<b>Required field!</b> ";
} else {
document.getElementById("uname_l").innerHTML = "";
}
if (email.length == 0) {
flag = false;
document.getElementById("email_l").innerHTML = "<b>Required field!</b> ";
} else {
document.getElementById("email_l").innerHTML = "";
}
if (amount.length == 0) {
flag = false;
document.getElementById("amount_l").innerHTML = "<b>Required field!</b>";
} else {
document.getElementById("amount_l").innerHTML = "";
}
if (!autoincrement.checked) {
flag = false;
document.getElementById("autoincrement_l").innerHTML = "<b>Required field!</b>";
} else {
document.getElementById("autoincrement_l").innerHTML = "";
}
if (flag == true) {
document.getElementById("msg").innerHTML = "";
alert('Good job!!');
flag = true; //do true
} else {
document.getElementById("msg").innerHTML = "Required data is missing. Please fill";
flag = false; //do false
}
return flag; //return flag
}
<!--add onsubmit -->
<form method="post" id="forms" onsubmit="return validate()">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<!--give id to span instead of label-->
<label> <span id="itemid_l"></span>Item Id:</label> <input type="text" name="itemid" id="itemid" /><br/>
<label><span id="itemname_l"></span>Item Name:</label> <input type="text" name="itemname" id="itemname" /><br/>
<label><span id="uname_l"></span>Your Name:</label> <input type="text" name="uname" id="uname" /><br/>
<label><span id="email_l"></span>Your Email Address:</label> <input type="text" name="email" id="email" /><br/>
<label><span id="amount_l"></span>Amount Bid:</label> <input type="number" name="amount" id="amount" /><br/>
<label><span id="autoincrement_l"></span>Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement"><br/>
<input type="submit" value="Submit Bid" />
</form>
Also , if you just need to check for empty field you can just use required attribute on input tag like below :
<form method="post">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<!--added required attribute-->
<label id="itemid_l">Item Id:</label> <input type="text" name="itemid" id="itemid" required/><br/>
<label id="itemname_l">Item Name:</label> <input type="text" name="itemname" id="itemname" required/><br/>
<label id="uname_l">Your Name:</label> <input type="text" name="uname" id="uname" required/><br/>
<label id="email_l">Your Email Address:</label> <input type="text" name="email" id="email" required/><br/>
<label id="amount_l">Amount Bid:</label> <input type="number" name="amount" id="amount"required/><br/>
<label id="autoincrement_l">Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement" required><br/>
<input type="submit" value="Submit Bid"/>
</form>
<!DOCTYPE html>
<html><head><title>CT Traders</title>
<style>
fieldset {width:40%; margin:0px 0px 10px 1%;}
legend {padding:2px; text-indent:5px;}
h2, p {margin-left: 1%;}
input[type="submit"], input[type="reset"]
{display:inline; float:none;}
</style>
<script>
//suggested logic for the validateInput() function
function validateInputs()
{
//check payment method
var methodChecked = false;
for (var i=0; i <document.frmCustOrders.class.length;i++)
{
if (document.frmCustOrders.class[i].checked ==true)
{
classChecked = true;
vClass = document.frmCustOrders.class[i].value;
}
}
//check customer index value
var customerIndex = document.getElementById("customer").value;
//retrieve order quantity
var qty = document.getElementById("qty").value;
//validate form data
if (customerIndex == -1) //validate customer
{
alert("Please select a customer.")
return false;
}
else if () //validate qty
{
}
else if (fsClassChecked == false) //validate payment method
{
alert("Please select a payment method.")
return false;
}
else //output
{
orderEntries = customer+ "\n"+ qty+ "\n"+vClass;
alert(orderEntries);
return false;
}
}
</script>
</head>
<body>
<h2>Customer Order</h2>
<form name="frmCustOrders" id="frmCustOrders"
onsubmit="return validateInputs();" action="">
<fieldset id="fsCustomer">
<legend>Customer List</legend>
<select name="customer" id="customer" size="3">
<option>107 Paula Harris</option>
<option>232 Mitch Edwards</option>
<option>229 BTC</option>
</select>
</fieldset>
<p>
<label for="qty">Order Quantity: </label>
<input type="text" name="qty" id="qty" />
</p>
<fieldset id="fsClass">
<legend>Payment Method</legend>
<input type="radio" name="method" id="check" value="check" />
Check<br />
<input type="radio" name="method" id="creditCard" value="credit card" />
Credit Card<br />
<input type="radio" name="method" id="debitCard" value="debit card" />
Debit Card
</fieldset>
<p> <input type="submit" value="Submit" />
<input type="reset" value="Reset" /></p>
</form>
</body>
</html>
I'm having issues getting an output box that retrieves the selections on the form.
Also, in one of my if statements I'm assigned to check if the value is between 1 and 999 but I'm drawing a total blank on this. I'm new to coding (Javascript) and this is my first class. Any help with getting this to work would be greatly appreciated.
There are some issues with your code
Redundant else if ()
fsClassChecked variable not declared.
Redundant class when iterate elements document.frmCustOrders.class
Use wrong variable customer should be customerIndex
Wrong condition (customerIndex == -1) change to (customerIndex == "")
//suggested logic for the validateInput() function
function validateInputs()
{
//check payment method
var methodChecked = false;
var fsClassChecked = false;
for (var i=0; i <document.frmCustOrders.length;i++)
{
if (document.frmCustOrders[i].checked ==true)
{
fsClassChecked = true;
vClass = document.frmCustOrders[i].value;
}
}
//check customer index value
var customerIndex = document.getElementById("customer").value;
//retrieve order quantity
var qty = document.getElementById("qty").value;
//validate form data
if (customerIndex == "") //validate customer
{
alert("Please select a customer.")
return false;
}
else if(qty == "" || qty < 1 || qty > 999){
alert("Please enter qty 1-999.")
return false;
}
else if (fsClassChecked == false) //validate payment method
{
alert("Please select a payment method.")
return false;
}
else //output
{
orderEntries = customerIndex + "\n"+ qty+ "\n"+vClass;
alert(orderEntries);
return false;
}
return false;
}
<!DOCTYPE html>
<html><head><title>CT Traders</title>
<style>
fieldset {width:40%; margin:0px 0px 10px 1%;}
legend {padding:2px; text-indent:5px;}
h2, p {margin-left: 1%;}
input[type="submit"], input[type="reset"]
{display:inline; float:none;}
</style>
<script>
</script>
</head>
<body>
<h2>Customer Order</h2>
<form name="frmCustOrders" id="frmCustOrders"
onsubmit="return validateInputs();" action="#">
<fieldset id="fsCustomer">
<legend>Customer List</legend>
<select name="customer" id="customer" size="3">
<option>107 Paula Harris</option>
<option>232 Mitch Edwards</option>
<option>229 BTC</option>
</select>
</fieldset>
<p>
<label for="qty">Order Quantity: </label>
<input type="text" name="qty" id="qty" />
</p>
<fieldset id="fsClass">
<legend>Payment Method</legend>
<input type="radio" name="method" id="check" value="check" />
Check<br />
<input type="radio" name="method" id="creditCard" value="credit card" />
Credit Card<br />
<input type="radio" name="method" id="debitCard" value="debit card" />
Debit Card
</fieldset>
<p> <input type="submit" value="Submit" />
<input type="reset" value="Reset" /></p>
</form>
</body>
</html>
I am struggling to understand where there is a mistake.
After many tries, I tend to think that it's something about overalcheck()...
The append, clearelement and writeto are the additional mini functions and they are totally fine.
So, this script checks the form, and if everything is ok, opens a new page. However, if a field is empty or has a wrong type, it shows the relative error message (or a list of error messages).
I made a lot of variations, sometimes it opens without a completed form (like the code below), sometimes it shows the error message for 1 field only and then, and even if you complete all fields, it still doesnt open a new page.
I would appreciate your help.
<script>
function overallcheck ()
{
if(!checkname() || !checkemail() || !checkjob())
{
writeTo("problemArea","Error messages area");
if(!checkname())
writeTo("problemArea","Please insert a valid name");
if(!checkemail())
writeTo("problemArea","Please insert a valid email");
if(!checkjob())
writeTo("problemArea","Please insert your job");
return false;
}
return true;
}
function checkname()
{
clearElement("problemArea");
var fullname = document.forms['form'].fullname.value;
if (fullname.length == 0 || !isNaN(fullname))
return false;
}
function checkemail()
{
clearElement("problemArea");
var mail = document.forms['form'].Email.value;
if (mail == '' || mail.indexOf('#') == -1 || mail.indexOf('.') == -1)
return false;
}
function checkjob()
{
clearElement("problemArea");
var i;
for (i=0;i<4;i++)
{
if (document.forms['form'].job[i].checked) {return true;}
}
return false;
}
</script>
<body>
<form onsubmit="return overallcheck();" action="res.html" id=form target="_blank" method="GET">
<table>
<tr>
<td><b><p>blabla?</p></b> </td>
<td> <input type="text" name="fullname" size="20" placeholder="Enter a valid name"/> </td>
</tr>
<tr>
<td><b><p> E-mail: </p></b></td>
<td><input type="email" name="email" maxlength="15" size = "20" placeholder="Enter a valid email address"/> </td>
</tr>
<tr>
<p><td><b><p>bla?</td></p>
<td>1<input type="radio" name="job" value="gov" /><br/>
2<input type="radio" name="job" value="pri" /><br/><div id="problemArea"> </div>
3<input type="radio" name="job" value="unem" /><br/>
4<input type="radio" name="job" value="other" /><br/>
</td></tr>
</table>
<p>
<button type="submit" onclick="" >clickme</button>
</form>
</body>
</html>
Track each error type with it's own div. Wrap overallcheck in a try catch to and alert errors. This helped find the "Email" error.
function writeTo(id, msg) {
document.getElementById(id).innerHTML += "<p>" + msg + "</p>";
}
function clearElement(id) {
document.getElementById(id).innerHTML = "";
}
function overallcheck() {
try {
if (!checkname() || !checkemail() || !checkjob()) {
if (!checkname())
writeTo("problem_fullname", "Please insert a valid name");
if (!checkemail())
writeTo("problem_email", "Please insert a valid email");
if (!checkjob())
writeTo("problem_blah", "Please insert your job");
return false;
}
return true;
} catch (err) {
alert(err);
}
}
function checkname() {
clearElement("problem_fullname");
var fullname = document.forms['form'].fullname.value;
if (fullname.length == 0 || !isNaN(fullname)) {
return false;
}
return true;
}
function checkemail() {
clearElement("problem_email");
var mail = document.forms['form'].email.value; //Email.value;
if (mail == '' || mail.indexOf('#') == -1 || mail.indexOf('.') == -1) {
return false;
}
return true;
}
function checkjob() {
clearElement("problem_blah");
var i;
for (i = 0; i < 4; i++) {
if (document.forms['form'].job[i].checked) {
return true;
}
}
return false;
}
td {
vertical-align: text-top;
}
.problem {
color: red;
}
<form onsubmit="return overallcheck();" action="res.html" id=form target="_blank" method="GET">
<table>
<tr>
<td><b><p>blabla?</p></b>
</td>
<td>
<input type="text" name="fullname" size="20" placeholder="Enter a valid name" />
<div id="problem_fullname" class="problem"></div>
</td>
</tr>
<tr>
<td><b><p> E-mail: </p></b>
</td>
<td>
<input type="email" name="email" maxlength="15" size="20" placeholder="Enter a valid email address" />
<div id="problem_email" class="problem"></div>
</td>
</tr>
<tr>
<p>
<td><b><p>bla?</td></p>
<td>
1<input type="radio" name="job" value="gov" /><br/>
2<input type="radio" name="job" value="pri" /><br/>
3<input type="radio" name="job" value="unem" /><br/>
4<input type="radio" name="job" value="other" /><br/>
<div id="problem_blah" class="problem"> </div>
</td></tr>
</table>
<p>
<button type="submit" onclick="" >clickme</button>
</form>
So I made a chat with textboxs. If I press ENTER the chat send the message. It's fine, but in "Warning" thing this isn't work. When I'm pressing Enter, it isn't work. Can someone help me?
//This is for normal users:
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
<br>
//This is for moderators:
<form name="moderating" method="post" action="">
<hr align="center">
<br>
<p><b>Write in color:</b></p>
<script type="text/javascript" src="color_picker/jscolor.js"></script>Select color: <input class="color" name="color_value" type="text" id="color_value" value="FF0F0F">
<input name="colormsg" type="text" id="colormsg" size="25" />
<input name="submitcolormsg" type="submit" id="submitcolormsg" value="Send" />
<br><br>
<p><b>Warning</b></p>
//Is this wrong?! :
<input name="warningmsg" type="text" id="warningmsg" size="63" />
<input name="submitwarningmsg" type="submit" id="submitwarningmsg" value="Warning" />
<br><br>
<p><b>Clear chat log</b></p>
<input name="clear_button" type="submit" id="clear_button" value="Clear" />
<br><br>
<p><b>Turn on/off chat</b></p>
<input type="radio" name="chat_status_group" id="on" value="on" checked><b>On</b> -<input type="radio" name="chat_status_group" id="off" value="off"><b>Off</b> <input name="chat_status_button" type="submit" id="chat_status_button" value="Ok" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("***.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
$("#submitcolormsg").click(function(){
var clientcolormsg = $("#colormsg").val();
var color = $("#color_value").val();
$.post("***.php", {
text: clientcolormsg,
color: color
});
$("#colormsg").attr("value", "");
return false;
});
//And here is the wrong?! :
$("#submitwarningmsg").click(function(){
var post_warningmsg = $("#warningmsg").val();
$.post("***.php", {text: post_warningmsg});
$("#warningmsg").attr("value", "");
return false;
});
$("#clear_button").click(function(){
$.post("clear.php");
return false;
});
$("#chat_status_button").click(function(){
var statusmsg = "on";
if(document.getElementById('on').checked) {
statusmsg = "on";
} else {
statusmsg = "off";
}
$.post("chat_status.php", {
text: statusmsg
});
return false;
});
.
.
.
});
</script>
</body>
</html>
I think the problem is here:
$("#submitwarningmsg").click(function(){
var post_warningmsg = $("#warningmsg").val();
$.post("***.php", {text: post_warningmsg});
$("#warningmsg").attr("value", "");
return false;
});
why
$("#warningmsg").attr("value", "");
isn't work?
It doesn't work because you are only checking for a click, not submit. Try changing the last code to:
$("#submitwarningmsg").submit(function(e){
e.preventDefault();
var post_warningmsg = $("#warningmsg").val();
$.post("***.php", {text: post_warningmsg});
$("#warningmsg").val("");
return false;
});
Besides, you are forgetting to open your form in the last 'form':
<form>
I have a form where i have JS form validation. But validation process is not working. The inserting process in working fine.
Below is the form for inserting the data into mysql Database-
<?php
session_start();
include("includes/connection.php");
include("header.php");
include("includes/adminmenu.php");
if(isset($_SESSION['username']))
{
//echo $_SESSION['username'];
?>
<!--Javasript Validation File Import -->
<script type="text/javascript" src="js/qcheck.js"></script>
<script type="text/javascript" language="JavaScript">
function HidePart(d) { document.getElementById(d).style.display = "none"; }
function ShowPart(d) { document.getElementById(d).style.display = "block"; }
function CheckboxChecked(b,d)
{
if(b) { ShowPart(d); }
else { HidePart(d); }
}
</script>
<br />
<div class="userstat">
<div style="background-color:#666666; text-align:center; font-weight:bold; color:#FFFFFF; font-size:24px;"><span>Insert A new Question</span></div>
<br />
<div class="statdata">
<form action="includes/insertq.php" method="POST" name="qform" onSubmit="return valide()">
<div style="text-align:center;">
<select name="subject" size="0">
<option selected="0" value="">Select Subject</option>
<option value="bangla">Bangla</option>
<option value="english">English</option>
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="math">Mathematics</option>
<option value="biology">Biology</option>
<option value="gk">General knowledge</option>
</select>
</div>
<br /><br />
<label for="question">Write Down the Question below</label>
<textarea name="question" rows="3" cols="40"></textarea><br /><br />
<label for="ans">Options</label><br /><br />
<label for="option1">a.</label>
<input type="text" name="option1" size="40" /><br />
<label for="option2">b.</label>
<input type="text" name="option2" size="40" /><br />
<label for="option3">c.</label>
<input type="text" name="option3" size="40" /><br />
<label for="option4">d.</label>
<input type="text" name="option4" size="40" /><br /><br />
<label for="correct">Correct.</label><br />
<input type="text" name="correct" size="40" /><br /><br /><br />
<div style="text-align:center;">
<input type="submit" name="submit" value="Submit Question" />
</div>
<br />
<br />
</form>
</div>
</div>
</body>
<?php
}
else
{
header("location: admin.php");
}
?>
<?php
include("includes/footer.php");
?>
and the Javascript file is
function valide()
{
var subject=document.forms["qform"]["subject"].value;
var question=document.forms["qform"]["question"].value;
var option1=document.forms["qform"]["option1"].value;
var option2=document.forms["qform"]["option2"].value;
var option3=document.forms["qform"]["option3"].value;
var option4=document.forms["qform"]["option4"].value;
var correct=document.forms["qform"]["correct"].value;
if(subject == null || Subject == "Select Subject")
{
alert("Select subject Type");
return false;
}
else if(question==null || question=="" || question.length<5)
{
alert("Insert Valid question");
return false;
}
else if(option1==null || option1=="")
{
alert("Insert Option 1.");
return false;
}
else if(option2==null || option2=="")
{
alert("Insert Option 2.");
return false;
}
else if(option3==null || option3=="")
{
alert("Insert option 3.");
return false;
}
else if(option4==null || option4=="")
{
alert("Insert option 4.");
return false;
}
else if(correct==null || correct=="")
{
alert("Insert correct option.");
return false;
}
}
case matters
if(subject == null || Subject == "Select Subject")
^
Subject !== subject
Also value is not going to be null. You should be checking for a length of zero.