html how to make “input” text is different from value passing to server

Question

Could someone please tell me whether there is a way to differentiate the text showing on the input button and the value it will pass into server when click the button.

For example, I have a input button, when it is clicked, I would like it to pass "100" into server (I just set value = 100), but instead of showing me "100" on the button, I would like it to show "200".

In this case, is there a way to do it ? what if I don't use "button" instead?

Thanks very much!

Answer 1

Depending on what you're actually trying to accomplish, one way would be to use a hidden field instead of relying on the button's value:

<!-- Instead of -->
<form>
     <input type="submit" name="buttonName" value="200">
</form>   
<!-- Do this -->
<form>
     <input type="hidden" name="buttonName" value="100">
     <input type="submit" value="200">
</form>

Or you can use a button instead of input , and it can have a different text and value:

<form>
    <button type="submit" name="buttonName" value="100">200</button>
</form>