≪Button≫ Vs. ≪Input Type="Button" /≫. Which to Use

button vs. input type=button /. Which to use?

• Here's a page describing the differences (basically you can put html into a <button></button>)
• And another page describing why people avoid <button></button> (Hint: IE6)

Another IE problem when using <button />:

And while we're talking about IE, it's
got a couple of bugs related to the
width of buttons. It'll mysteriously
add extra padding when you're trying
to add styles, meaning you have to add
a tiny hack to get things under
control.

Difference between input type='button' / and input type='submit' /

<input type="button" /> buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.

<input type="submit"> buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.

The first submit button of the form is also the one being clicked for implicit submission, f.e. by pressing enter in a text input.

Two submit buttons in one form

If you give each one a name, the clicked one will be sent through as any other input.

<input type="submit" name="button_1" value="Click me">

Difference between button and input?

Here's a page describing the differences (basically you can put html into a <button></button>

And an other page describing why people avoid <button></button> (Hint: IE6)

Reference: <button> vs. <input type="button" />. Which to use?

Also have a look at this slideshow about button.

How can I customize my input type=button?

Change

button, input

to

button, input[type="button"]

This uses CSS' attribute selector syntax. Or give your inputs of type button a common CSS class. Ex <input type="button" class="myButton"> and then change your selector to:

button, .myButton {...

Button vs link vs input type=submit on a form

I would definitely use a link: progressive enhancement.

You want the button to be usable even with Javascript turned off (remember: every user is a non-javascript-user for the duration of the page load. If they're on a slow connection (e.g. mobile), they should be able to reply as soon as they see the button).

Styling is a non issue (you weren't gonna use the default button styles, were you?).

Using POST when the user isn't submitting anything sure is wrong. Even with GET, it's still not really form material...

POST the values of several html input type='button'

You could use radio/option buttons and do some very nice styling.

See:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://www.sitepoint.com/15-jquery-radio-button-checkbox-style-plugins/
http://www.tutorialrepublic.com/faq/how-to-create-custom-radio-buttons-using-css-and-jquery.php
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/

Some really nice ones:

http://www.dynamicdrive.com/style/csslibrary/item/css3_oval_switch_checkboxes/
http://www.webdesignerdepot.com/2011/07/css-buttons-tutorials-and-examples/

Along your lines:

http://viralpatel.net/blogs/css-radio-button-checkbox-background/

Below taken from "Last Link":

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

Can't submit the right button for each input field [multiple buttons and input fields in a single form]

EDIT: I might be approaching this problem the wrong way.. Now im
thinking maybe i should find the button that was clicked and then get
the previous element's value

Yes you're correct on this one. You should take this approach.

I've made a sample code for you to use:

HTML:

<div class=verktyg>
  <form action='sell_items.php' method='POST' id='ajax'>
    <table class="inventory">
      <tr>
        <td class='verktyg-first-td'>Item 1</td>
        <td>10</td>
        <td>
          <input type='number' name='item_1' value='10'>
        </td>
        <td>
          <button type='submit' class='submit_button'>sell</button>
        </td>
      </tr>
      <tr>
        <td class='verktyg-first-td'>Item 2</td>
        <td>20</td>
        <td>
          <input type='number' name='item_2' value='20'>
        </td>
        <td>
          <button type='submit' class='submit_button'>sell</button>
        </td>
      </tr>
    </table>
  </form>
</div>

Jquery:

 // prevent for submission
 $("form").submit(function(e) {
   e.preventDefault();
 });

 // when submit button is clicked
 $(".submit_button").on("click", function() {
   self = $(this);
   form = self.closest("form");
   url = form.attr('action');
   type = form.attr('method');
   parentTr = self.parent("td").closest("tr"); // get the parent <tr>
   data = {};

   inputElm = parentTr.find("input[type=number]"); // find input element closest to the clicked button
   name = inputElm.attr('name'); // get input name
   value = inputElm.val(); // get input val
   data[name] = value;

   // send ajax request
   $.ajax({
     url: url,
     type: type,
     data: data,
     success: function(response) {
       console.log(response);
     }
   });
 });

So first, I fixed some issues on your code. Like having multiple the same ID when you did a loop id='verktyg-first-td'. So I changed that to class instead.

And I changed how you triggered your function. Instead of triggering when the form is submitted, trigger it when the button is clicked.

But still, my quantity is undefined. Need to figure a way to obtain
that value...

var quantity = $(btn).prev("input[type=number]").val();

Yes, that would work if your structure is:

    <td>
      <input type='number' name='item_1' value='10'>
      <button type='submit' class='submit_button'>sell</button>
    </td>

But the input element you were looking for is inside another <td>.

So you have to find first the closest <tr>

parentTr = self.parent("td").closest("tr");

then look for that input[type=number].

inputElm = parentTr.find("input[type=number]");

Update:

if(isset($_POST['item'])) dosent detect the button click and says
"Undefined index: item"

First to fix this, re add the attributes back to the button element.

e.g.

<button type='submit' class='submit_button' name="item" value='button_value'>sell</button>

then add this code below after data[name] = value;

// get button val
value = self.val();
name = self.attr('name');
data[name] = value;

---

Related Topics