让我的按钮类型=“提交”打开另一只手风琴

Question

On my website which is using Bootstrap3 and I have a page which has 3 accordions on. All the accordions have fields and buttons and each has there own process in them.

The issue I have is that when I click my <button type="submit"> from accordion 1, I want it to open accordion 2 (for example). The button has to fire in my code behind so that it terminate the process done in accordion 1 before opening accordion 2. Obviously I cant use <button type="button"> as this doesn't fire in the code behind and I styled a <a> but then realized I couldn't get this to fire in the code behind.

One solution I was given was to add href to the button although this isn't supported as it removes everything from my accordions so what other ways can I direct my button to fire in code behind to end my process and then open accordion 2.

Maybe it needs to be done in JavaScript/jQuery or directly in HTML I don't know. I would prefer HTML but I'm open to all suggestions please.

I Googled it and I know that for a button type="button" the following attributes are required data-toggle="collapse" data-parent="NameOfMyParent"

Answer 1

Yes, you have to use javascript (as you already do it with the accordion). I assume you use jquery (as you use Bootstrap). So a solution, is to bind an event to prevent the submit (on form submit or on button click), and submit the form with $.ajax() (this can be complex if your form contains some upload process).

$("#your_form_id").on("submit", function(e){
  e.preventDefault();
  var url = $(this).action;
  var data = {};
  /* get your form datas here */
  $.ajax({
    url:url,
    data:data,
    /* use any of theses callback, or none 
     *if you don't care about the request is correct or not
     */
    success:function(res){},
    error:function(res){},
    complete:function(res){
       // call your second accordion here
    }
  })
});

Alternatively, you can use a <input type="button"> and do the opposite work: bind an event to it to fire the submit, or just start the accordion, or anything.

Answer 2

Fixed. All i needed to do was add an id to the panel-body and then reference it in my button using data-target