-1

I have numerous html input tags, which takes the user input and post it to a variable, code :

<form method = "post" action=""select.php> 
    <input id="nol" style="width: 280px;" type="text" name="searchdisease" placeholder="type diagnosis one">
    <input id="nol" style="width: 280px;" type="text" name="searchdisease1" placeholder="type diagnosis two">
    <input id="nol" style="width: 280px;" type="text" name="searchdisease2" placeholder="type diagnosis three">
</form>

then this variable i append it to SQL query to retrieve data LIKE user input code: 

$search_disease = $_POST['searchdisease'];
$search_disease1 = $_POST['searchdisease1'];
$search_disease2 = $_POST['searchdisease2'];

$query="SELECT diagnosis FROM medications WHERE diagnosis LIKE '%$search_disease%'";
$result= $con->query($query);
$query1="SELECT diagnosis FROM medications WHERE diagnosis LIKE '%$search_disease1%'";
$result1= $con->query($query1);
$query2="SELECT diagnosis FROM medications WHERE diagnosis LIKE '%$search_disease2%'";
$result2= $con->query($query2);

, then echo the results to a select tag. code:

<select id="disease" style="width: 40%;" name="tdisease">
   <option value="">Select Disease</option>
   <?php
       while ($row=$result->fetch_array(MYSQLI_ASSOC)) { 
   ?>
       <option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option> 
   <?php } ?> 
</select>
<select id="disease" style="width: 40%;" name="tdisease1">
   <option value="">Select Disease</option>
   <?php
       while ($row=$result1->fetch_array(MYSQLI_ASSOC)) { 
   ?>
       <option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option> 
  <?php } ?> 
</select>
<select id="disease" style="width: 40%;" name="tdisease2">
     <option value="">Select Disease</option>
     <?php
         while ($row=$result2->fetch_array(MYSQLI_ASSOC)) { 
     ?>
            <option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option> 
     <?php } ?> 
</select>

So i want to know how can i use JavaScript to disable or hide the select tags when the user input is empty?

Nope
  • 22,147
  • 7
  • 47
  • 72
Morena
  • 7
  • 2
  • 8
  • 2
    What have you tried so far? Also shouldn't use the same `ID` multiple times. `ID`'s should be unique. Could you also show where the `input` is that might be empty.... since this would be relevant to your question. – NewToJS Feb 15 '17 at 11:08
  • You can't use same id for different element. – Parvez Rahaman Feb 15 '17 at 11:09
  • i have not tried anything, maybe i should have mentioned that i do not know JavaScript nor JQuery – Morena Feb 15 '17 at 11:11
  • 1
    Possible duplicate of [Script to enable/disable input elements?](http://stackoverflow.com/questions/6835165/script-to-enable-disable-input-elements) and/or [http://stackoverflow.com/questions/6242976/javascript-hide-show-element](http://stackoverflow.com/questions/6242976/javascript-hide-show-element) – Nope Feb 15 '17 at 11:13
  • or if you rather use jQuery, you can get examples here ► [https://learn.jquery.com/using-jquery-core/faq/how-do-i-disable-enable-a-form-element/](https://learn.jquery.com/using-jquery-core/faq/how-do-i-disable-enable-a-form-element/) – Nope Feb 15 '17 at 11:31

2 Answers2

-1

You can simply add event listener on your tags, which will add attribute to selected one "disabled".
It will look like:
const target = document.querySelector('<yourtag>'); target.value.length > 0 ? 'it is ok' : target.setAttribute('disabled', 'disabled');

Grynets
  • 2,477
  • 1
  • 17
  • 41
  • okay before i disable it, i want to check if it has a value or not then if it does not contain any data then disable it, how can i do that first? – Morena Feb 15 '17 at 14:23
  • As I said, with this line `target.value.length > 0` you'll get the result. If value length less than 0, means that it has no characters, you do `target.setAttribute('disabled', 'disabled')`. I've used ternary operator to keep code clean and simple. – Grynets Feb 15 '17 at 15:06
  • i am trying to disable the select tag if user input is empty not the input field as such, but the select tag and html tag are on different forms. – Morena Feb 15 '17 at 15:16
  • and you can do it by this code: `const selectTag = document.querySelector(''); const userInput = document.querySelector(''); userInput.value.length > 0 ? 'it is ok' : selectTag.setAttribute('disabled', 'disabled');` – Grynets Feb 15 '17 at 15:23
  • i have been trying this but got no luck, please bear with me, i do not know JavaScript that much, but do i replace ('') with id of the tag? or just leave it as it is? and should place it on form which have input fields or where the select tag is? – Morena Feb 17 '17 at 06:20
-1

ID should be different for every inputs.then,

var val=$('#id-of-element').val;

check as: if(val==" ") or if(val==null) it will be blank when the input is nothing.

you can use below line of code to disable an item:

document.getElementById("id-of-selected-element").disabled="true";

To hide:

document.getElementById("id-of-selected-element").style.display="none";
techhunter
  • 683
  • 1
  • 12
  • 27
  • okay before i disable it, i want to check if it has a value or not then if it does not contain any data then disable it, how can i do that first? – Morena Feb 15 '17 at 14:23
  • updated answer. – techhunter Feb 15 '17 at 19:52
  • okay it did nor work, i do not if i did not do it correctly or what, but just so you know, the input tag which i want to check its value its on a different form, on a different page and the select tag as well – Morena Feb 17 '17 at 06:26
  • give a name to the tag you want to get. submit the form in first page, get the value of select tag by it's name attribute in second page. refer this link: http://stackoverflow.com/questions/22579616/send-value-of-submit-button-when-form-gets-posted – techhunter Feb 18 '17 at 05:47