Clearing a text box

Question

Would appreciate any help from anyone... the below PHP contains a list of items from a txt file, next to each item is a text box for the user to enter the qty, by default set to 1. I'm trying to clear the box when the user clicks on a text box, any ideas?

<input type='text' id='qty' name='$partno' size='1' value='0'>

So far I've tried using JavaScript but had no luck.

        <script>
        function validateName()
        {
            var x=document.forms["purchase"]["visitor"].value;
            if (x==null || x=="")
            {
                alert("Visitor name must be entered");
                return false;
            }
        }

        function name()
        {  
            document.getElementById('qty').value = "";
        }
    </script>
</head>

<body>

    <h1>Items Available</h1>

    <form id="purchase" name="purchase" action="confirm.php" method="post" onsubmit="return validateName()">
        <table>

            <h3>Visitor Name: <input type='text' name='visitor'></h3>
            <tr><th></th><th></th><th></th><th>Price</th><th>QTY</th></tr>

            <?php
            if (!($data = file('items.txt'))) {
                echo 'ERROR: Failed to open file! </body></html>';
                exit;
            }
            foreach ($data as $thedata) {

                list($partno, $name, $description, $price, $image) = explode('|', $thedata);
                echo "<tr><td><img src='$image' width='60' height='60' alt='image'></td><td><h3>$name</h3></td><td>&nbsp;&nbsp;&nbsp;&nbsp;$description</td>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;<b>&pound;$price</b></td><td><input type='text' id='qty' name='$partno' size='1' value='0'></td></tr>";
                //<input type='text' size='1' name='partno_qty' value='1'</td>
            }
            ?> 

        </table>

        <input type="submit" value="Purchase">
        <input type="reset" value="Clear">

    </form>

The PHP for this is rather irrelevant to the question; I think it'd be helpful if you just posted the resulting HTML without the PHP for better readability. — MichD
– MichD, Commented Mar 27, 2013 at 19:39
In addition, you setting identical id attributes in a for loop, resulting in duplicate ids on the same page. An ID can only occur once within an HTML document; it needs to be unique. — MichD
– MichD, Commented Mar 27, 2013 at 19:40

danielinthebed · Accepted Answer · 2013-03-27 21:41:41Z

1

Add an onclick or onfocus handler to your "input name=qty" tag, or look at using a "placeholder" attribute, which may not work in some browsers you have to support:

foreach ($data as $thedata)
{
    list($partno, $name, $description, $price, $image) = explode('|', $thedata);
                echo '<tr><td><img src="' . $image . '" width="60" height="60" alt="image"></td>'
                . '<td><h3>' . $name . '</h3></td><td>&nbsp;&nbsp;&nbsp;&nbsp;' . $description . '</td>'
                . '<td>&nbsp;&nbsp;&nbsp;&nbsp;<b>&pound;' . $price . '</b></td>'
                . '<td><input type="text" id="part-' . $partno . '" '
                . 'name="' . $partno . '" size="1" '
                . 'value="0" onfocus="this.value=\'\';" placeholder="0"></td>'
                . '</tr>';
}

The "onclick/onfocus" approach will clear the box every time it's clicked/entered. If you wish to use your "name" function, the call changes to this:

onfocus="name( this );"

And "name" changes to:

function name( obj )
{  
    obj.value = "";
}

edited Mar 27, 2013 at 21:41

danielinthebed

114 bronze badges

answered Mar 27, 2013 at 19:40

J.D. Pace

6161 gold badge4 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jszobody Over a year ago

Might be better to use onFocus so that it works if the user tabs to the field

danielinthebed Over a year ago

I can't since the name is a variable.

J.D. Pace Over a year ago

Sure you can. If you must call a function to perform the action, you can always pass "this" to it, which is a reference to the object receiving the event.

danielinthebed Over a year ago

I problem is the txt box is within PHP so the onfocus syntax doesn't comply.

J.D. Pace Over a year ago

The "name" function you defined is not in PHP, it's in JavaScript. Passing "this" to an onfocus event handler will work, and it's completely separate from PHP. I editied my answer above to create unique IDs for your text boxes, too.

razz · Accepted Answer · 2013-03-27 21:10:49Z

you can use HTML5 placeholder and required attributes:

<form>
<input type="text" placeholder="Name" required />
<input type="submit" value="submit" />
</form>

DEMO

Notes:
The placeholder attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari. The required tag is supported in Internet Explorer 10, Firefox, Opera, and Chrome. It's not supported in Safari

or you can do it in JS like this:

<input type="text" onfocus="inputFocus(this, 'initial text')" onblur="inputBlur(this, 'initial text')" value="initial text" />

'initial text' is the default value of the text input when page loads e.g.('Your Name').

function inputFocus(elm, placeholder){
    if (elm.value == placeholder){ elm.value = "" }

}

function inputBlur(elm, placeholder){
    if (elm.value == "" || elm.value == placeholder){
        elm.style.border = "1px solid red";
        elm.value = placeholder;
        alert("Visitor name must be entered");
    }else{
        elm.style.border = "1px solid green";
    }
}

DEMO

Collectives™ on Stack Overflow

Clearing a text box

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related