I'm allowing a user to use either one of two textboxes to search a database - one is an ID field, and one is a freetext field. I'm using ASP.NET with C# btw.

Anyway, all I need to do is have it so when a user clicks on one of the text boxes, the other text box text is simply deleted, so the other text box is blank.

How would I do this? I'm guessing JavaScript is the solution.

I'm allowing a user to use either one of two textboxes to search a database - one is an ID field, and one is a freetext field. I'm using ASP.NET with C# btw.

Anyway, all I need to do is have it so when a user clicks on one of the text boxes, the other text box text is simply deleted, so the other text box is blank.

How would I do this? I'm guessing JavaScript is the solution.

• c#
• javascript
• asp

Share Improve this question Follow edited Oct 7, 2010 at 16:39 Chase Florell 47.5k5959 gold badges190190 silver badges382382 bronze badges asked Oct 7, 2010 at 16:20 ChrisChris 7,6212222 gold badges105105 silver badges196196 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Given a function in javascript:

function clearOther(which){
 document.getElementById(which).value='';
}

this can then be called when you focus on one textbox, passing the id of the other:

<input type="text" id="box1" onfocus="clearOther('box2')" />
<input type="text" id="box2" onfocus="clearOther('box1')"  />

working example --> http://jsfiddle/CwWKn/

[Demo]

var tbox1 = document.getElementById('tbox1');
var tbox2 = document.getElementById('tbox2');

tbox1.onfocus = function() {
  tbox2.value = "";
};

tbox2.onfocus = function() {
  tbox1.value = "";
};

I +1'ed Jamiec 's answer, but you still have to have some logic for those who don't have JS enabled. Maybe use the ID field as a priority if BOTH field's are populated.

if ((!box1.IsNullOrEmpty) & (!box2.IsNullOrEmpty)) {
    // Evaluate box1 (since box1 is the ID field)
} else {
    if ((!box1.IsNullOrEmpty)) {
        // Evaluate box1
    } else {
        // Evaluate box2
    }
}

//Page A
<input type='text' id='tb'>
 var returnedValue = showModalDialog('page2.aspx', window);

//Page B
<input type='text' onkeypress='update(this);'>

function update(Sender) {
var input = window.dialogArguments.document.getElementById("tb");
input.value = Sender.value
}