|
JavaScript - Checking For Invalid Data In An Input
I am wanting all the inputs of the table cells turn red when invalid data (in this case anything other than a number) is entered.
Object: 1. To add a className to those inputs 2. With the new className 'invalid" the CSS gives a red background to the input The appending of the className is not showing up in the generated source code and both Firefox and Chrome is not showing any errors in the code. I can't not figure out what is preventing the execution. Any advise to this simple problem will greatly be appreciated. Code: if (document.getElementsByTagName && document.getElementById) {
var dg = {
// references to the table
table : document.getElementsByTagName('table')[0],
tbody : document.getElementById('data').tBodies[0],
//reference to the inputs
dataInput : document.getElementsByTagName('input'),
init : function() {
// configure event listening and delegation
this.util.configEvents();
// assign listeners to the table
this.util.addEvent(this.table, 'keyup', this.checkData, true);
},
checkData : function(dataInput) {
// if it is not a number, mark the input as invalid
if (isNaN(dataInput.value)) {
dg.dataInput.className = 'invalid';
}
// if the user deleted the value entirely, remove any invalid indication
else if (dataInput.value === '') {
dg.dataInput.className = '';
}
},
util : {
configEvents : function() {
if (document.addEventListener) {
this.addEvent = function(el, type, func, capture) { el.addEventListener(type, func, capture); };
this.stopBubble = function(evt) { evt.stopPropagation(); };
this.stopDefault = function(evt) { evt.preventDefault(); };
this.findTarget = function(evt, targetNode, container) {
var currentNode = evt.target;
while (currentNode && currentNode !== container) {
if (currentNode.nodeName.toLowerCase() === targetNode) { return currentNode; break; }
else { currentNode = currentNode.parentNode; }
};
return false;
};
}
else if (document.attachEvent) {
this.addEvent = function(el, type, func) { el["e" + type + func] = func; el[type + func] = function() { el["e" + type + func] (window.event); }; el.attachEvent("on" + type, el[type + func]); };
this.stopBubble = function(evt) { evt.cancelBubble = true; };
this.stopDefault = function(evt) { evt.returnValue = false; };
this.findTarget = function(evt, targetNode, container) { var currentNode = evt.srcElement;
while (currentNode && currentNode !== container) {
if (currentNode.nodeName.toLowerCase() === targetNode) { return currentNode; break; }
else { currentNode = currentNode.parentNode; }
};
return false;
};
}
}
}
};
dg.init();
}
Similar Tutorials_________
Hello I have a html page which just enter the coordinates of a city and appear that processes the data file javascript. this is the part where I put the coordinates manually: Code: <script type="text/javascript"> var date = new Date(); // today var times = prayTimes.getTimes(date, [44, 11], +2); So far we have and everything worked .. just that I want to create a table with all names of cities, click on a city data appear to me .. there is some code that could only enter the coordinates by clicking on the name of the city, instead of entering all the time coordinates? thanks again p.s. sorry for my bad english Hey guys, I've been searching for a few hours and haven't been able to find a code snippet to see if this is available. I'm attempting to pass text from my website to another website that has a form setup on it. I'd like to fill in the pertinent data for my users on the page that I load for them. I cannot make any changes to the receiving page as it is run by another company. I've pasted some of the code that is available on the receiving form. Thanks for any help. Code: <script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<input name="txtBranch" type="text" maxlength="4" id="txtBranch" tabindex="1" style="height:14px;width:35px;" />
<input name="txtClient" type="text" maxlength="11" size="11" id="txtClient" tabindex="2" style="height:14px;" />
Im trying to fill in the data in these 2 input fields. Hello, I'm currently working on http://footytweets.co.uk and would like to add an input field to my twitter feed widgets, which allows users to change which twitter account tweets are dispalyed. An example is here; https://twitter.com/about/resources/...widget_profile You can see in the example how you can enter a different twitter user account, then hit 'test settings', leading to related twees being displayed. I can see how to do it but Im a super novice at JS so thought Id ask for assistance . Any code help is very much appreciated. Thx Hi.. I just want to know how does it happen that when I scan the barcode using barcode scanner it will automatically put on the first textbox, then the focus will go to the next textbox and on the last textbox will automatically save the data to database. here is my sample form. PHP Code: <?php error_reporting(0); date_default_timezone_set("Asia/Singapore"); //set the time zone $con = mysql_connect('localhost', 'root',''); if (!$con) { echo 'failed'; die(); } mysql_select_db("mes", $con); $sr_date =date('Y-m-d H:i:s'); $sql = "SELECT sr_number FROM receiving_materials ORDER BY sr_date DESC LIMIT 1"; $result = mysql_query($sql, $con); if (!$result) { echo 'failed'; die(); } $total = mysql_num_rows($result); if ($total <= 0) { $currentSRNum = 1; $currentYear = (int)(date('y')); $currentMonth = (int)(date('m')); $currentDay = (int)(date('d')); $currentSRYMD = substr($row['sr_number'], 0, 6); $currentYMD = date("ymd"); if ($currentYMD > $currentSRYMD) { $currentSRNum = 1; } else { $currentSRNum += 1; } } else { //------------------------------------------------------------------------------------------------------------------ // Stock Number iteration.... $row = mysql_fetch_assoc($result); $currentSRNum = (int)(substr($row['sr_number'],0,3)); $currentSRYear = (int)(substr($row['sr_number'],2,2)); $currentSRMonth = (int)(substr($row['sr_number'],0,2)); $currentSRNum = (int)(substr($row['sr_number'],6,4)); $currentYear = (int)(date('y')); $currentMonth = (int)(date('m')); $currentDay = (int)(date('d')); $currentSRYMD = substr($row['sr_number'], 0, 6); $currentYMD = date("ymd"); if ($currentYMD > $currentSRYMD) { $currentSRNum = 1; } else { $currentSRNum += 1; } } //------------------------------------------------------------------------------------------------------------------ $yearMonth = date('ymd'); $currentSR = $currentYMD . sprintf("%04d", $currentSRNum); ?> <html> <title>Receiving Materials</title> <head> <link rel="stylesheet" type="text/css" href="kanban.css" /> <style type="text/css"> #SR_date{ position: relative; font-family: Arial, Helvetica, sans-serif; font-size: .9em; margin-left: 10px; width: auto; height: auto; float: left; top : 10px; } </style> </head> <body> <form name="receiving_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <div id="SR_date"> <label>Date :</label> <input type="text" name="sr_date" value="<?php echo $sr_date; ?>" size="16" readonly="readonly" style="border: none;"> </div> <div id="SR_number"> <label>RM# :</label> <input type="text" name="sr_number" value="<?php echo $currentSR; ?>" size="9" readonly="readonly" style="font-weight: bold; border: none;"> </div> <div id="SI_number"> <label class="LLabelRM">SI/DR# :</label> <input type="text" name="si_num" id="si_num" class="LFieldRM" value="" size="25"> <br/></br/> <label class="LLabelRM">Supplier Name :</label> <input type="text" name="s_name" id="s_name" class="LFieldRM" value="" size="25"> <br/></br/> <label class="LLabelSecRM">PO # :</label> <input type="text" name="po_num" id="po_num" class="LFieldSecRM" value="" size="25"> <label class="LLabelSecRM">Quantity :</label> <input type="text" name="qty" id="qty" class="LFieldSec1RM" value="" size="25"> <br/> <br/> <label class="LLabelSecRM">Material Code :</label> <input type="text" name="mat_code" id="mat_code" class="LFieldSecRM" value="" size="25"> <label class="LLabelSecRM">Material Desc. :</label> <input type="text" name="mat_desc" id="mat_desc" class="LFieldSec1RM" value="" size="25"> <br/></br/> <label class="LLabelSecRM">WH Code :</label> <input type="text" name="wh_code" id="wh_code" class="LFieldSecRM" value="" size="25"> <label class="LLabelSecRM">BIN Location :</label> <input type="text" name="bin_loc" id="bin_loc" class="LFieldSec1RM" value="" size="25"> </div> </form> </body> </html> Thank you Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Code: function get_dims()
{
winH = getH();
winW = getW();
//alert(document.body.offsetHeight);
document.getElementById('bgimg').width = winW;
document.getElementById('bgimg').height = winH;
document.getElementById('bgimgwrap').width = winW;
document.getElementById('bgimgwrap').height = winH;
var h = document.getElementById('header').offsetHeight;
document.getElementById('layerimg').width = winW;
document.getElementById('layerimg').height = (winH-h);
document.getElementById('layerimg').style.top = h+"px";
document.getElementById('page').style.top = (document.getElementById('page').offsetTop + h)+"px";
document.getElementById('main').style.width = (winW*7)+"px";
document.getElementById('child').style.top = winH+"px";
document.getElementById('child').height = (winH-h)+"px";
var td = document.getElementsByTagName('td');
for(i = 0; i < td.length; i++)
{
td[i].width = winW+"px";
td[i].height = (winH-h)+"px"; \\this is the line with the error i have tried all sorts of different things with it to no avail
}
}
function getH()
{
if (parseInt(navigator.appVersion)>3)
{
if (navigator.appName=="Netscape")
{
winH = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft")!=-1)
{
winH = document.body.offsetHeight;
}
}
return winH;
}
function getW()
{
if (parseInt(navigator.appVersion)>3)
{
if (navigator.appName=="Netscape")
{
winW = window.innerWidth;
}
if (navigator.appName.indexOf("Microsoft")!=-1)
{
winW = document.body.offsetWidth;
}
}
return winW;
}
I'm trying to get some basic javascript down so I can have my text come in from both the top and the bottom of the screen when the page loads. It's working just fine in Firefox, but in IE it stops with an "invalid argument" error. The problem comes on this line: Code: document.getElementById('part1').style.top = down[part1Position] + "px";
Here's the whole code in my separate .js file. Code: var part1Position = 0;
var part2Position = 0;
var downPosition = -19;
var upPosition = 800;
var down = new Array();
var up = new Array();
for(var i = 0; i < 91; ++i) {
down[i] = downPosition;
downPosition += 3;
}
for(var x = 0; x < 184; ++x) {
up[x] = upPosition;
upPosition -= 3;
}
function part1Move(){
document.getElementById('part1').style.top = down[part1Position] + "px";
++part1Position;
/*if (part1Position == 79)
part1Position = 79;*/
}
function part2Move() {
document.getElementById('part2').style.top = up[part2Position] + "px";
++part2Position;
/*if (part2Position == 83)
part2Position = 83;*/
}
function startMoving() {
setInterval("part1Move()",1);
setInterval("part2Move()",1);
}
Any help would be greatly appreciated! I'm stumped. I'm trying to figure out why this doesnt work and how it will... The current script is as follows: Code: <script type="text/javascript">
function ReturnValueFromPopup(returnValue)
{
var imageURL = returnValue;
}
function SimpleTextEditor(id, objectId) {
if (!id || !objectId) { alert("SimpleTextEditor.constructor(id, objectId) failed, two arguments are required"); }
var self = this;
this.id = id;
this.objectId = objectId;
this.frame;
this.viewSource = false;
this.path = ""; // with slash at the end
this.cssFile = "";
this.charset = "iso-8859-1";
this.editorHtml = "";
this.frameHtml = "";
this.textareaValue = "";
this.browser = {
"ie": Boolean(document.body.currentStyle),
"gecko" : (navigator.userAgent.toLowerCase().indexOf("gecko") != -1)
};
this.init = function() {
if (document.getElementById && document.createElement && document.designMode && (this.browser.ie || this.browser.gecko)) {
// EDITOR
if (!document.getElementById(this.id)) { alert("SimpleTextEditor "+this.objectId+".init() failed, element '"+this.id+"' does not exist"); return; }
this.textareaValue = document.getElementById(this.id).value;
var ste = document.createElement("div");
document.getElementById(this.id).parentNode.replaceChild(ste, document.getElementById(this.id));
ste.id = this.id+"-ste";
ste.innerHTML = this.editorHtml ? this.editorHtml : this.getEditorHtml();
// FRAME
if (this.browser.ie) {
this.frame = frames[this.id+"-frame"];
} else if (this.browser.gecko) {
this.frame = document.getElementById(this.id+"-frame").contentWindow;
}
this.frame.document.designMode = "on";
this.frame.document.open();
this.frame.document.write(this.frameHtml ? this.frameHtml : this.getFrameHtml());
this.frame.document.close();
insertHtmlFromTextarea();
}
};
function lockUrls(s) {
if (self.browser.gecko) { return s; }
return s.replace(/href=["']([^"']*)["']/g, 'href="simpletexteditor://simpletexteditor/$1"');
}
function unlockUrls(s) {
if (self.browser.gecko) { return s; }
return s.replace(/href=["']simpletexteditor:\/\/simpletexteditor\/([^"']*)["']/g, 'href="$1"');
}
function insertHtmlFromTextarea() {
try { self.frame.document.body.innerHTML = lockUrls(self.textareaValue); } catch (e) { setTimeout(insertHtmlFromTextarea, 10); }
}
this.getEditorHtml = function() {
var html = "";
html += '<iframe id="'+this.id+'-frame" frameborder="0"></iframe>';
return html;
};
this.getFrameHtml = function() {
var html = "";
html += '<html><head></head><body></body></html>';
return html;
};
this.execCommand = function(cmd, value) {
if (cmd == "insertimage" && !value) {
//var imageUrl = prompt("Enter Image URL:", "");
window.displayWindow();
}
else if(cmd == "imageURL" && value){
alert(value);
this.frame.focus();
this.frame.document.execCommand(cmd, false, value);
this.frame.focus();
}
};
this.isOn = function() {
return Boolean(this.frame);
};
this.getContent = function() {
try { return unlockUrls(this.frame.document.body.innerHTML); } catch(e) { alert("SimpleTextEditor "+this.objectId+".getContent() failed"); }
};
this.submit = function() {
if (this.isOn()) {
if (this.viewSource) { this.toggleSource(); }
document.getElementById(this.id).value = this.getContent();
}
};
}
</script>
<textarea id="myfield" name="myfield" style="font-family:Arial;font-size:12px;"></textarea>
<script type="text/javascript">
var ste = new SimpleTextEditor("myfield", "ste");
ste.init();
</script>
<script type="text/javascript">
function insertimage(){
var imgURL = document.getElementById('imageurl').value;
ste.execCommand("imageURL", imgURL);
}
function CallWindowOpener(returnValue){
if (typeof ReturnValueFromPopup == 'function'){
ReturnValueFromPopup(returnValue);
}
}
</script>
<input name="imageurl" id="imageurl" type="text" />
<input name="Submit" type="button" onClick="insertimage();" value="Submit Image Url"/>
When inserting anything into the imageurl textbox in the bottom of the script and submitting it I get an invalid argument error regarding to this line: this.frame.document.execCommand(cmd, false, value); within the: else if(cmd == "imageURL" && value){ In the end of the first javascript... Can anybody tell me how to get passed this please... Thanks in advance ;-) I have a resized textbox. When the textbox gets resized less that 0px I get an Invalid Augment error. How can I trap that error? function DecreaseSize(){ var ta.style.height = $get('<%=myTextbox.ClientID %>'); ta.style.height = (parseInt(ta.style.height) - 23) + "px"); } Hi, So I'm testing my webpage in IE8. In firefox it looks and runs greag, but in IE 8, one issue I'm having is this: I have a button that opens a popup window. Works fine in Firefox, but I get 'invalid argument' error in IE8 and the window does not open. I've enabled at a whim some scripting things in the Internet Options hoping that would resolve the issue, but not so. Here's the code. The "invalid argument" occurs on the window.open call. Code: function open_report()
{
createURL();
var report_vars = created_URL;
report_vars = report_vars.substr(69);
report_array = report_vars.split('=');
var from_d = report_array[2].substr(0,10);
var to_d = report_array[3].substr(0,10);
window.open('detailedreport.shtml' + report_vars, 'My Site | Detailed Report - ' + from_d + ' to ' + to_d, 'title=yes, status=no, toolbar=no, location=no, menubar=no, scrollbars=yes, modal=yes, alwaysRaised=yes, width=' + window.outerWidth / 1.1 + ', height=' + window.outerHeight);
}
In addition, is there any way to have that tile I've given it, "my Site..." appear in the window header? Right now it's not appearing at all in either browser. Thanks for reading! I wrote a form and a JavaScript to valid the form. I cannot figure out however how to stop the form from submitting if the form is invalid. [CODE] function validateForm() { if(""==document.test.custName.value) { alert("Please enter your name."); return false; } if(""==document.test.email.value) { alert("Please enter your email address."); return false; } if(""==document.test.custComment.value) { alert("Please enter your comment."); return false; } return true; } [CODE] I am using a jQuery slider on a website but the code comes up with invalid, is there any wat to get around this without using a div tag? Thanks for any help on this: Line 26, Column 27: document type does not allow element "div" here .before('<div id="buttons">') Code: <script type="text/javascript">
$(document).ready(function() {
$('#slider')
.before('<div id="buttons">')
.cycle({
fx: 'fade',
pager: '#buttons'
});
});
</script>
I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. I have a problem with adding new inputs to a form (if and when required), Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank. JS: Code: fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}
form: Code: <form action="index.php" method="post"> <div id="input"> <input type="text" name="input[]" size="30" maxlength="15" /> </div> <!-- button --> <div id="more"> <input type="button" onclick="addInput()" name="add" value="More" /> </div> <!-- // button --> <input type="submit" name="submit" value="Submit" /> </form> as usual any help is appretiated .. Hi, I have written a function to compare each character in startString with another nominated character (nomChar). If they are the same this character is written to outputString, in the same position. If they are not the same a character is lifted from the same position in altString and placed in the same position in outputString instead. I hope that's clear! Code as follows: Code: function compareChar(startString, altString, nomChar)
{
var outputString = '';
outputString.length = startString.length;
var nextLetter = '';
for (var count = 0; count < startString.length; count = count + 1)
{
nextLetter = startString.charAt(count);
if (nextLetter == nomChar)
{
outputString.charAt(count) = nextLetter;
}
else
{
outputString.charAt(count) = altString.charAt(count);
}
}
}
document.write(compareChar('boston', 'denver' , 'o' ) );
However, the line of code within the if statement Code: outputString.charAt(count) = nextLetter; keeps generating an 'Invalid assigment left hand side' error message. Can anyone see why this is the case? Thanks. The suspect line is the following $('.leaveClan').attr('id') = <?php echo $id; ?>; the span with the class (there is only one) leaveClan is on the main page, and that line of javascript is on a page being called by AJAX within that page. Can anyone see why that is causing an error? Let me know if you need to see any more of the code Hi, i want to set an input value to the same value as the input selected from another input on the same form so when the user selects input 1 i want the hidden input2 to get the same value im guessing i use onsubmit because its hidden so there wont be a focus or blur this would be part of the input Code: onsubmit="(this.value = this.othervalue)" othervalue being the other input name="othervalue" is that the correct syntax hello, This seems very basic, but I am running into a complication. What I would like to do is check if a certain div is displayed or hidden (really doesnt matter which) then set a map zoom level based upon that. here is my current function. function closeDirections(){ gdir.clear(); if(document.getElementById("river").style.display="none"){ map.setZoom(16); hideID('river'); showID('main'); } if(document.getElementById("main").style.display="none"){ map.setZoom(12); hideID('main'); showID('river'); } } Also here is a link to my map, just in case. map I have tried several variations, but from what I can tell with every instance, it only examines the first and never considers the second "if". I thought to rememdy this issue by using if/else...same issue. The only thing I could think is a nested if statements, but I am not sure what to use as a parent if. I have searched for a while, but cannot seem to find something like an .is_hidden(). Something that I could see if its true/false. Any help would be very much appreciated. |
|||||||