|
JavaScript - Onblur Event Not Allowing Form To Submit
I have an onfocus event that makes a textarea large and then an onblur event that sets it back to a smaller textarea. If I click the textarea the onfocus event is triggered but if I go straight to submit the form the onblur event is triggered and the form is not submitted unless i hit submit twice. How can i get the form to submit? Can i put an "if" statement in the onblur event to see if the form is being submitted then just submit the form otherwise run the onblur event?
Code: <style type="text/css">
.textarea {
background-color: #ffffff;
color: black;
font-family: Arial, sans-serif;
font-size: 8pt;
font-weight: normal;
border-style: solid;
border-width: 1px;
border-color: aaaaaa;
height: 18px;
width: 50%;
overflow: hidden;
}
.textarea2 {
background-color: #ffffff;
color: black;
font-family: Arial, sans-serif;
font-size: 8pt;
font-weight: normal;
border-style: solid;
border-width: 1px;
border-color: aaaaaa;
height: 100px;
width: 50%;
overflow: auto;
}
</style>
</head>
<body>
<script>
function enlargeBox(v,n,c){
document.theForm.elements[n].className='textarea2';
}
</script>
<form method="POST" name="theForm" action="newProcess.php">
site<br>
<textarea
class = "textarea"
name = "site"
onblur = "this.className='textarea'"
onfocus = 'enlargeBox(this.value,this.name,this.className)' rows="1" cols="20"> this is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textareathis is a test for this new texfield to textarea</textarea>
<br>
Contact:<br>
<input type="text" onclick="this.select();" name="contact" value="" class="textfieldlp" size="50">
<p> </p>
<p><input type="submit" value="submit" name="B1"></p>
</form>
Similar TutorialsHi everyone, The following code has an onblur event in the input fields so that if someone clicks out of the field without typing something in it, the original label, ie. 'First name' is reinserted into the field. The field is also being validated by some php code, however the onblur event creates a problem because the form still submits even if a name isn't typed into the field. It's assuming that 'First name' is an entry and therefore isn't validating it correctly. It was suggested that on the submit event of the form, there would be a function that checks if the value is First Name then return false, but then otherwise return true. As my javascript skills are very basic, I wondered if someone could help me with this code to solve this issue? Appreciate any help. Code: <input id="firstname" name="firstname" type="text" value="First name" onfocus="if (this.value == 'First name') this.value=''" onblur="if (this.value == '') this.value='First name'" />
<?php
if (ValidatedField('index_965','index_965')) {
if ((strpos((",".ValidatedField("index_965","index_965").","), "," . "1" . ",") !== false || "1" == "")) {
if (!(false)) {
?>
<span style="color: red"> First name is required </span>
<?php //WAFV_Conditional index.php index_965(1:)
}
}
}?>
Realizing that form input placeholders aren't universally recognized among browsers, I began changing all of mine using onblur and onfocus handlers instead. As an example, I used the following code, which works in most cases: Code: <input type="text" name="example" maxlength="5" value="Example" onblur="if(this.value=='') this.value='Example';" onfocus="if(this.value=='Example') this.value='';"/> At first, I coded all of the inputs without a value attribute. But, when the page initially loaded, the fields would load empty, and the value/placeholder wouldn't appear until the field had been "focused" and then "blurred" again. Adding the value attribute seemed to correct that problem, again, for the most part. I have some text fields that appear only after I select a particular radio button or select option. Problem is, when the radio is clicked, the field appears, but even with the value attribute in place, the field appears void. I'm not sure what is different, or what I'm doing wrong. Here's the javascript code with the radio button (note:everything works except that the "placeholder" doesn't show when the field first appears): Code: function showfield() {
document.forms[0].otherRelation.value = "";
document.getElementById("newBox").style.display = "none";
var r = document.forms[0].relation;
var len = r.length;
for (var i =0; i<len; i++) {
if (r[i].checked && r[i].value == "Otherrelation" ) {
document.getElementById("newBox").style.display = "inline";
}
}
}
<input type="radio" name="relation" value="Otherrelation" onclick="showfield()"/>Other
<span id = "newBox" style="display:none">:
<input type = "text" name="otherRelation" size="35" value="Your Relationship" onblur="if(this.value=='') this.value='Your Relationship';" onfocus="if(this.value=='Your Relationship') this.value='';"/>
</span>
Thanks for any help. Sorry so long. Hi, I have a problem in javascript, where entering a value in the textbox during onblur I am doing a refresh to bring in the updated records from the DB , before the on blur refresh is completed if the user clicks the search button (onclick) during the first click nothing is happening as the refresh is still going on. During the second click when the on blur refresh is completed it will open a popup. The problem here is I am unable to disable/inactivate the search button untill the refresh is completed as well as I dont have any control over the refresh time as well. This is like already an event is in progress and where we are invoking another event which is not having any effect. In such case how i can handle this scenario? Thanks. Hello all, As this is an active javascript programming forum...i'm really hoping i'll get a solution for my problem...please help me out.... I have a html: text inside a logic:iterate block like this.. <logic:iterate name="AllocationsForm" property="newSearchAllocations" id="allocations" indexId="myindex" > <html:text name="allocations" property="newStartDate" indexed="true" onblur="allocationTest(this, " + myindex + ");" /> </logic:iterate> i want to write a onblur event for this text field inorder to validate it. Is it the correct way i wrote or something i need to make a change in the above code inorder for the javascript to work. Can we really able to write a onblur event for a indexed text field that is inside a logic:iterate block. please let me know. Thanks in advance. okay. clearing a form. I have a clear button. when I push it, I want all the red text boxes and onblur messages to disappear. anyone have an idea on where i can start? heres javascript Code: function isFormValid()
{
var userF = document.getElementById('FName').value;
var userL = document.getElementById('LName').value;
var userPW = document.getElementById('pw').value;
var userPW2 = document.getElementById('pw2').value;
var userBDay = document.getElementById('BDay').value;
var userEmail = document.getElementById('email').value;
var NameFormat = /^[A-Za-z]{2,12}$/;
var PWFormat = /^[A-Za-z0-9]{6,12}$]/;
var BDayFormat = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/;
var EmailFormat = /^([\w-]{2,})@([A-z\d][-A-z\d]+)\.[A-z]{2,8}/;
var retVal = true;
var errorMsg = "";
if (!NameFormat.test(userF))
{
assignErrorClass("FName");
errorMsg = "First Name is required. 2-12 letters only\n";
retVal = false;
}
if (!NameFormat.test(userL))
{
assignErrorClass("LName");
errorMsg = errorMsg + "Last Name is required. 2-12 letters only\n";
retVal = false;
}
if (!PWFormat.test(userPW))
{
assignErrorClass("pw");
errorMsg = errorMsg + "Password is required. 6-12 letters or numbers only.\n";
retVal = false;
}
if (userPW2 == "")
{
assignErrorClass("pw2");
errorMsg = errorMsg + "Please Retype password.\n";
retVal = false;
}
if ((userPW != userPW2) && (userPW2 !== ""))
{
assignErrorClass("pw2");
errorMsg = errorMsg + "Passwords do not match.\n";
retVal = false;
}
if (userBDay == "")
{
assignErrorClass("BDay");
errorMsg = errorMsg + "Please Enter a Birthday.\n";
retVal = false;
}
if ((!BDayFormat.test(userBDay)) && (userBDay !== ""))
{
assignErrorClass("BDay");
errorMsg = errorMsg + "Incorrect Birthday format\n";
retVal = false;
}
if (badBirthday("BDay") && (userBDay !== "")) {
assignErrorClass("BDay");
retVal = false;
errorMsg = errorMsg + "Invalid Birthday\n";
}
if (userEmail == "")
{
assignErrorClass("email");
errorMsg = errorMsg + "Please Enter an Email address.\n";
retVal = false;
}
if ((!EmailFormat.test(userEmail)) && (userEmail !== ""))
{
assignErrorClass("email");
errorMsg = errorMsg + "Please Enter a valid Email address.\n";
retVal = false;
}
if (!retVal)
{
alert( errorMsg);
}
return retVal;
}
function assignErrorClass(objName)
{
var obj = document.getElementById(objName);
obj.className = "err";
}
function badBirthday( objName) {
var obj = document.getElementById(objName);
var dateStr = obj.value;
var mn = dateStr.split("/")[0];
var dy = dateStr.split("/")[1];
var yr = dateStr.split("/")[2];
var dateObj = new Date(yr,mn-1,dy); //JavaScript and PHP number the months 0 to 11.
if (dateObj.getFullYear() != yr || dateObj.getMonth()+1 != mn || dateObj.getDate() != dy) {
return true;
} else {
return false;
}
}
function checkFName()
{
var userF = document.getElementById('FName').value;
var elementF = document.getElementById('labelFName');
var NameFormat = /^[A-Za-z]{2,12}$/;
if (!NameFormat.test(userF))
{
elementF.innerHTML = "First Name is required. 2-12 letters only";
elementF.style.color = "red";
}
else
{
elementF.innerHTML = "";
elementF.style.color = "green";
}
}
function checkLName()
{
var userL = document.getElementById('LName').value;
var elementL = document.getElementById('labelLName');
var NameFormat = /^[A-Za-z]{2,12}$/;
if (!NameFormat.test(userL))
{
elementL.innerHTML = "Last Name is required. 2-12 letters only";
elementL.style.color = "red";
}
else
{
elementL.innerHTML = "";
elementL.style.color = "green";
}
}
function checkpw()
{
var userPW = document.getElementById('pw').value;
var elementPW = document.getElementById('labelpw');
var PWFormat = /^[A-z0-9]{6,12}$/;
if (!PWFormat.test(userPW))
{
elementPW.innerHTML = "Password is required. 6-12 letters or numbers only.";
elementPW.style.color = "red";
}
else
{
elementPW.innerHTML = "Good Password";
elementPW.style.color = "green";
}
}
function checkpw2()
{
var userPW2 = document.getElementById('pw2').value;
var userPW = document.getElementById('pw').value;
var elementPW2 = document.getElementById('labelpw2');
if ((userPW != userPW2) && (userPW2 !== ""))
{
elementPW2.innerHTML = "Passwords do not match.";
elementPW2.style.color = "red";
}
else if (userPW2 == "")
{
elementPW2.innerHTML = "Please Retype password.";
elementPW2.style.color = "red";
}
else
{
elementPW2.innerHTML = "Passwords Match";
elementPW2.style.color = "green";
}
}
function checkBDay()
{
var userBDay = document.getElementById('BDay').value;
var elementBDay = document.getElementById('labelBDay');
var BDayFormat = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/;
if (userBDay == "")
{
elementBDay.innerHTML = "Please enter A Birthday.";
elementBDay.style.color = "red";
}
else if ((!BDayFormat.test(userBDay)) && (userBDay !== ""))
{
elementBDay.innerHTML = "Please enter mm/dd/yyyy format.";
elementBDay.style.color = "red";
}
else if ((badBirthday("BDay")) && (userBDay !== ""))
{
elementBDay.innerHTML = "Please enter valid Birthday.";
elementBDay.style.color = "red";
}
else
{
elementBDay.innerHTML = "";
elementBDay.style.color = "green";
}
}
function checkEmail()
{
var userEmail = document.getElementById('email').value;
var elementEmail = document.getElementById('labelEmail');
var EmailFormat = /^([\w-]{2,})@([A-z\d][-A-z\d]+)\.[A-z]{2,8}/;
if ((!EmailFormat.test(userEmail)) && (userEmail !== ""))
{
elementEmail.innerHTML = "Please enter a Valid Email address.";
elementEmail.style.color = "red";
}
else if (userEmail == "")
{
elementEmail.innerHTML = "Please enter an Email address.";
elementEmail.style.color = "red";
}
else
{
elementEmail.innerHTML = "";
elementEmail.style.color = "green";
}
}
heres the html Code: <form action="mailto:hummdedum@felloff.com" method="post" name="form" onSubmit="return isFormValid();">
* First Name: <input type="text" name="FName" id="FName" onblur="checkFName();"/><label id="labelFName"></label><br />
* Last Name: <input type="text" name="LName" id="LName"onblur="checkLName();"/><label id="labelLName"></label><br />
* Password: <input type="password" id="pw" name="Password" onblur="checkpw();"/><label id="labelpw"></label><br />
*Re-type Password: <input type="password" name="2Password" id="pw2" onblur="checkpw2();" /><label id="labelpw2"></label><br />
I am a: <br />
<input type="radio" name="status" value="fresh" /> Freshman<br />
<input type="radio" name="status" value="soph" /> Sophomore<br />
<input type="radio" name="status" value="jr" /> Junior<br />
<input type="radio" name="status" value="sr" /> Senior<br />
I am taking classes in the: <br />
<input type="checkbox" name="semester" value="fall" /> fall time<br />
<input type="checkbox" name="semester" value="spring" /> Spring time <br />
My favorite element is:
<select name="element" id="element">
<option value="">select</option>
<option value="fire">Fire</option>
<option value="earth">Earth</option>
<option value="water">Water</option>
<option value="air">Air</option>
</select><br />
*Birthday: mm/dd/yyyy<input type="text" id="BDay" name="Birthday" onblur="checkBDay();"/><label id="labelBDay"></label><br />
*E-Mail: <input type="text" id="email" name="Email" onblur="checkEmail();"/><label id="labelEmail"></label><br />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
css i guess would be Code: .err {
border: 2px solid #FF0000;}
#errMsg {
font-size: 110%;
color: #FF0000;}
super thanks!!!!!! -pumpkin Hi, I am trying this code to work but it does not, when nothing is entered into the username field the message does not pop up. please correct the code for me if possible. Code: <script type="text/javascript">
function validate()
{
Details==false
if(Details==false)
{
alert("Error detected")
return false
}
if(Datails==true)
{
alert("form submitted")
return true
}
}
</script>
<form name="Si" >
Enter username:<input type="text" name="username">
<input type="submit" value="submit" onsubmit="return validate()">
<input type="reset" value="reset">
</form>
Thanks. Clement Osei. I have a web page with two forms, when I click the button on one of the forms, the onclick event goes to a javascript that emails the first form and then the second form. This is correct, this is the way I want this to work. It's simple, it's easy, it works! However, it only works in FireFox and Internet Explorer, it will not work in Google Chrome browser. I've spent many hours trying lots of various ways to implement this so I'm not interested in speculating about possible solutions that might work, I've already tried too many of those. Also, it needs to work this way, not combining the forms, etc. Does anyone have any tried and tested solutions that work with Chrome? Thanks, in advance, for your expert advice. I know I can always rely on EE when all else fails. I know somebody here can solve this problem. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<form id="NameForm" method="post" action="mailto:yourFirstemail@email.com">
Name: <input type="text" size="10" name="name"> <br />
<input onclick=functionCaller() type="button" value="Submit Two Forms">
</form>
<form id="AddressForm" name="DComments" method="post" action="mailto:yourSecondemail@email.com">
Address: <input type="text" size="10" name="address"> <br />
</form>
<script type="text/javascript">
<!--
function functionCaller()
{
document.getElementById('NameForm').submit();
document.getElementById('AddressForm').submit();
}
-->
</script>
</body>
</html>
Hi all, I'm designing something to addon to an existing product. I'm struggling with some javascript problems. I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage. Is this possible? Thanks I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
Hey Everyone, I would like to let a select menu drop down with the click of a button or image. So, I have: Code: <select> <option>Option1</option> <option>Option2</option> <option>Option3</option> <option>Option4</option> </select> So, how do I trigger this select menu to drop down, except for clicking on the down arrow? Thanx in forward Hello ladies and gentlemen, I would like to use some event handling on a form, not something I have done before and looking for some assistance. Here is my code: Code: <select name="LocO"> <option value=""></option> <option value="O">Outside</option> <option value="I">Inside</option> </select> <select name="LocA"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option> <option value="G">G</option> <option value="H">H</option> <option value="I">I</option> <option value="J">J</option> <option value="K">K</option> </select> <select name="Loc1"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> So what I need to happen, is based on the selection of the first selection box, some of the options of the other selection boxes should not be available. If Outside is selected, everything in LocA should be available, but only up to 4 in Loc1... and if Inside is selected, only up to E should be available in LocA and everything should be available in Loc1. Is this possible? Please help me with this code to determine whether the check box has been checked. I get "Thank you" even if I don't check the check box. <script type="text/javascript"> var uncheck = document.getElementById().checked == false; var accept; function checkAccept() { var uncheck; if (uncheck == false){ alert ("You must accept the terms."); } else (uncheck == true) { alert ("Thank you."); } } </script> <form> <br />Please accept the terms by clicking the box below: <br />Accept terms: <input type="checkbox" id="accept" value="Y" /> <br /><input type="button" name="btn" value="Accept" onclick="checkAccept()" /> </form> </body> </html> I would like to set up an image gallery so that when customer clicks on their chosen image, the image caption populates into the associated field in the form below the gallery, on the same page. Any way you know of to do this? I am not really a coder, I only know this and that, so examples or detailed instructions will be most helpful. Thanks very much. Hi forum, I am trying to attach an event to a dynamically produced button, and then use stopPropagation and preventDefault. Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
element.setAttribute('id', 'myBtn');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
EventUtil.addHandler(element, 'click', function() {
alert('event attached');
});
var flag = confirm('prevent default behavior of button?');
if (flag) {
var el = document.getElementById('myBtn');/////////////////////////(1)
var ev = el.onclick;
}
}
var EventUtil = {
addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
}
};
But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?! PS:the event is attached, when I click on the button I get an alert message Hello, On a simple form, there is a radio button group with two radio buttons, a text box, and a submit button. The first radio button is checked(selected) by default. The text box input has the onChange event handler so that if the text is changed, the second radio button will be checked(selected). The problem is the input radio name contains a hyphen that breaks the JavaScript and the name can not be changed. What is the correct syntax for referencing a hyphenated form input radio name in the onChange event? Here is the form that works correctly with no hyphen in the input radio name: Code: <form name="myFormGood" action="" onsubmit="return false;"> Good Form with no hyphen in radio button name<br> <input name="radio1" type="radio" value="4" checked> First Option<br> <input name="radio1" type="radio" value="5"> Second Option<br><br> Change the text to select the Second Option<br> <input type="text" name="text1" onChange="document.myFormGood.radio1[1].checked = 'true';" size="10" value=" "><br><br> <input type="button" name="submit" value="It Works!"> </form> Here is the form that breaks the JavaScript because it has a hyphen in the input radio name: Code: <form name="myFormBad" action="" onsubmit="return false;"> Bad Form with hyphen in radio button name breaks JavaScript<br> <input name="radio-1" type="radio" value="4" checked> First Option<br> <input name="radio-1" type="radio" value="5"> Second Option<br><br> Change the text to select the Second Option. Nothing Happens.<br> <input type="text" name="text1" onChange="document.myFormBad.radio-1[1].checked = 'true';" size="10" value=" "><br><br> <input type="button" name="submit" value="It Doesn't Work!"> </form> Hi, I have dynamic table with the fileds that have input boxes where X is the counter. Finaly I got unique id ABC1,ABC2,ABC3......... <table><tr> <td><input id=ABC<%=X%> value="<%=RS("Name")%>"></td> <td><input id=ABC<%=X%> value="<%=RS("Name")%>"></td> <td><input id=ABC<%=X%> value="<%=RS("Name")%>"></td> <td>...</td><td>...</td><td>...</td></tr></table> How to get value of each row onblur in javascript Thanks a lot, MZ There is a Js file i am including in my application that has a below function Code: function highlightInputs() {
var inputs = document.getElementsByTagName('input');
var i;
for (i=0; i<inputs.length; i++) {
inputs[i].onfocus = function() {
this.style.background = '#F6F6F6';
}
inputs[i].onblur = function() {
this.style.background = '#FFF';
}
}
}
addEvent (window, "load", highlightInputs);
Code: <INPUT TYPE="text" NAME="InvoiceDate_DT" id="InvoiceDate_DT" value="<?=($InvoiceDate_DT)?>" class="smtxtbox" onBlur="javascript:alert('test');">
Now in the same page, i have a textbox and i try to fire an onblur() event which is not getting fired. Onclick() works but onblur() doesnt..strange.. When i disable the .js file it gets fired. What is the problem?? Its on all the browsers Thanks is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks Hi, can someone show me why I cant get the onfocus and onblur to loop thru the function showTextContent() when entering the words one, two, three or four. I have tried for days, googled and lost a lot of hair trying to figure it out. http://www.data-affiliates.com/DL234...5/attempt.html Code: <html>
<!-- Created on: 08.08.2009 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="sdfgdfg">
<meta name="generator" content="AceHTML 6 Pro">
<link rel="stylesheet" href="vid61.css" type="text/css" media="screen" />
<script type="text/javascript">
function toggle(id, status){
document.getElementById(id).style.visibility = status;
}
function myFocus(element)
{
if (element.value == element.defaultValue) {
element.value = '';
}
}
function myBlur(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
function populateSearchField(){
var specialChars = "\\.+*?[^]$(){}=!<>|:,-=/";
var ignoreList = ["a", "the"];
var i, j, searchFld, keywords;
if (!(searchFld = document.getElementsByName('formcontent')[0])) return;
if (!(keywords = document.referrer.match(/[pq]=(.*?)&/))) return;
var preg_quote = function(str){return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!<>\|\:])/g, "\\$1");}
keywords = decodeURIComponent(keywords[1]).replace(new RegExp('[' + preg_quote(specialChars) + ']', 'g'), ' ').split(/[\+ ]/);
for (i = 0; i < keywords.length; i++){
for (j = 0; j < ignoreList.length; j++) if (!keywords[i] || (keywords[i] == ignoreList[j])) {
keywords.splice(i--, 1);
break;
}
}
searchFld.value = keywords.join(' ');
}
function keywordMatch(keywords, text) {
var result = 0;
for (var i in keywords) {
if (text.match(new RegExp("(^| )" + keywords[i] + "( |$)", "i"))) {
result++;
};
}
return result;
}
function showTextContent() {
var i, matches = [];
var div, divcontent, divs = document.getElementById("ts-1").getElementsByTagName('div');
var keywords = document.getElementsByName('formcontent')[0].value.split(' ');
for (i = 0; i < divs.length; i++) {
div = divs[i];
divcontent = div.lastChild.nodeValue;
if (keywordMatch(keywords, divcontent)) {
matches.push(div);
}
}
if (matches[0]) {
document.getElementById('take1000').innerHTML = matches.length + " matches / Treffer";
for (i = 0; i < matches.length; i++) {
matches[i].onmouseover(toggle('take1000', 'visible'));
matches[i].onmouseout = null;
}
}
else {
document.getElementById("ts-1").innerHTML = "" ;
matches[i].onmouseover(toggle('notake1000', 'visible'));
}
}
window.onload = function(){
populateSearchField();
showTextContent();
}
</script>
</head>
<body>
<div id="container">
<div id="notake1000">Keine Ergebnisse / No Matches</div>
<div id="take1000"></div>
<div id="ulent">Search this site / Diese Seite durchsuchen :</div><form><input type="text" name="formcontent" value="one" onmouseover="toggle('notake1000', 'hidden');toggle('take1000', 'hidden');" onfocus="myFocus(this); showTextContent();" onblur="myBlur(this); showTextContent();" style="font-family:Arial;color:#ffff40;text-align:center;font-size:12px;font-weight:bold;float:right;margin-left : auto;margin-right : 2px;border: 2px double #AFAFAF;background-color: #5F5F5F;padding:1px;height:18px;width:293px;" /></form>
<div id="ts-1" style="visibility:hidden;">
<div onmouseover="toggle('fo-test1', 'visible');" onmouseout="this.className='ts-1-1';toggle('fo-test1', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-1"><object id="fo-test1" style="visibility:hidden;" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object>www.Ihre-domain.de<br />one</div>
<div onmouseover="toggle('fo-test2', 'visible');" onmouseout="this.className='ts-1-2';toggle('fo-test2', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-2"><object id="fo-test2" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object>www.Ihre-domain.de<br />two</div>
<div onmouseover="toggle('fo-test3', 'visible');" onmouseout="this.className='ts-1-3';toggle('fo-test3', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-3"><object id="fo-test3" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object><br />www.Ihre-domain.de<br />three</div>
<div onmouseover="toggle('fo-test4', 'visible');" onmouseout="this.className='ts-1-4';toggle('fo-test4', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-4"><object id="fo-test4" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object><br />www.Ihre-domain.de<br />four</div>
</div>
</div>
</body>
</html>
I am trying to make an onblur that calls a function and passes it some text, for example: onblur = "function("Hello")" however this wont work as it is not even calling the function. I have tried all the different encapsulation tags I can think of but still no luck is there any way of doing it or can I assign the text to a variable and call the function in the onblur? Thanks.:confused: |
|||||||