Javascript Checkbox Control

Question

searced all around the web but i couldn't find an answer for my problem. i decided to ask here for a answer. i have a code that uses AJAX GET prompt. This code is working with a button. i want a checkbox near this button. When the checkbox is not checked i want to give a message. The user shouldn't be able to continue without checking the checkbox.

Here is the original code:

<div class="buttons">
  <div class="right">
    <a id="button-confirm" class="button"><span><?php echo $button_confirm; ?></span></a>
  </div>
</div>

<script type="text/javascript"><!--
$('#button-confirm').bind('click', function() {
    $.ajax({
        type: 'GET',
        url: 'index.php?route=payment/bank_transfer/confirm',
        success: function() {
            location = '<?php echo $continue; ?>';
        }
    });
});
//--></script>

And this the code i have edit:

<div class="buttons">
  <div class="right">
    <input type="checkbox" value="1" /><a id="button-confirm" class="button" ><span><?php echo $button_confirm; ?></span></a>
  </div>
    </div>

<script type="text/javascript"><!--
$('#button-confirm').bind('click', function() {
  $('#button-confirm').click(function(){

  var input = $('input[type=checkbox]:checked').val();

    if ( !input ){
        alert('Lütfen checkboxı işaretleyin!');
    } else {
          }
    $.ajax({
        type: 'GET',
        url: 'index.php?route=payment/bank_transfer/confirm',
        success: function() {
            location = '<?php echo $continue; ?>';
        }
    });
});

});


//--></script>

My edit version of the code is not working. It does not show an alert and when i click the button twice the button goes on and finishes the process.

And i want to show a inline alert message, not a popup alert message.

Thank you for your helps from now...

Answer 1

"It does not show an alert and when i click the button twice the button goes on and finishes the process."

You have nested a call to $('#button-confirm').click(...) inside a call to $('#button-confirm').bind('click'...). That means that the first time you click the only thing that happens is it binds a second click handler to the same element. The second time you click it then executes both click handlers, the outer one binding another click handler and the inner one actually attempting to test your checkbox and do the ajax thing.

The reason it goes on with the ajax request regardless of the checkbox value is that you have the $.ajax() call after the closing } of your else statement.

Try this instead:

  $('#button-confirm').click(function () {    
      var input = $('input[type=checkbox]:checked').val();

      if (!input) {
          alert('Lütfen checkboxı işaretleyin!');
      } else {
          $.ajax({
              type: 'GET',
              url: 'index.php?route=payment/bank_transfer/confirm',
              success: function () {
                  location = '<?php echo $continue; ?>';
              }
          });
      }
  });

In my opinion an easier to read way to test whether the checkbox is checked is as follows:

      if (!$('input[type=checkbox]').is(':checked')) {
          alert('Lütfen checkboxı işaretleyin!');