CODEWITHSUNDEEP
javascriptphphtml
Sanjana Nair
Sanjana Nair

Reputation: 2785

Activate textbox on change of an item in Drop down in HTML

I am trying to do the following:

I have drop down menu with four options in it. When I choose Shipped a text box should enabled. So I tried the following:

<div class="col-md-3"> 
    <select class="form-control" id="ostatus" name= "ostatus">      
        <option value="Uploaded" <?php if ($dispatch_status == "Uploaded") echo "selected='selected'";?> >Uploaded</option>
        <option value="Processing" <?php if ($dispatch_status == "Processing") echo "selected='selected'";?> >Processing</option>
        <option value="Dispatched" <?php if ($dispatch_status == "Dispatched") echo "selected='selected'";?> >Dispatched</option>
        <option value="Shipped" <?php if ($dispatch_status == "Shipped") echo "selected='selected'";?> >Shipped</option>                                                                                
    </select>
</div>                                    
</div>
<input type="text" class="form-control" name="shipping_notes"  disabled="true" id="shipping_notes" aria-describedby="" placeholder="Enter Shipping details">

Java script:

<head>  
<script type="text/javascript">
    document.getElementById('ostatus').addEventListener('change', function() 
    {
        console.log(this.value);

        if (this.value == 'Shipped') {
            document.getElementById('shipping_notes').disabled = false;   
        } else {
            document.getElementById('shipping_notes').disabled = true;
        }
    });
</script>
</head>

Doesn't seem to trigger? I don't see log on console too. What could be wrong here?

Update:

I have pasted the html code here:

https://justpaste.it/6zxwu

Upvotes: 2

Views: 130

Answers (3)

haldo
haldo

Reputation: 16711

Update

Since you've now shared your other code I think I know what you want. You have multiple modals, each with a select list and shipping_notes textbox which should be enabled when the selection is Shipped for that particular modal. I've modified your HTML to get this working.

I've updated your HTML a bit. You have multiple elements with the same ID. HTML IDs should be unique. If you want to target multiple elements it's safer to use class (or data-) attributes. I've added class="order-status" to each select and class="shipping_notes_txt" to each textbox. I've used element.querySelector() and document.querySelectorAll() to select DOM elements.

The snippet below mimics two modals. When the select is updated, it only enables/disabled the textbox within the same form element.

// wait for the DOM to load
document.addEventListener('DOMContentLoaded', function() {

  // get all select elements with class=order-status
  var selects = document.querySelectorAll('.order-status');

  // iterate over all select elements
  for (var i = 0; i < selects.length; i++) {
    // current element
    var element = selects[i];

    // add event listener to element
    element.addEventListener('change', function() 
    {
      console.log(this.value);	

      // get the form closest to this element
      var form = this.closest('form');

      // find the shipping notes textbox inside form and disable/enable
      if (this.value == 'Shipped') {
        form.querySelector('.shipping_notes_txt').disabled = false;   
      } else {
        form.querySelector('.shipping_notes_txt').disabled = true;
      }
    });

    // default value if status == Shipped: enable textbox
    if (element.value == "Shipped")
    {
      var form = element.closest('form');
      form.querySelector('.shipping_notes_txt').disabled = false;
    }
  }		
});
.modal1 { 
  display:inline-block;
  vertical-align:top; 
  padding: .5em;
  padding-bottom:5em;
  border: 1px solid black;
}
<div class="modal1">  
  <h3>First Modal</h3>
  <div id="edit1" class="modal fade" role="dialog">
    <form action="order.php" autocomplete="off" method="post">
      <div class="col-md-2 ml-3 pt-1">
        <label for="role" class="mr-3">Status</label>
      </div>
      <select class="form-control order-status" id="ostatus1" name= "ostatus">
        <option value="Uploaded" selected='selected' >Uploaded</option>
        <option value="Processing">Processing</option>
        <option value="Dispatched">Dispatched</option>
        <option value="Shipped">Shipped</option>
      </select>
      <input type="text" class="form-control shipping_notes_txt" name="shipping_notes" disabled="true" id="shipping_notes1" aria-describedby="emailHelp" placeholder="Enter Shipping details">
    </form>
  </div>
</div>
		
<div class="modal1">    
  <h3>Second Modal</h3>
  <div id="edit20" class="modal fade" role="dialog" >
    <form action="order.php" autocomplete="off" method="post">
      <div class="col-md-2 ml-3 pt-1">
        <label for="role" class="mr-3">Status</label>
      </div>
      <select class="form-control order-status" id="ostatus20" name= "ostatus">
        <option value="Uploaded" >Uploaded</option>
        <option value="Processing">Processing</option>
        <option value="Dispatched">Dispatched</option>
        <option value="Shipped" selected='selected' >Shipped</option>
      </select>
      <input type="text" class="form-control shipping_notes_txt" name="shipping_notes" disabled="true" id="shipping_notes20" aria-describedby="emailHelp" placeholder="Enter Shipping details">
    </form>
  </div>
</div>

Upvotes: 1

john swana
john swana

Reputation: 53

assuming everything on the server side this works HTML comes first

<div class="col-md-3">                                                                              <select class="form-control" id="ostatus" name= "ostatus">                                                                          
            <option value="Uploaded" selected="selected" >Uploaded</option>
            <option value="Processing" >Processing</option>
            <option value="Dispatched" >Dispatched</option>
            <option value="Shipped" >Shipped</option>                                                                                
        </select>
    </div>                                    
</div>

<input type="text" class="form-control" name="shipping_notes"  disabled="true" id="shipping_notes" aria-describedby="" placeholder="Enter Shipping details">

document.getElementById('ostatus').addEventListener('change', function() 
{
    console.log(this.value);

    if (this.value == 'Shipped') {
        document.getElementById('shipping_notes').disabled = false;   
    } else {
        document.getElementById('shipping_notes').disabled = true;
    }
});

Upvotes: 0

vS12
vS12

Reputation: 310

Add onchange to your <select>

<select class="form-control" id="ostatus" name= "ostatus" onchange = "statuschange()">

And change the JavaScript to :

<script type="text/javascript">
  function statuschange(){
  var drpDownValue = document.getElementById('ostatus').value;
  if (drpDownValue == 'Shipped') 
  {
      document.getElementById('shipping_notes').disabled = false;   
  } 
  else 
  {
      document.getElementById('shipping_notes').disabled = true;
  }      
}
</script>

Upvotes: 0

Related Questions