/    Sign up×
Community /Pin to ProfileBookmark

turn all input text boxes into objects

hi,

i would like to search my webpage for all the text input boxes. and turn them all into objects.

something like…
document.getElementsByTagName(“input/text”);
…to find the input boxes and then some code to turn them into objects.

cheers,

Paul

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@WolfShadeApr 16.2009 — Inputs already are objects. What are you trying to do with the objects?

^_^
Copy linkTweet thisAlerts:
@ZeroKilledApr 17.2009 — as i guess you has discovered, [b]getElementsByTagName[/b] can't use a compound of tag/type. however, you can do your own function. to give you a start, use [b]getElementsByTagName[/b] to get all INPUTs. then create a custom array and fill it by looping through the collection checking which elements are text type.
Copy linkTweet thisAlerts:
@paulonline2501authorApr 17.2009 — Inputs already are objects. What are you trying to do with the objects?

^_^[/QUOTE]


i want a script that looks for all tthe text boxes on a page, sets a regex for validation depending on the type (i set type with class in the tag), validate each field onblur, and then if all fields are valid make the submit botton "disabled = false".

i was going to do this by making each of the text boxes into an object via getElementsByTagName. maybe i dont need to turn them into objects?

... i could then add the script to any page that had text boxes, and as long as i set the text boxes a class, the validation would be done without having to set anything else up. Sick!
Copy linkTweet thisAlerts:
@paulonline2501authorApr 17.2009 — basically, the code below is what im using at the moment.

in function_init i have to hard code the input:text items.

i want the script to search for text boxes and then run as b4.

[CODE]window.onload = init;
function init()
{
document.getElementById("name").focus();
document.getElementById("name").onblur=function(){validate("name","name")};
document.getElementById("comment").onblur=function(){validate("comment","comment")};
document.getElementById("save_button").disabled = true;
}

function validate(id,type)
{


//set up function variables
var errorMessage = "";
var errorMessageID = id+"Error";
var enteredDataToValidate = document.getElementById(id).value;
document.getElementById("save_button").disabled = true;

//try to validate field
try
{
//set regexp and error messages depending on verification type
switch (type)
{
case "name":
var currentRegExp = new RegExp(/^[A-Za-z]{1,20}[A-Za-zs-]{0,20}$/);
errorMessage = "Invalid entry!";
valid_name = false;
break;

case "comment":
var currentRegExp = new RegExp(/^[ws/,/.d-]{2,300}$/);
errorMessage = "Invalid entry!";
valid_comment = false;
break;

//message if verification type not set up correclty by developer
default: alert("validation error - contact web master");
}

//if validation passes:
if(currentRegExp.test(enteredDataToValidate) == true)
{
//clear error message
document.getElementById(errorMessageID).innerHTML = "";
switch (type)
{
case "name":
valid_name = true;
break;

case "comment":
valid_comment = true;
break;
}
if (valid_name==true && valid_comment==true){document.getElementById("save_button").disabled = false}
}
//if verification fails:
else
{
//display error message
document.getElementById(errorMessageID).innerHTML = errorMessage;
}
}
catch(error)
{
//if try faulty show error message
alert("Error: " + error.message + ". Please contact [email protected].");
}
}[/CODE]
Copy linkTweet thisAlerts:
@ZeroKilledApr 19.2009 — can't understand the detail where you say [i]"i set type with class in the tag"[/i]. what i'm understanding is that you use sort of a custom type set in the class attribute. so, the following code may or may not be what you are looking for. is basically the same code but with a few changes in both functions:
<i>
</i>window.onload = init;
function init() {
var inputs = document.getElementsByTagName('input');
for(var i = 0; i &lt; inputs.length; i++){
if(/text/i.test(inputs[i].type)) inputs[i].onblur = function(){validate(this);};
}
document.getElementById("save_button").disabled = true;
}

function validate(textbox){
// id,type
//set up function variables
var type = textbox.className;
var errorMessage = "";
var errorMessageID = textbox.id+"Error";
var enteredDataToValidate = textbox.value;
document.getElementById("save_button").disabled = true;

<i> </i>//try to validate field
<i> </i>try{
<i> </i> //set regexp and error messages depending on verification type
<i> </i> switch (type){
<i> </i> case "name":
<i> </i> var currentRegExp = new RegExp(/^[A-Za-z]{1,20}[A-Za-zs-]{0,20}$/);
<i> </i> errorMessage = "Invalid entry!";
<i> </i> valid_name = false;
<i> </i> break;

<i> </i> case "comment":
<i> </i> var currentRegExp = new RegExp(/^[ws/,/.d-]{2,300}$/);
<i> </i> errorMessage = "Invalid entry!";
<i> </i> valid_comment = false;
<i> </i> break;

<i> </i> //message if verification type not set up correclty by developer
<i> </i> default: alert("validation error - contact web master");
<i> </i> }

<i> </i> //if validation passes:
<i> </i> if(currentRegExp.test(enteredDataToValidate) == true) {
<i> </i> //clear error message
<i> </i> document.getElementById(errorMessageID).innerHTML = "";
<i> </i> switch (type){
<i> </i> case "name":
<i> </i> valid_name = true;
<i> </i> break;

<i> </i> case "comment":
<i> </i> valid_comment = true;
<i> </i> break;
<i> </i> }
<i> </i> if (valid_name==true &amp;&amp; valid_comment==true){document.getElementById("save_button").disabled = false}
<i> </i> }
<i> </i> //if verification fails:
<i> </i> else {
<i> </i> //display error message
<i> </i> document.getElementById(errorMessageID).innerHTML = errorMessage;
<i> </i> }
<i> </i>}
<i> </i>catch(error){
<i> </i> //if try faulty show error message
<i> </i> alert("Error: " + error.message + ". Please contact [email protected].");
<i> </i>}
}
Copy linkTweet thisAlerts:
@boryi2009Apr 19.2009 — as i guess you has discovered, [b]getElementsByTagName[/b] can't use a compound of tag/type. however, you can do your own function. to give you a start, use [b]getElementsByTagName[/b] to get all INPUTs. then create a custom array and fill it by looping through the collection checking which elements are text type.[/QUOTE]

This is the way to do. But you have to be careful when dealing IE and Firefox


---------
www.boryi.com
×

Success!

Help @paulonline2501 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...