Checking a form input tag type works only for type text... not others...why?

Discussion in 'Javascript' started by Randell D., Jul 6, 2005.

  1. Randell D.

    Randell D. Guest

    Folks,

    I have a form called "ourTestForm".

    Its a test form - nothing special - it contains five input tags - they
    are named one, two, three, four and five.

    The input tags are of type text,text,radio,checkbox and select.

    When I run the following code, it correctly reports "text" (for input
    tag named "one") but it reports (alerts) input tag four as being
    "undefined". The same happens for any input tag that is not of type "text".

    How come? How can I fix it?

    <script language="JavaScript" type="text/javascript">
    function complete_field(form_name,field_name,field_value)
    {
    var form_name_obj=document.forms[form_name];
    var field_type=form_name_obj.elements[field_name].type;
    alert(field_type);
    return true;
    }

    complete_field("ourTestForm","one","whatever");
    complete_field("ourTestForm","four","whatever");
    </script>


    All help via the newsgroup please, so all can learn... thanks,

    randelld
    Randell D., Jul 6, 2005
    #1
    1. Advertising

  2. Randell D.

    VK Guest

    Re: Checking a form input tag type works only for type text... not others... why?

    The code below works as you need.

    A mistery: type of select ("select1") reported as "select-one" in both
    FF in IE. What does it mean and where would be the "select-two"?


    <html>
    <head>
    <title>Elements' test</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <script type="text/javascript">
    function complete_field(form_name,field_name,field_value) {
    var form_name_obj = document.forms[form_name];
    var field_type=form_name_obj.elements[field_name].type;
    alert(field_type);
    }
    </script>
    </head>

    <body bgcolor="#FFFFFF">
    <form name="">
    <input type="text" name="textfield1"
    onclick="complete_field(this.form.name,this.name,this.value)">
    <input type="text" name="textfield2"
    onclick="complete_field(this.form.name,this.name,this.value)">
    <input type="radio" name="radiobutton1" value="radiobutton"
    onclick="complete_field(this.form.name,this.name,this.value)">
    <input type="checkbox" name="checkbox1" value="checkbox"
    onclick="complete_field(this.form.name,this.name,this.value)">
    <select name="select1"
    onclick="complete_field(this.form.name,this.name,this.value)">
    <option value="1" selected>Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    </select>
    </form>
    </body>
    </html>
    VK, Jul 6, 2005
    #2
    1. Advertising

  3. Randell D.

    RobG Guest

    Re: Checking a form input tag type works only for type text... notothers... why?

    VK wrote:
    > The code below works as you need.
    >
    > A mistery: type of select ("select1") reported as "select-one" in both
    > FF in IE. What does it mean and where would be the "select-two"?


    No mystery, the select element's type attribute was defined in DOM 1:

    type of type DOMString , readonly
    The type of this form control. This is the string "select-multiple"
    when the multiple attribute is true and the string "select-one" when
    false

    <URL:http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-822762427>


    [...]


    --
    Rob
    RobG, Jul 6, 2005
    #3
  4. Randell D.

    Randell D. Guest

    Re: Checking a form input tag type works only for type text... notothers... why?

    VK wrote:

    > The code below works as you need.
    >
    > A mistery: type of select ("select1") reported as "select-one" in both
    > FF in IE. What does it mean and where would be the "select-two"?
    >
    >
    > <html>
    > <head>
    > <title>Elements' test</title>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1">
    > <script type="text/javascript">
    > function complete_field(form_name,field_name,field_value) {
    > var form_name_obj = document.forms[form_name];
    > var field_type=form_name_obj.elements[field_name].type;
    > alert(field_type);
    > }
    > </script>
    > </head>
    >
    > <body bgcolor="#FFFFFF">
    > <form name="">
    > <input type="text" name="textfield1"
    > onclick="complete_field(this.form.name,this.name,this.value)">
    > <input type="text" name="textfield2"
    > onclick="complete_field(this.form.name,this.name,this.value)">
    > <input type="radio" name="radiobutton1" value="radiobutton"
    > onclick="complete_field(this.form.name,this.name,this.value)">
    > <input type="checkbox" name="checkbox1" value="checkbox"
    > onclick="complete_field(this.form.name,this.name,this.value)">
    > <select name="select1"
    > onclick="complete_field(this.form.name,this.name,this.value)">
    > <option value="1" selected>Option 1</option>
    > <option value="2">Option 2</option>
    > <option value="3">Option 3</option>
    > </select>
    > </form>
    > </body>
    > </html>
    >


    Thanks for that - and thanks for the prompt reply... but it doesn't get
    me to where I want to go... let me explain...

    I am working on an idea whereby data restored from my dbserver is
    written to the form. I want to create a dynamic function whereby I can
    just call it to write the value to the input tag and where the function
    sets the value correctly regardless of its type.

    Thus - When I call complete_field, I will tell it the form name and form
    field name (input tag name) and a value. Then, then function checks the
    input tag type and uses this to decide on best to set the value.

    Thus, your onClick solution would be great if the operator was to click
    on the field/box - but this will not be the case.

    Interestingly, I have found the following code correctly identify's the
    input tag type...



    var counter=0;
    for(counter=0; counter<form_name.length; counter++)
    {
    alert(form_name.elements[counter].type);
    }


    All help is greatly appreciated, and thanks for the prompt reply...

    randelld
    Randell D., Jul 6, 2005
    #4
  5. Randell D.

    RobG Guest

    Re: Checking a form input tag type works only for type text... notothers... why?

    Randell D. wrote:
    >
    > Folks,
    >
    > I have a form called "ourTestForm".
    >
    > Its a test form - nothing special - it contains five input tags - they
    > are named one, two, three, four and five.
    >
    > The input tags are of type text,text,radio,checkbox and select.
    >
    > When I run the following code, it correctly reports "text" (for input
    > tag named "one") but it reports (alerts) input tag four as being
    > "undefined". The same happens for any input tag that is not of type
    > "text".
    >
    > How come? How can I fix it?
    >
    > <script language="JavaScript" type="text/javascript">
    > function complete_field(form_name,field_name,field_value)
    > {
    > var form_name_obj=document.forms[form_name];
    > var field_type=form_name_obj.elements[field_name].type;
    > alert(field_type);
    > return true;
    > }
    >
    > complete_field("ourTestForm","one","whatever");
    > complete_field("ourTestForm","four","whatever");
    > </script>
    >
    >
    > All help via the newsgroup please, so all can learn... thanks,
    >
    > randelld


    Yes, a mystery. You must have somethign wrong with your HTML - of
    course you should never have just one radio button.

    One radio of a group must always be selected, so if you only have one,
    then it should always be selected (though most browsers don't enforce
    it). You can't 'uncheck' a solo radio unless you re-load the page or
    use a reset and clear the entire form).

    Try the following:


    <form action="" name="ourTestForm">
    <input type="text" name="one" value="text one"><br>
    <input type="text" name="two" value="text two"><br>
    <input type="radio" name="three" value="text three">three<br>
    <input type="checkbox" name="four" value="text four">four<br>
    <select name="five">
    <option value="opt0">opt 0</option>
    <option value="opt1">opt 1</option>
    <option value="opt2">opt 2</option>
    </select><br>
    <input type="button" onclick="alert(this.form.four.type);"
    value="click me..."><br>
    <input type="button" value="click me 2" onclick="
    complete_field('ourTestForm','four','whatever');
    "><br>
    <input type="reset">

    </form>
    <script type="text/javascript">

    function complete_field(form_name,field_name,field_value)
    {
    var form_name_obj=document.forms[form_name];
    var field_type=form_name_obj.elements[field_name].type;
    alert(field_type);
    return true;
    }

    complete_field("ourTestForm","one","whatever");
    complete_field("ourTestForm","four","whatever");


    </script>



    --
    Rob
    RobG, Jul 6, 2005
    #5
  6. Randell D.

    Randell D. Guest

    Re: Checking a form input tag type works only for type text... notothers... why?

    RobG wrote:

    > Randell D. wrote:
    >
    >>
    >> Folks,
    >>
    >> I have a form called "ourTestForm".
    >>
    >> Its a test form - nothing special - it contains five input tags - they
    >> are named one, two, three, four and five.
    >>
    >> The input tags are of type text,text,radio,checkbox and select.
    >>
    >> When I run the following code, it correctly reports "text" (for input
    >> tag named "one") but it reports (alerts) input tag four as being
    >> "undefined". The same happens for any input tag that is not of type
    >> "text".
    >>
    >> How come? How can I fix it?
    >>
    >> <script language="JavaScript" type="text/javascript">
    >> function complete_field(form_name,field_name,field_value)
    >> {
    >> var form_name_obj=document.forms[form_name];
    >> var field_type=form_name_obj.elements[field_name].type;
    >> alert(field_type);
    >> return true;
    >> }
    >>
    >> complete_field("ourTestForm","one","whatever");
    >> complete_field("ourTestForm","four","whatever");
    >> </script>
    >>
    >>
    >> All help via the newsgroup please, so all can learn... thanks,
    >>
    >> randelld

    >
    >
    > Yes, a mystery. You must have somethign wrong with your HTML - of
    > course you should never have just one radio button.
    >
    > One radio of a group must always be selected, so if you only have one,
    > then it should always be selected (though most browsers don't enforce
    > it). You can't 'uncheck' a solo radio unless you re-load the page or
    > use a reset and clear the entire form).
    >
    > Try the following:
    >
    >
    > <form action="" name="ourTestForm">
    > <input type="text" name="one" value="text one"><br>
    > <input type="text" name="two" value="text two"><br>
    > <input type="radio" name="three" value="text three">three<br>
    > <input type="checkbox" name="four" value="text four">four<br>
    > <select name="five">
    > <option value="opt0">opt 0</option>
    > <option value="opt1">opt 1</option>
    > <option value="opt2">opt 2</option>
    > </select><br>
    > <input type="button" onclick="alert(this.form.four.type);"
    > value="click me..."><br>
    > <input type="button" value="click me 2" onclick="
    > complete_field('ourTestForm','four','whatever');
    > "><br>
    > <input type="reset">
    >
    > </form>
    > <script type="text/javascript">
    >
    > function complete_field(form_name,field_name,field_value)
    > {
    > var form_name_obj=document.forms[form_name];
    > var field_type=form_name_obj.elements[field_name].type;
    > alert(field_type);
    > return true;
    > }
    >
    > complete_field("ourTestForm","one","whatever");
    > complete_field("ourTestForm","four","whatever");
    >
    >
    > </script>
    >
    >
    >



    Hi,

    Its interesting - your solution above worked exactly the way I want mine
    to work - however I cannot find where I went wrong... I'm using
    Dreamweaver MX and Moxilla 1.7.5 so I would expect the HTML syntax to be
    correct... for reference, I've copy/pasted it below:

    <form name="ourTestForm" method="post" action="">
    <table border="1" align="center" cellpadding="1" cellspacing="1">
    <tr>
    <td width="20">&nbsp;</td>
    <td><input name="one" type="text" id="one"></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><input name="two" type="text" id="two"></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><input name="three" type="checkbox" id="three" value="alpha"> one

    <input name="three" type="checkbox" id="three" value="bravo" checked>two
    <input name="three" type="checkbox" id="three" value="charlie">three

    </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><input type="radio" name="four" value="alpha"> one
    <input name="four" type="radio" value="bravo" checked> two
    <input type="radio" name="four" value="charlie"> three
    </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><select name="five" size="2" id="five">
    <option value="a">alpha</option>
    <option value="b" selected>bravo</option>
    <option value="c">charlie</option>
    <option value="d">delta</option>
    </select></td>
    </tr>
    </table>
    </form>

    <script language="JavaScript" type="text/javascript">
    function complete_field(form_name,field_name,field_value)
    {
    var form_name_obj=document.forms[form_name];
    var field_type=form_name_obj.elements[field_name].type;
    alert(field_type);
    return true;
    }

    complete_field("ourTestForm","one","randell");
    complete_field("ourTestForm","four","randell");
    </script>


    Can you see where I might have gone wrong? The javascript console with
    mozilla does not report errors, yet field types three, four and five are
    alerted as undefined... I've compared your solution to mine - yours
    works - mine fails - and I can't really see where the difference is...

    Can you?

    Thanks for the prompt reply...

    randelld
    Randell D., Jul 6, 2005
    #6
  7. Randell D.

    VK Guest

    Re: Checking a form input tag type works only for type text... not others... why?

    > No mystery, the select element's type attribute was defined in DOM 1:
    > The type of this form control. This is the string "select-multiple"
    > when the multiple attribute is true and the string "select-one" when
    > false

    Oh, thank you. It's always good to know.


    > yet field types three, four and five are alerted as undefined...


    Yep! And even more interestingly that if you do it as all good boys
    should always do: ;-)
    alert(document.forms[0].elements[3].type);
    it works as a charme.

    There are a lot of people out here to explain you that there are not
    neither hash nor array in JavaScript and that there is not any
    difference whether your're addressing a hash table value or an array
    element.

    While they are doing it, you may bring you script into the conventional
    form:

    function restoreFormValues (formName) {
    var formRef = document.forms.formName;
    var len = formRef.elements.length;
    for (i=0; i<len; i++) {
    // Some useful code. Now just:
    alert(formRef.elements.type);
    }
    }
    VK, Jul 6, 2005
    #7
  8. Randell D.

    RobG Guest

    Re: Checking a form input tag type works only for type text... notothers... why?

    Randell D. wrote:
    > RobG wrote:
    >
    >> Randell D. wrote:

    [...]

    > Hi,
    >
    > Its interesting - your solution above worked exactly the way I want mine
    > to work - however I cannot find where I went wrong... I'm using
    > Dreamweaver MX and Moxilla 1.7.5 so I would expect the HTML syntax to be
    > correct... for reference, I've copy/pasted it below:


    In your original post, 'four' was a checkbox, which has a type of
    'checkbox'. In the code below, it's a radio group, so:

    document.forms['ourTestForm'].elements['four'];

    will return a HTML collection of the radio elements. Furthermore, you
    have given all your checkboxes the same name and id, which will cause
    further problems (particularly the multiple ids, which are not valid
    HTML).

    [...]
    > <td><input name="three" type="checkbox" id="three" value="alpha"> one
    >
    > <input name="three" type="checkbox" id="three" value="bravo" checked>two
    > <input name="three" type="checkbox" id="three" value="charlie">three
    >

    [...]
    >
    > Can you see where I might have gone wrong? The javascript console with
    > mozilla does not report errors, yet field types three, four and five are
    > alerted as undefined... I've compared your solution to mine - yours
    > works - mine fails - and I can't really see where the difference is...


    The JavaScript console only reports JavaScript errors, not HTML
    errors. You have to work it out (sometimes it ain't obvious!!).

    Run your page through the W3 HTML validator, you'd be surprised what
    it turns up (and note that the code that Dreamweaver /et al/ produces
    is not highly regarded).

    <URL:http://validator.w3.org/>

    If you are trying to serialise form elements, you better go to the W3
    and thoroughly understand form elements and their attributes as well
    as the DOM and how the two relate to JavaScript (hey, there's a lot to
    learn).

    Have fun!! :)

    --
    Rob
    RobG, Jul 6, 2005
    #8
  9. Randell D.

    Randell D. Guest

    Re: Checking a form input tag type works only for type text... notothers... why?

    RobG wrote:
    > Randell D. wrote:
    >
    >> RobG wrote:
    >>
    >>> Randell D. wrote:

    >
    > [...]
    >
    >> Hi,
    >>
    >> Its interesting - your solution above worked exactly the way I want
    >> mine to work - however I cannot find where I went wrong... I'm using
    >> Dreamweaver MX and Moxilla 1.7.5 so I would expect the HTML syntax to
    >> be correct... for reference, I've copy/pasted it below:

    >
    >
    > In your original post, 'four' was a checkbox, which has a type of
    > 'checkbox'. In the code below, it's a radio group, so:
    >
    > document.forms['ourTestForm'].elements['four'];
    >
    > will return a HTML collection of the radio elements. Furthermore, you
    > have given all your checkboxes the same name and id, which will cause
    > further problems (particularly the multiple ids, which are not valid HTML).
    >
    > [...]
    >
    >> <td><input name="three" type="checkbox" id="three" value="alpha"> one
    >>
    >> <input name="three" type="checkbox" id="three" value="bravo"
    >> checked>two <input name="three" type="checkbox" id="three"
    >> value="charlie">three
    >>

    > [...]
    >
    >>
    >> Can you see where I might have gone wrong? The javascript console
    >> with mozilla does not report errors, yet field types three, four and
    >> five are alerted as undefined... I've compared your solution to mine -
    >> yours works - mine fails - and I can't really see where the difference
    >> is...

    >
    >
    > The JavaScript console only reports JavaScript errors, not HTML errors.
    > You have to work it out (sometimes it ain't obvious!!).
    >
    > Run your page through the W3 HTML validator, you'd be surprised what it
    > turns up (and note that the code that Dreamweaver /et al/ produces is
    > not highly regarded).
    >
    > <URL:http://validator.w3.org/>
    >
    > If you are trying to serialise form elements, you better go to the W3
    > and thoroughly understand form elements and their attributes as well as
    > the DOM and how the two relate to JavaScript (hey, there's a lot to learn).
    >
    > Have fun!! :)
    >



    Thanks again!

    randelld
    Randell D., Jul 6, 2005
    #9
  10. Randell D.

    VK Guest

    Re: Checking a form input tag type works only for type text... not others... why?

    > document.forms['ourTestForm'].­elements['four'];
    > will return a HTML collection of the radio elements.


    And document.forms.ourTestForm.elements[3] will return the needed
    object reference from the "elements" array. This is what OP was looking
    for.
    VK, Jul 6, 2005
    #10
  11. Randell D.

    Matt Kruse Guest

    Re: Checking a form input tag type works only for type text... not others... why?

    Randell D. wrote:
    > I want to create a dynamic function whereby I
    > can just call it to write the value to the input tag and where the
    > function sets the value correctly regardless of its type.


    You might want to check out my "setInputValue" function at:
    http://www.javascripttoolbox.com/validations/

    It does exactly what you're looking for, which might be a bit more complex
    than you're thinking it is.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
    Matt Kruse, Jul 6, 2005
    #11
  12. Randell D.

    RobG Guest

    Re: Checking a form input tag type works only for type text... notothers... why?

    VK wrote:
    >>document.forms['ourTestForm'].­elements['four'];
    >>will return a HTML collection of the radio elements.

    >
    >
    > And document.forms.ourTestForm.elements[3] will return the needed
    > object reference from the "elements" array. This is what OP was looking
    > for.


    Yeah, it returns an object, not a collection (guess I was confused
    with getElementsByTagName). It makes little practical difference in
    this case but it is an important distinction.

    --
    Rob
    RobG, Jul 6, 2005
    #12
  13. Randell D.

    Randell D. Guest

    Re: Checking a form input tag type works only for type text... notothers... why?

    Matt Kruse wrote:
    > Randell D. wrote:
    >
    >>I want to create a dynamic function whereby I
    >>can just call it to write the value to the input tag and where the
    >>function sets the value correctly regardless of its type.

    >
    >
    > You might want to check out my "setInputValue" function at:
    > http://www.javascripttoolbox.com/validations/
    >
    > It does exactly what you're looking for, which might be a bit more complex
    > than you're thinking it is.
    >


    Howye,

    I just noticed your post and... Yeah.... your setInputValue is exactly
    what I wanted to create - I'll examine it closely - I wanted the
    function for a specific purpose but I had also set it as a technical
    goal for myself to help push my javascript knowledge/skills to a new
    level...

    Thanks for the help,
    randelld
    Randell D., Jul 6, 2005
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. shruds
    Replies:
    1
    Views:
    783
    John C. Bollinger
    Jan 27, 2006
  2. Guy
    Replies:
    5
    Views:
    2,820
    brucie
    Dec 13, 2003
  3. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,836
    Smokey Grindel
    Dec 2, 2006
  4. Chris Auer
    Replies:
    1
    Views:
    397
    Chris Auer
    Oct 16, 2007
  5. Travis
    Replies:
    3
    Views:
    356
Loading...

Share This Page