HTML Form Button value is not posted in Safari and Chrome

Question

I am using jQuery to submit a form when a button is clicked. I would then like to test the value of the button, however, this doesn\'t get submitted in Safari and Chrome. Wh

Answer 1

<button> and <input> are two different tag. If you want to submit your button values then use <input> tag.

Answer 2

Agree with Vins, I'd probably use <input>.

Is there a particular reason why you are using <button> instead of <input>? I typically prefer <button> (allows me to add icons and images), but I believe there are differences between browsers regarding how value is interpreted...

According to w3schools Mozilla Developer Network, some browsers will submit the value attribute, while other browsers such as IE7 will incorrectly submit the text between the tags.

Answer 3

As Robert says above when using the <button> tag you need both name="" and value="", e.g.

<button name="Search" value="Simple" type="submit">Search</button>

VS

<button name="Search" value="Advanced" type="submit">Search</button>

In this example your POST data would have the Key Value pair of:

Search Simple

or

Search Advanced

And then based on that POST value you can write your code to take the appropriate action. :)

i.e. you don't need to use input, just use button with name/value and you'll be fine.

Answer 4

Button disabled during submit/click event doesn't submit its value

As per Alan Stewart, I had this problem introduced when I wrote a little utility to prevent double-clicking a form submit button which listened for "submit" and disabled the button.

I changed my code so it determines if the form has already been submitted, and if so, disables the button and prevents the form submitting via event.preventDefault().

It's not as nice as before which immediately disabled the button which gave instant visual feedback (since Bootstrap has a style for disabled buttons).

Answer 5

So, I had a very similar thing happen to me. Everything works, except in Chrome [Version 78.0.3904.108 (Official Build) (64-bit)].

When I took out the id= in my <button>, it worked! But that was NOT the problem. The problem turned out to be that I am disabling the [Submit] button at onclick= in the <button> tag (using the button id=). When you do this, Chrome appears to just not post anything. Which is kinda pointless? And weird? And I have no idea why?

So I spent a huge bunch of time digging around and found out that you CAN disable the [Submit] button at onsubmit= in the <form>. In fact, onsubmit= is almost the same as onclick= so in the future I think I need to just change things so that I always use onsubmit= and then ALL the big browsers will continue to work for me.

Answer 6

This is probably super obvious and now that I fixed it on my own I realize was a stupid mistake. But for me, I had mistakenly left off type="submit". Form always worked, but just posted a value from those buttons.

No value passed (bad):

<button name="step" id="btn1" value="my_value">btn_text</button>

Value passes (good):

<button type="submit" name="step" id="btn1" value="my_value">btn_text</button>

Anyway, I hope this helps someone new that is starting out, or stuck on something that seems so obvious.

Cheers!