type submit vs type button

Question

I have a button which right now is set as a type "submit". This calls the controller, execute some code and returns back to the view. When I use jquery to hide the button, I see that when I click on the button, what I have hides the button but as soon as the view is returned, the button is not hidden no more. Whereas with type "button", when I click the button, this hides the button but doesnt execute the code in the controller. Is there a way to hide the type "submit" button so when the view returns, the button is still hidden?

 $('#btnAdd').click(function() {
            $('#btnAdd').hide();
        });

Answer 1

<input type='submit'> creates a button that submits a form to a server and triggers your server code. If you want the button hidden when the page comes back, you need to add logic to your page to do that. How you do this will depend on your server technology (php, .net, etc.).

The reason the behavior with <button> is different is that <button>s don't submit the form (unless you add more code to make them do that)...so the above mentioned stuff never happens. It's not so much that a <button> stays hidden as much as the page never changes/reloads. If you added code to the <button> to make it refresh the page, it'd reappear, too.

Answer 2

Since the page will be reloaded upon pressing the submit button, the button will reappear. One quick and dirty to get what you want is...

First, create a hidden field

<input type="hidden" id="hidden" value="" />

Then, when you press submit, in a click event for submit button, do something like this..

$('#submit').click(function() {
  $('#hiddenField').val("1");
  $('#form').submit();
  return false;
});

Now in your controller, use the value of hiddenField of pass some variable to the view which can be used like this...

<?php if($hidden == "1"): ?>
  <input type="submit" id="submit" value="Submit" />
<?php endif; ?>

As far as the button not submitting the form is concerned, it won't submit the form, until you submit the form yourself on the click event of button. Something like this...

$('button').click(function() {
   $('#form').submit();
});

Of course, as I mentioned this is a quick and dirty way to implement the function you want, there are better ways - using AJAX, also the implementation can change depending on what server side language you use (I used php over here).

Answer 3

The button is shown because the page is newly displayed after submiting the form. Your "old" page, where clicked and hid the button is history.

What do you want?
Pressing a button, do something on serverside, do not change your current page:
Use a button of type button, use ajax to call the server side. Or use a button of type submit and do what Pablo said http://en.wikipedia.org/wiki/Post/Redirect/Get on serverside.

Pressing a button, do something on serverside, give user feedback: Use <form method="post" to markup your form. Use a submit button to call the server side. On serverside hide the submit button, if it is called by method post (calling a page with link or typing it into the address field is calling it with method = get).

What is the difference between type submit and type button? A submit button works without javascript to send some input to serverside. The surrounding form is send to the server and the response is rendered in browser. A button button needs a javascript onclick handler, a javascript function. The onclick handler is called when the user pressed the button.

Answer 4

When your form is submitted and your controller process the data, if certain criteria is met, you can set a temporary session variable or a cookie in server side code. So, basically the page will check for this variable on every page load. Example in PHP:

if( empty($_SESSION['temp']['hideSubmitButton']) ) {
    $submitButton = '<button type="submit">Normal Button</button>';
} else {
    $submitButton = '<button type="submit" disabled="disabled">Disabled Button</button>';
    // or $submitButton = '';
}

But then you have to decide when to unset() the $_SESSION['temp'] or $_COOKIE['temp'] variable.