CODEWITHSUNDEEP
javascriptjquery
tiadotdev
tiadotdev

Reputation: 156

Targeting Button that changes from "Next" to "Submit" on Last Option

Here is the code for my button...Is is the code give from FeulUX for their Wizard:

<button class="btn btn-default btn-next" data-last="Submit">Next<span class="glyphicon glyphicon-arrow-right"></span></button>

I want to target the button only when it is on the last click (i.e. when it turns to submit). I have this as my code:

$('*[button.="Submit"]').click(function(){
        console.log('success');
    });

But it logs success after each button click (even if the button still reads Next).

How do I target the button only when it's text has changed to submit?

Any help is appreciated!

Upvotes: 0

Views: 388

Answers (4)

Alejandro Teixeira Mu&#241;oz
Alejandro Teixeira Mu&#241;oz

Reputation: 2778

If you want to check the button target PLEASE CHECK NOW THIS OPTION

EDIT CHANGED TO RETRIEVE DATA-LAST (YOUR NEEDS) AND TO CONTROL, FOR EXAMPLE, WHEN PUSHING NEXT AND PREV, A MAXNUMBER IS CHECKED TO DETECT IF IT IS LAST PAGE, AND THEN IF IT´s LAST, SHOW MESSAGE

EDIT CONTROL TO HIDE CORRECTLY THE MESSAGE AND DELETE SUBMIT CONDITION ON PREV CLICK

var lastmax = 3;
var last = 0;
var islast = false;

function gonext() {
  console.log(last);
  if (last < lastmax) {

    last += 1;
  }

  if (last == lastmax) {
    $(".message").css("display", "");
    $("button.btn-next").attr("data-last", "Submit");
  }

}

function goback() {

  if (last > 0) {

    last -= 1;
  }
  $(".message.last").css("display", "none");
      $("button.btn-next").attr("data-last", "");

}



$("button.btn-prev").click(function(obj, event) {

  goback();
});


$("button.btn-next").click(function(obj, event) {

  if ($(this).attr("data-last") === "Submit") {
    alert("SUBMITTED");
  } else {
    gonext();
  }


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="message" > PLEASE, CLICK 4 TIMES</span>
<div class="actions">
  <button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
  <button class="btn btn-default btn-next" data-last="">Next<span class="glyphicon glyphicon-arrow-right"></span> 
  </button>
  <span class="message last" style="display:none"> YOU ARE IN THE LAST, NOW CLICK</span>
</div>

Please, check this to BETTER detect a form submit, not a click on a "submit" named button.

$("form").submit(function(event) {

  alert('success, you´ve detected a form send');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="submit">
  <input type="text">
  <button type="submit">
</form>

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

I don't know if using button as a selector is enough, from what we've seen above, but basically you just need an if statement in the event handler...

$("button").click(function() {
    if (this.innerText === "Submit" || $(this).data("last") === "Submit") {
        console.log('success');
    }
});

You can't assign the event to a button with the text "Submit" as that won't exist at the time. You could use event delegation and assign the click handler to a parent element, but there's really no need if you can just do the above.

Upvotes: 1

Tomuke
Tomuke

Reputation: 879

Just attach an event to the button like so:

$('button').on('click', function(){

    if($(this).data('last') === "submit")
    {
        console.log("success!");
    }

});

Upvotes: 0

A.B
A.B

Reputation: 20445

you can use filter 

$('button').
filter(function(){
  return ($(this).text()=='submit' || $(this).text()=='Submit')
  });

Attaching handler to it:

 $('button').
    filter(function(){
      return ($(this).text()=='submit' || $(this).text()=='Submit')
      })
  .click(function(){
    console.log('success')
  });

See Demo:

$('button').
filter(function(){
  return ($(this).text()=='submit' || $(this).text()=='Submit')
  }).css({"color":"yellow"}).click(function(){
   alert("success");
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default btn-next" data-last="Submit">Next</button>
<button class="btn btn-default btn-next" data-last="Submit">Submit</button>

Upvotes: 0

Related Questions