Question 40874 in PHP Question posted in
Official manual can be found here.

Display input field depending on select selection – PHP

I would like that when I select the select "reject",
that an input field opens immediately and if I select something else
select something else, this input field is closed again.

<div class="col-md-12 mb-12 mt-3">
    <label for="order_status">status:</label>
    <select class="form-select form-select" name="order_status" id="order_status">
        <option value="">select</option>
        <option value="accepted">accepted</option>
        <option value="reject" id="rejectID">reject</option>
    </select>
</div>

<div id="showDiv" style="display: none">
    <input type="text" name="reject_commit">
</div>


<script>
    $(function () {
        $("select[name='order_status']").click(function () {

            if ($("#rejectID").is("reject")) {
                $("#showDiv").show();
            } else {
                $("#showDiv").hide();
            }
        });
    });
</script>
Tags:

2

Answers


  1. 0

    If you have id attribute use a id selector, then checks select’s (this keyword) value. Dont use click but change handler:

    $("#order_status").change(function () {
    if (this.value === "reject") {
       $("#showDiv").show();
    } else {
       $("#showDiv").hide();
    }
});
    Login or Signup to reply.
  2. 0

    You can do it like this, check the value of your select id, not just the id of the reject option

    $(function () {
        $("select[name='order_status']").change(function () {
            if ($("#order_status").val()=="reject") {
              $("#showDiv").css("display","inline");
            } else {
              $("#showDiv").css("display","none");
            }
        });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 mb-12 mt-3">
    <label for="order_status">status:</label>
    <select class="form-select form-select" name="order_status" id="order_status">
        <option value="">select</option>
        <option value="accepted">accepted</option>
        <option value="reject" id="rejectID">reject</option>
    </select>
</div>

<div id="showDiv" style="display: none">
    <input type="text" name="reject_commit">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search