Question

I have a button (styled as button with CSS). Next to it is an input field. I would like the button value to change dynamically as the user types a value in the textfield. What is the simplest way to do this?

My form:

<form>
    <div class="span-3" id="bid_btns">
        <div id="bid_button">
            <a href=""><?php echo $somethingwhichshouldchange; ?></a>
        </div>
    </div>
    <div class="span-3 last" id="bid_btns">
        <div id="bid_field">
        <input type="text" class="title" name="bid_field" id="bid_field" maxlength="5"/>​
        </div>
    </div>
</form>

Answer 1

If you want to make the button label/value change as you type, PHP is not going to help. You need a script running in the browser – JavaScript. If you use jQuery (you did ask for the simplest way, and jQuery makes this much simpler), you need some code to change the button as the input value changes.

$(document).ready(function() {

    $("#bid_field").keyup(function(){
        $("#bid_btns").text($(this).val());
    });

});

This bit of code will change the html inside the #bid_btns button to whatever is typed into the #bid_field input. If you’re not familiar with jQuery, you can learn more by reading this article: http://docs.jquery.com/How_jQuery_Works

Note – edited per BenM’s siggestion.