Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Use Javascript to empty all other fields

  1. #1
    Join Date
    Mar 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Use Javascript to empty all other fields

    Hi,
    I want to use javascript to make all other fields empty when you focus on one.

    FOr example

    I have 3 text fields. When a user clicks into textfield A, I want textfield B and C to be empty. Is there an easy way of doing this rather than listing

    Code:
    onfocus="document.propSearch.City.value='';
    document.propSearch.Subdivision.value= '';
    document.propSearch.ListingID.value = '';"
    Like you can do this.value, is there a way to do else.value?

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Hmm... i'm not sure.
    However, it might make more sense to use a function rather than using that directly in your tags.

    something like:

    <script>
    function dostuff {
    document.propSearch.City.value='';
    document.propSearch.Subdivision.value= '';
    document.propSearch.ListingID.value = '';
    }
    </script>


    Then, in your tag, onfocus="dostuff();"

    I haven't tested this and don't know if it'll work as is, but i'm just posting it as an idea anyway, not code that will work without tweaking.

    That's just a nice way to organize... crazy to have that all in your tag.

    Not sure about "this" vs "else".


    Another idea would be to think about it as "all-this"... so.... set ALL to blank, then set this back to the value.
    You could do it just like that if there's an "all" command that would fit.

    OR, figure out the reset command for the entire form (if the entire form... hopefully) and reset it. Then have that value stored in a JS var, and then saved to your chosen field AFTER all are reset.

    It fakes what you want.



    One more thought. First, this code probably isn't standard and might have issues in browsers, or in general. Here's just a thought, though:
    If you were to put a new form tag around a section of an existing form, you could just control that.
    So..
    HTML Code:
    <form name="main">
      <input....>
      <input....>
      <form name="inner">
        <input....>
        <input....>
      </form>
    </form>
    Then, if you were to reset the form "inner", then just those items should be reset.
    I'm not sure how embedding forms inside each other works. I do know that if you put one inside another, then click submit within the inner one, it reverts back to the action (next page) of the outer form. That might be the same with reset and similar functions.
    This might totally solve your problem though.



    And...
    I want to use javascript to make all other fields empty when you focus on one.
    All the solutions above and yours mean you'd need one function for each field. fine if you want to cody by hand, but can't be the simplest way.

    What you might try is setting the names of all the fields in an array. Then reset "all but this", or perhaps all, then set "this" back to the value (as with my resetting idea above).


    good luck... food for thought.

    hope something leads in the right direction.

    Also, you should look into that "else" function you meantioned. I don't know if it exists, but that would solve it easily. Heh.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not clear on what you want. This function will clear all text fields on a page:

    Code:
    function clearAll(){
    var texts=document.getElementsByTagName('input')
    for (var i_tem = 0; i_tem < texts.length; i_tem++)
    if (texts[i_tem].type=='text')
    texts[i_tem].value=''
    }
    You can call it from a text input field like so:

    HTML Code:
    <input type="text" onfocus="clearAll();">
    If you want to clear all but the element being given focus, this function:

    Code:
    function clearAll(el){
    var texts=document.getElementsByTagName('input')
    for (var i_tem = 0; i_tem < texts.length; i_tem++)
    if (texts[i_tem].type=='text'&&texts[i_tem]!==el)
    texts[i_tem].value=''
    }
    and this call will work:

    HTML Code:
    <input type="text" onfocus="clearAll(this);">
    You could also simply reset the form(s) on your page but that would do more than simply clear the values of the text inputs. It depends upon what you want to do and why.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by abskure
    I want to use javascript to make all other fields empty when you focus on one.
    Have you considered the implications of that? What if the user presses the Tab key to move between fields, and focuses on that control on their way to some other control. Should these fields still be cleared? Moreover, will you be relying on this when the data is sent? If the user has scripting disabled, will uncleared fields confuse whatever's server-side?

    You may need to rethink your design.

    Is there an easy way of doing this rather than listing

    Code:
    onfocus="document.propSearch.City.value='';
    document.propSearch.Subdivision.value= '';
    document.propSearch.ListingID.value = '';"
    There are a couple of ways to do this. For instance, one could pass the names of controls along with a reference to the form:

    Code:
    function clear(form) {
      for (var i = 1; i < arguments.length; ++i)
        form.elements[arguments[i&#93;].value = '';
    }
    HTML Code:
    <input ... onfocus="clear(this.form, 'City', 'Subdivision', 'ListingID');">

    Quote Originally Posted by jscheuer1
    Code:
    function clearAll(el){
    var texts=document.getElementsByTagName('input')
    for (var i_tem = 0; i_tem < texts.length; i_tem++)
    if (texts[i_tem].type=='text'&&texts[i_tem]!==el)
    texts[i_tem].value=''
    }
    I think the call to gEBTN can be avoided. The OP should only want to clear controls within a particular form, so simply iterating through the elements collection of that form should suffice:

    Code:
    function clearAll(form, skip) {
      var controls = form.elements;
    
      for (var i = 0, n = controls.length; i < n; ++i) {
        var current = controls[i&#93;;
    
        if ((current.type == 'text') && (!skip || (current != skip)))
          current.value = '';
      }
    }
    A call such as:

    HTML Code:
    <input ... onfocus="clearAll(this.form);">
    would clear all text controls in that form. A call such as:

    HTML Code:
    <input ... onfocus="clearAll(this.form, this);">
    would clear all text controls except the one that just received focus.

    Mike

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Sorry, nothing to do with the thread, just curious:
    Mike, is there any particular reason you used ++i rather than i++ in that loop? Is anything done with the return value? Or is that just the way you do it, for no real reason?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Twey
    Mike, is there any particular reason you used ++i rather than i++ in that loop? Is anything done with the return value? Or is that just the way you do it, for no real reason?
    Habit.

    It's more efficient in some cases (though not noticably in ECMAScript) to use pre-increment and -decrement. For example, in C++, it avoids invoking the copy constructor when using iterators.

    Mike

  7. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Interesting... I'll remember that.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Mike
    I think the call to gEBTN can be avoided. The OP should only want to clear controls within a particular form
    The OP said the page, so I did the page. It is a silly seeming request/idea but, we have no real idea why the OP specified the whole page, it could be important to the design/function, there could be no form on the page, various things could be in play. Forms and their elements are sometimes used without submission in mind and/or without a form.

    There is a good chance that the OP hasn't thought this all through, and in that case your advice is more than sound. If they have and do want exactly what they asked for, gEBTN would be a good way to go.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,
    I was using jscheuer's script to clear all text fields on a page:

    function clearAll(){
    var texts=document.getElementsByTagName('input')
    for (var i_tem = 0; i_tem < texts.length; i_tem++)
    if (texts[i_tem].type=='text')
    texts[i_tem].value=''
    }

    But I was wondering, how can I set the focus to the first element found in the form?
    I tried something like this (by passing a parameter to set focus):

    function clearAllAndFocus(focusElem){
    var texts=document.getElementsByTagName('input')
    var focus_flag = 0
    for (var i_tem = 0; i_tem < texts.length; i_tem++)
    if (texts[i_tem].type=='text')
    texts[i_tem].value=''
    document.getElementById("#{focusElem}").focus()
    }

    and called it like this:
    <input name="commit" onclick="clearAllAndFocus(':server_name');" type="button" value="Reset" />

    But it's not working...
    Can anybody help please?

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    "#{focusElem}"
    What on Earth is this all about? It looks like Ruby. In Javascript there's no need for this, you just say:
    Code:
    document.getElementById(focusElem).focus();
    The colon (:) character isn't valid in an ID either.

    Stay away from XHTML for now due to IE's lack of support.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •