Forms, Post and submit buttons

Question

I feel a little silly asking this but I wanted everyones opinion on it.

I want to submit a page, target itself, on the press of a button but carrying one piece of data with it.

Example:

Edit | Delete

On the click on edit, I want the page to reload with $_POST['example'] === "edit" or something. I don't want to use $_GET and I don't want to use the ugly submit button.

Any ideas?

Answer 1

Create form carrying the data you want to send and send it using JavaScript when you click a link if you want to avoid submit buttons.

Answer 2

You could use Ajax to submit a POST request or style a submit button to look like a link (or whatever else you'd like).

Answer 3

You may submit your form via link.

<a href='#' onclick='document.myform.submit()'> Edit </a>

Answer 4

You should probably go ahead and use submit buttons, but use CSS to change how they look. For example:

<input class="aslink" type="submit" />

.aslink {
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

Answer 5

In Rails there is a helper method for doing just that. When you click the link, it creates a form and hidden submit button on the fly and submits that form. Here is what it generates (with linebreaks added for readability):

<a href="/images/9" onclick="if (confirm('Are you sure?')) { 
  var f = document.createElement('form');
  f.style.display = 'none';
  this.parentNode.appendChild(f);
  f.method = 'POST';
  f.action = this.href;
  var m = document.createElement('input');
  m.setAttribute('type', 'hidden');
  m.setAttribute('name', '_method');
  m.setAttribute('value', 'delete');
  f.appendChild(m);
  f.submit(); };
  return false;">Delete Image</a>

Obviously your href would be mypage.php rather than /images/9, but in this example you would have access to $_POST['value'] == "delete".

Answer 6

You could use the button tag:

<button type="submit">put some html</button>

You can put html tags or images in to it and style it to your hearts content.

Answer 7

<input class="aslink" type="submit" />

.aslink { background: transparent; border: none; cursor: pointer; text-decoration: underline; }

ideally you would want to write the css out like this:

input.aslink

doing this will lock down those styles to ONLY being used by input tags with the appropriate class