Question

I have three text input boxes that run the same PHP script. The PHP script checks to see if each is empty and generates a search results page. The problem is, the script gets the first input box that is full. For example, if I fill out A then B and then run the search while B is active and was the latest filled, it returns results for A. Same problem if I fill out A then C and B then C.

I’ve been trying to find a way to get the correct search without having to resort to splitting up the script and attaching each separate script to a separate input box, because making changes later would be a pain.

Answer 1

Attach an onfocus event to each box that records which box is active. Then, attach an onsubmit to the form that checks which box was last active. Blank the other two, then submit the form. Something like this (untested):

HTML:

<form action="phpscript.php" onsubmit="checkLastActive();">
Input 1: <input type="text" name="box1" id="box1" onfocus="lastActive=this.id"><br>
Input 2: <input type="text" name="box2" id="box2" onfocus="lastActive=this.id"><br>
Input 3: <input type="text" name="box3" id="box3" onfocus="lastActive=this.id"><br>
<input type="submit">
</form>

JavaScript:

var lastActive="";
function checkLastActive() {
    for (var i=1; i<4; i++) {
        if (lastActive != "box" + i) document.getElementById("box" + i).value="";
    }
}