railsgoat/app/views/pay/index.html.erb

<div class="dashboard-wrapper">
	<div class="main-container">
		<div class="row-fluid">
			<div class="span12">
				<div id="success" style="display: none;" class="alert alert-block alert-success fade in">
		            <h4 class="alert-heading">
		              Success!
		            </h4>
		            <p>
		              Information successfully updated.
		            </p>
		          </div>
			</div>
		</div>	
		<div class="row-fluid">
			<div class="span12">
				<div id="failure" style="display: none;" class="alert alert-block alert-error fade in">
                    <h4 class="alert-heading">
                      Error!
                    </h4>
                    <p>
                      Failed to update.
                    </p>
                  </div>
			</div>
		</div>
		<!-- Begin Row-Fluid for Inputs -->
		<div class="row-fluid">
		   	<div class="span9">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe14c;"></span> Direct Deposit
                  </div>
                </div>
                <div class="widget-body">
					<div class="row-fluid">
						<%= form_tag "#", {:class => "form-horizontal", :id => "bank_info_form" } do %>
							<!-- Begin inputs-->
							
								<div class="input-append">
								  <%= text_field_tag :bank_account_num, params[:bank_account_num], {:placeholder => "Bank Account Number"} %>	
								  <span class="add-on">#</span>
								</div>
							
								<div class="input-append">
								  <%= text_field_tag :bank_routing_num, params[:bank_routing_num], {:placeholder => "Bank Routing Number"} %>
								  <span class="add-on">#</span>
								</div>
							
							
			      				<div class="input-append">
								  <%= text_field_tag :dd_percent, params[:dd_percent], {:placeholder => "Percentage of Deposit"} %>
                  				  <span class="add-on">%</span>
                  				</div>
						
							<!-- End Inputs -->
							<%= submit_tag "Submit", {:id => "dd_form_btn", :style => "margin-left: 10px;", :class => "btn btn-medium btn-primary"} %>
						<% end %>	
						</div>	
                </div>
              </div>
            </div>
		</div>
		<!-- End  Row-Fluid for Inputs-->
		<!-- Begin Table Stuff -->
		<div class="row-fluid">
            <div class="span9">
              <div class="widget no-margin">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe14a;"></span> Deletable Table Row
                  </div>
                </div>
                <div class="widget-body">
                  <table class="table table-striped table-bordered no-margin">
                    <thead>
                      <tr>
                        <th style="width:25%">
                          Bank Account Number
                        </th>
                        <th style="width:25%">
                          Bank Routing Number
                        </th>
                        <th style="width:25%">
                         Percentage of Deposit
                        </th>
                        <th style="width:25%">
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td >
                          1
                        </td>
                        <td>
                          Srinu
                        </td>
                        <td class="hidden-phone">
                          Active
                        </td>
                        <td class="hidden-phone">
                          <a class="delete-row" data-original-title="Delete" href="#">
                            <i class="icon-trash">
                            </i>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          2
                        </td>
                        <td>
                          Baswa
                        </td>
                        <td class="hidden-phone">
                          Active
                        </td>
                        <td class="hidden-phone">
                          <a class="delete-row" data-original-title="Delete" href="#">
                            <i class="icon-trash">
                            </i>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          3
                        </td>
                        <td>
                          Prem
                        </td>
                        <td class="hidden-phone">
                          Inactive
                        </td>
                        <td class="hidden-phone">
                          <a class="delete-row" data-original-title="Delete" href="#">
                            <i class="icon-trash">
                            </i>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          4
                        </td>
                        <td>
                          Arjun
                        </td>
                        <td class="hidden-phone">
                          Active
                        </td>
                        <td class="hidden-phone">
                          <a class="delete-row" data-original-title="Delete" href="#">
                            <i class="icon-trash">
                            </i>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          5
                        </td>
                        <td>
                          Gajju
                        </td>
                        <td class="hidden-phone">
                          Inactive
                        </td>
                        <td class="hidden-phone">
                          <a class="delete-row" data-original-title="Delete" href="#">
                            <i class="icon-trash">
                            </i>
                          </a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
			<!-- End Table Stuff-->
		</div>
	</div>
</div>

<script type="text/javascript">

$('.delete-row').click(function () {
        var conf = confirm('Continue delete?');
        if (conf) $(this).parents('tr').fadeOut(function () {
          $(this).remove();
        });
          return false;
        });


$("#dd_form_btn").click(function(event) {
     var valuesToSubmit = $("#bank_info_form").serialize();
     event.preventDefault();
     $.ajax({
       url: <%= sanitize(update_dd_info_user_pay_index_path(:format => "json").inspect) %>,
 	  data: valuesToSubmit,
 	  type: "POST",
 	  success: function(response) {
 		$('#success').show(500).delay(1500).fadeOut();
 	  },
 	  error: function(event) {
 		$('#failure').show(500).delay(1500).fadeOut();
 	  }
 	});
 });

	function makeActive(){
		$('li[id="pay"]').addClass('active');
	};
	
 $(document).ready(makeActive)

</script>