Question

I am wanting to prevent my submit buttons from being selected untill the user has entered text into my text box feilds.. I have looked into Jquery but am not sure how to apply it to my situations.

if you look at the code below I have a table, this is a section where I can add values to a table in my BD I have 3 other different tables similar but not the same each with their own submit buttons i want to restrict also but off their own text boxes not the others from the different tables…

how could I achive this?

heres one of the tables I have created.

<table width="600">
    <tr>
        <td width="15%">
            <b>name:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdproductname" />
            <span>Enter Text </br>i.e. <i>Super Small</i></span>
            </div>
        </td>
        <td width="15%">
            <b>width:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdproductwidth" />
            <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>height:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdproductheight" />
            <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>normal fill:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdnormalfill" />
            <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>our fill:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdourfill" />
                <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>old price:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdoldprice" />
            <span>Enter Dollar Amount </br>i.e. <i>150.99</i></br>no dollar sign requiered</span>
            </div>
        </td>
        <td width="15%">
            <b>new price:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdnewprice" /> 
            <span>Enter Dollar Amount </br>i.e. <i>150.99</i></br>no dollar sign requiered</span>
            </div>
        </td>
        <td>
            </br><input type="submit" name="submit5050gd" value="Submit 5050gd" id="5050gdmyButton" />
        </td>
    </tr>
</table>

any help would be appreciated

Answer 1

Here is the fiddle link for your assistance:

http://jsfiddle.net/4JyLk/

1. handle in Button click event
2. If all text boxes are given values, proceed with submission else don’t.

Use the link provided for live demo.

Note: You can edit this code, to disable/enable.