PHP - enable button when option is set

Question

I have a form with two radio buttons and a select.
I need to enable the submit button as soon as one of the radio buttons or the options in the select is selected. At the same time I need to disable everything else.
Let's say we have two radio buttons and three options in the select.
If I select one option in the select I want to enable the submit button AND disable the radio buttons.
If I select one of the radio buttons, I want to enable the submit button AND disable the select.

This is the HTML code:

<form class="form-horizontal" method="post" data-toggle="validator">


  <div class="form-group" has-feedback>
    <label class="col-sm-3 control-label">
      RADIO BUTTONS
    </label>
    <div class="cc-selector-2 col-sm-6 ">
      <input type="radio" name="radio" />
      <input type="radio" name="radio" />

    </div>
    <div class="col-sm-3">
      <div class="help-block with-errors"></div>
    </div>
  </div>

  <br>

  <div class="form-group" has-feedback>
    <label class="col-sm-3 control-label">
      SELECT
    </label>
    <div class="col-sm-6">
      <select class="form-control">
        <option value=""> One </option>
        <option value=""> Two </option>
        <option value=""> Three </option>

      </select>
    </div>
  </div>
  <br>
  <div class="form-group" has-feedback>
    <div class="col-sm-6 col-sm-offset-3">
      <button type="submit" class="btn btn-primary">
        SUBMIT
      </button>
    </div>
  </div>

</form>

I've tried adding request to the radios and to the select but it doesn't work...
Obviously I could do it with js but I was wondering if there's a simpler solution...

Doing it with JS is easier, since you would have to reload the whole page on every change of the radio buttons to do it with PHP. — Alexander Leithner
– Alexander Leithner, Commented Apr 20, 2017 at 13:06
It's not possible to do it with PHP as PHP is a server side language. You can only do this with JS. — Styphon
– Styphon, Commented Apr 20, 2017 at 13:07

mdmg · Accepted Answer · 2017-04-20 13:30:49Z

Add Id's to your form, radios, select, button and use jQuery as follow:

  $(document).ready(function() {
    $('#myFormSubmit').attr("disabled", true);

    $('[name=radio]').change(function () {
      $('#myForm :input').attr("disabled", true);
      $('#myFormSubmit').attr("disabled", false);
    });

    $('#mySelect').change(function() {
      $('#myForm :input').attr("disabled", true);
      $('#myFormSubmit').attr("disabled", false);
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="post" data-toggle="validator" id="myForm">
  <div class="form-group" has-feedback>
    <label class="col-sm-3 control-label">
      RADIO BUTTONS
    </label>
    <div class="cc-selector-2 col-sm-6 ">
      <input type="radio" name="radio" />
      <input type="radio" name="radio" />
    </div>
    <div class="col-sm-3">
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <br>
  <div class="form-group" has-feedback>
    <label class="col-sm-3 control-label">
      SELECT
    </label>
    <div class="col-sm-6">
      <select class="form-control" id="mySelect" name="mySelect">
        <option disabled="true" selected="true">-- Select option --</option>
        <option value=""> One </option>
        <option value=""> Two </option>
        <option value=""> Three </option>
      </select>
    </div>
  </div>
  <br>
  <div class="form-group" has-feedback>
    <div class="col-sm-6 col-sm-offset-3">
      <button type="submit" class="btn btn-primary" id="myFormSubmit">
        SUBMIT
      </button>
    </div>
  </div>
</form>

Ahmed Ginani · Accepted Answer · 2017-04-20 13:35:44Z

First of all, change your dropdown list something like this:

<select class="form-control">
    <option value="1"> One </option>
    <option value="2"> Two </option>
    <option value="3"> Three </option>
</select>

Then on click radio button, you can set jQuery code like below to hide button and select box on checking radio box.

$("input[name=radio]").on('click', function() {

        var checked = $("input[name=radio]").prop('checked');
        if(checked) { 
            $("button.btn").attr("disabled", true);
            $("select.form-control").attr("disabled", false);

        } 
        else { 
            $("button.btn").attr("disabled", false);
            $("select.form-control").attr("disabled", true);
        }   
    })

On change Dropdown list you can hide radio button and show submit button by matching option value.

$('select.form-control').on('change', function() {
        var theVal = $(this).val();
        switch(theVal){
            case '1':
              $("button.btn").attr("disabled", true);
              $("input[name=radio]").attr("disabled", false); 
              break;
            case '2':
              $("button.btn").attr("disabled", true);
              $("input[name=radio]").attr("disabled", true);
              break;
            case '3':
              $("button.btn").attr("disabled", true);
              $("input[name=radio]").attr("disabled", true);
              break;  
        }
    });

Like this you can set different action as well on selecting any specific value from dropdown.

Hope this might helpful for you.

Jagadeesh Harshan · Accepted Answer · 2017-04-20 14:25:59Z

Added id for select and class name for radio group.

$(document).ready(function() {
  $(".radioOpt").change(function() {
    $('#selectOpt').attr('disabled', 'disabled');
    $('#submit').attr('disabled', false);
  });

  $("#selectOpt").change(function() {
    $(".radioOpt").attr('disabled', true);
    $('#submit').attr('disabled', false);
  });
  $("#reset").click(function() {
    $(".radioOpt").attr('disabled', false);
    $('.radioOpt').removeAttr('checked');
    $('#selectOpt').attr('disabled', false);
    $('#submit').attr('disabled', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-horizontal" method="post" data-toggle="validator">
  <div class="form-group">
    <label class="col-sm-3 control-label"> RADIO BUTTONS </label>
    <div class="cc-selector-2 col-sm-6 ">
      <input class="radioOpt" name="radio" type="radio" />
      <input class="radioOpt" name="radio" type="radio" />
    </div>
    <div class="col-sm-3">&nbsp;</div>
  </div>
  <br />
  <div class="form-group">
    <label class="col-sm-3 control-label"> SELECT </label>
    <div class="col-sm-6">
      <select id="selectOpt" class="form-control">
        <option value="">One</option>
        <option value="">Two</option>
        <option value="">Three</option>
      </select>
    </div>
  </div>
  <br />
  <div class="form-group">
    <div class="col-sm-6 col-sm-offset-3">
      <button id="submit" class="btn btn-primary" type="submit" disabled> SUBMIT </button>
      <button id="reset" class="btn btn-primary" type="button"> RESET </button>

    </div>
  </div>
</form>

Collectives™ on Stack Overflow

PHP - enable button when option is set

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related