CODEWITHSUNDEEP
formsruby-on-rails-3.2
user1656427
user1656427

Reputation: 51

rails 3 - Add a Button that won't submit a form

I am trying to add a few "next" and "back" buttons to a form. The Idea is to divide the filling-out process into several steps and with these buttons, the div of the current step gets hidden and the next resp. previous step is displayed.

My Problem is that when I add buttons in the following way...

<button class="proceed_button" id="loan_information">Proceed</button>
<button class="cancel_button" id="loan_information">Cancel</button>

... they submit the form. Is every button inside a form-tag considered to be a submit-button? If so, how can I change this behavior? If not, why are they doing it then?

Upvotes: 2

Views: 1567

Answers (2)

user1656427
user1656427

Reputation: 51

Ok, the solution is that the button needs a type.

<button type="button" class="proceed_button" id="loan_information">Proceed</button>
<button type="button" class="cancel_button" id="loan_information">Cancel</button>

Like this, it won't submit the form anymore.

According to http://w3schools.com/html5/att_button_type.asp the default type is depending on the browser, so you should always specify the type.

Upvotes: 2

agmin
agmin

Reputation: 9348

I'm not sure that you want a button, maybe you want it to look like a button. Either way, refer to this post: rails 3: display link as button?

Once you have your button, you'll need to update your javascript to prevent anything from happening when it's clicked (assuming you have jquery). It's still nice to provide a real fallback for those dinosaurs without js, so assuming your proceed button submits for users without js, for those with js you'd do something like:

$('#proceed_button').click(function(e) { e.preventDefault(); // Show and hide your divs here });

Also note that in your posted code you should not have two buttons with the same id, your ids and classes look swapped.

Upvotes: 1

Related Questions