Use Javascript to empty all other fields

[abskure]

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

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?

[djr33]

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..

<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.

[jscheuer1]

I'm not clear on what you want. This function will 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=''
}

You can call it from a text input field like so:

<input type="text" onfocus="clearAll();">

If you want to clear all but the element being given focus, this function:

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:

<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.

[mwinter]

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

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:

function clear(form) {
  for (var i = 1; i < arguments.length; ++i)
    form.elements[arguments[i&#93;].value = '';
}

<input ... onfocus="clear(this.form, 'City', 'Subdivision', 'ListingID');">

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:

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:

<input ... onfocus="clearAll(this.form);">

would clear all text controls in that form. A call such as:

<input ... onfocus="clearAll(this.form, this);">

would clear all text controls except the one that just received focus.

Mike

[Twey]

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?

[mwinter]

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

[Twey]

Interesting... I'll remember that.

[jscheuer1]

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.

[arifin]

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?

[Twey]

"#{focusElem}"

What on Earth is this all about? It looks like Ruby. In Javascript there's no need for this, you just say:

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.