How can I make sure jquery selects the "next" button only once in a multi-step form?

Question

I am new to jQuery. I want the button with class pbNext to be click ONLY ONCE when radio button is checked (https://smartune.nl/reparatie-melden). The following works, but it brings me to the last step. All next buttons have pbNext class. Can someone please help me with this?

 $(document).ready(function(){
 $("input[type=radio]").change(function(){
 $(".pbNext").click();
 });
 });

Hi Naim - just following up. Was your question answered satisfactorily? If there is more we can help with, please add a comment below one of the answers, or edit your question to clarify what else you need help with. Otherwise, it would be great if you could choose a "best answer" (by clicking the checkmark beside the answer) to close out the question. If no provided answer was helpful to you, please take a moment to post your own answer and select it with the checkmark - you won't get any points for that, but it will close out the question. *Thanks!* — cssyphus, Mar 10 '19 at 14:52

cssyphus · Answer 1 · 2019-02-06T14:07:56.253

Occam's razor might suggest an answer like this:

$(document).ready(function(){
    var pbClicked = false;
    $("input[type=radio]").click(function(){
        if (!pbClicked){
            $(".pbNext").click();
            pbClicked = true;
        }
    });
});

DEMO:

$(document).ready(function(){
    var pbClicked = false;
    $("input[type=radio]").click(function(){
        var msg = (pbClicked) ? 'ignored' : 'clicked';
        if (!pbClicked){
            $(".pbNext").click();
            pbClicked = true;
        }
        $('#msg').html(msg);
    });
    
    $('.pbNext').click(function(){
      $(this).css('background','blue');
    });
});

#msg{position:fixed;right:15px;font-size:1.3rem;text-align:center;}
.pbNext{width:100px;height:40px;background:pink;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="msg"></div>

<input type="radio" />
<input type="radio" />
<input type="radio" />
<input type="radio" />

<div class="pbNext"></div>

If you have multiple buttons to track, and you want the user only to be able to click each button once, then you can use an array to keep track of the buttons that were clicked. It will be easiest if you add an ID to each element to be tracked. Here is an example (Note that the 3rd checkbox has been specifically permitted to toggle, whereas the other 3 are restricted by their presence in the array of clicked checkboxes.):

var tmp_id, arrClicked = []; //vars created outside fns that use them

$("input[type=checkbox]").click(function(){
    tmp_id = this.id.split('_')[1];
    if (arrClicked.indexOf(tmp_id) == -1){
        $(".pbNext").click();
        arrClicked.push(tmp_id);
    }
    
    else if(tmp_id == 3){ $('.pbNext').click(); }  //Allow id 3 to be re-clicked, just to show
    $('#msg').html(JSON.stringify(arrClicked));
    
});

$('.pbNext').click(function(){
  $('#cb_'+tmp_id).parent().toggleClass('a'+tmp_id);
});

#msg{position:fixed;right:15px;font-size:1.3rem;text-align:center;}

button{margin-top:15px;}
div{width:150px;padding:15px;border:1px solid #ccc;}

.a1{background:palegreen;}
.a2{background:lightpink;}
.a3{background:lightblue;}
.a4{background:palegoldenrod;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<aside id="msg"></aside>

<div><input type="checkbox" id="cb_1" /></div>
<div><input type="checkbox" id="cb_2" /></div>
<div><input type="checkbox" id="cb_3"/></div>
<div><input type="checkbox" id="cb_4" /></div>

<button class="pbNext">Does Nothing button</button>

jsFiddle version that you can play with

Thanks Gibberish, It works, but then in the next step of the form i need to be able to click again. This code blocks also the next steps. I need the code to go only one step, each step is separated with pagebreak (pb). — Naim Farhoed, Feb 06 '19 at 09:35

How can I make sure jquery selects the "next" button only once in a multi-step form?

1 Answers1