Question

I've the following initial structure:

PrimaryLabel: 'Drop-Down' [Add Button]

Once I click on the Add button, Another Label: 'Drop-Down' [Add Button] must be displayed :: That's the requirement. Maximum such lines? => 5

PrimaryLabel: 'Drop-Down' [Add Button]
Label: 'Drop-Down' [Add Button]

I've set all labels', Drop-downs' and Button' [other than primary] display property to none.

I've the following javascript:

<script type="text/javascript">
            function add(currBtnId,nextDdId, nextBtnId, event){
                event.preventDefault();
                console.log(currBtnId, nextBtnId, nextDdId);
                document.getElementById(currBtnId).disabled = true;
                $('#'+nextBtnId).show();
                if (nextDdId!=null) {
                    $('#'+nextDdId).show();
                }
            }
        </script>

Here's how my button looks like:

<h:button type="button" value="ADD" class="add-btn" id="current-btn-id" onclick="add('current-btn-id', 'some-drop-down-id', 'next-btn-id', event)"/>

This is how it looks like after inspect-element:

<input id="add-btn1" type="button" onclick="add('add-btn1', 'reqpanel1', 'add-btn2', event); window.location.href='/project-name/page-name'; return false;" value="ADD" class="add-btn">

Problem:

After I click the Add button, the next label, drop-down and Add buttons show, but only for a second. It goes back to the initial state almost immediately. What should I do now?

I think the problematic part is: window.location.href='/project-name/page-name';

How do I get rid of it? It reloads every time the button is clicked.

Persist actions after button onclick() : JavaScript

0 个答案: