Drupal disable button after clicking 3 times in drupal custom module

Question

I'm new to Drupal

I built custom module similar to webform my module page contains two submit buttons and 2 textbox as below :

function contact_request($form, &$form_state) {
 $form ['info'] =array(   
    '#markup' => "<div id='pageRequestDiv'>",    
  );  

    $form['number'] = array(
    '#prefix' => '<div class="webform-container-inline2">',
    '#suffix' => '</div>',
    '#type' => 'textfield',
    '#title' => t('Number'),
    '#size' => 20,
    '#maxlength' => 255,
    '#attributes'=>array('class'=>array('txtli')),  
    '#required'=>true,
  );

  $form['send_vcode'] = array(
    '#prefix' => '<div style="margin-top:30px;">',
    '#suffix' => '</div><br/><br/>',
    '#type' => 'submit',
    '#value' => t('Send Verification Code'),
    '#ajax' => array(
       'callback' => 'send_Verification_code_callback',
       'wrapper' => 'ContactUsMsgDiv',          
       'method'=>'replace',
       'effect'=>'fade',
    ),        
  );

    $form['verification_code'] = array(
    '#prefix' => '<div class="webform-container-inline2">',
    '#suffix' => '</div>',
    '#type' => 'textfield',
    '#title' => t('Verification Code'),
    '#size' => 20,
    '#maxlength' => 255,
    '#attributes'=>array('class'=>array('txtli')),  
    '#required'=>true,
  );

 $form['sendmail'] = array(
    '#prefix' => '<div style="margin-top:30px;">',
    '#suffix' => '</div></div>',
    '#type' => 'submit',
    '#value' => t('Send Request'),
    '#ajax' => array(
       'callback' => 'get_contact_us_callback',
       'wrapper' => 'ContactUsMsgDiv',          
       'method'=>'replace',
       'effect'=>'fade',
    ),        
  );
  return $form;
}

the user enter number then first button send him sms to mobile after that he typed sms in second text box then click send.

I want to disable first button after user clicking it 3 times.

I tried the JS below but it's disable both buttons after one click. I want to disable first button only after 3 clicks

     Drupal.behaviors.hideSubmitButton = {
          attach: function(context) {
            $('form.node-form', context).once('hideSubmitButton', function () {
              var $form = $(this);
              $form.find('input.form-submit').click(function (e) {
                var el = $(this);
                el.after('<input type="hidden" name="' + el.attr('name') + '" value="' + el.attr('value') + '" />');
                return true;
              });
              $form.submit(function (e) {
                if (!e.isPropagationStopped()) {
                  $('input.form-submit', $(this)).attr('disabled', 'disabled');
                  return true;
                }  
              });
            });
          }
        };

Updated code :
function send_Verification_code_callback($form, &$form_state){ some code to send sms return $form; }

function contact_us_request($form, &$form_state) {  
  $form['#prefix'] = '<div id="my-form-wrapper">';
  $form['#suffix'] = '</div>';

  $form ['info'] =array(   
    '#markup' => "<div id='pageAbiliRequestDiv'>",    
  );  

 $form['contact_number'] = array(
    '#prefix' => '<div class="webform-container-inline2">',
    '#suffix' => '</div>',
    '#type' => 'textfield',
    '#title' => t('Contact Number'),
    '#size' => 20,
    '#maxlength' => 255,
    '#attributes'=>array('class'=>array('txtabili')),   
    '#required'=>true,
  );

$form['verification_code'] = array(
    '#prefix' => '<div class="webform-container-inline2">',
    '#suffix' => '</div>',
    '#type' => 'textfield',
    '#title' => t('Verification Code'),
    '#size' => 20,
    '#maxlength' => 255,
    '#attributes'=>array('class'=>array('txtabili')),   
    '#required'=>true,
  );

  $form['send_vcode'] = array(
    '#prefix' => '<div style="margin-top:30px;">',
    '#suffix' => '</div><br/><br/>',
    '#type' => 'submit',
    '#value' => t('Send Verification Code'),
    '#ajax' => array(
       'callback' => 'send_Verification_code_callback',
       'wrapper' => 'my-form-wrapper',          
       'method'=>'replace',
       'effect'=>'fade',
    ),        
  );

  $form['sendmail'] = array(
    '#prefix' => '<div style="margin-top:30px;">',
    '#suffix' => '</div></div>',
    '#type' => 'submit',
    '#value' => t('Send Request'),
    '#ajax' => array(
       'callback' => 'get_contact_us_callback',
       'wrapper' => 'ContactUsMsgDiv',          
       'method'=>'replace',
       'effect'=>'fade',
    ),        
  );

  $form['clicks'] = array(
  '#type' => 'value',
);
if (isset($form_state['values']['clicks'])) {
  if ($form_state['values']['clicks'] == 3) {
    $form['send_vcode']['#disabled'] = TRUE;
  } else {
    $form['clicks']['#value'] = $form_state['values']['clicks'] + 1;
  }
} else {
    $form['clicks']['#value'] = 0;
}

yes so please if you know how to do this I'll be very thankfull — roro

Stanislav Agapov Stanislav Agapov · Accepted Answer · 2016-04-11T13:09:21

I'd use AJAX callback rather than JavaScript check.

Wrap the whole form with some div:

$form['#prefix'] = '<div id="my-form-wrapper">';
$form['#suffix'] = '</div>';

and set

$form['send_vcode'] = array(
  ...
  '#ajax' => array(
   'wrapper' => 'my-form-wrapper',
   ...

(and also include your message area into the form). In your send_Verification_code_callback function return the whole form.

The trick is then to add value component to the form which will contain number of clicks:

$form['clicks'] = array(
  '#type' => 'value',
);
if (isset($form_state['values']['clicks'])) {
  if ($form_state['values']['clicks'] == 3) {
    $form['send_vcode']['#disabled'] = TRUE;
  } else {
    $form['clicks']['#value'] = $form_state['values']['clicks'] + 1;
  }
} else {
    $form['clicks']['#value'] = 0;
}

After 3 clicks on send_vcode button it will be disabled.

=== UPDATE ===

Here is working code (without all unnecessary stuff), which shows amount of clicks left in the pageAbiliRequestDiv div:

function contact_us_request($form, &$form_state) {
  $form['#prefix'] = '<div id="my-form-wrapper">';
  $form['#suffix'] = '</div>';

  $form['clicks'] = array(
    '#type' => 'value',
  );

  $clicks_max = 3;
  if (isset($form_state['values']['clicks'])) {
    $form['clicks']['#value'] = $form_state['values']['clicks'] + 1;
    $clicks_left = $clicks_max - 1 - $form_state['values']['clicks'];
  } else {
    $form['clicks']['#value'] = 0;
    $clicks_left = $clicks_max;
  }

  $form ['info'] =array(
    '#markup' => '<div id="pageAbiliRequestDiv">'
      . t('Clicks left: @clicks_left', array('@clicks_left' => $clicks_left))
      . '</div>',
  );

  $form['send_vcode'] = array(
    '#prefix' => '<div style="margin-top:30px;">',
    '#suffix' => '</div><br/><br/>',
    '#type' => 'button',
    '#value' => t('Send Verification Code'),
    '#ajax' => array(
      'callback' => 'send_Verification_code_callback',
      'wrapper' => 'my-form-wrapper',
      'method'=>'replace',
      'effect'=>'fade',
    ),
  );

  if ($clicks_left == 0) {
    $form['send_vcode']['#disabled'] = TRUE;
  }

  return $form;
}

function send_Verification_code_callback($form, &$form_state) {
  return $form;
}

Drupal disable button after clicking 3 times in drupal custom module

1 Answers