-1 

document.addEventListener('DOMContentLoaded',e=>{

  let oForm=document.forms.admin;

  document.querySelector('select[name="drugs"]').addEventListener('change',function(e){
    let option=this.options[this.options.selectedIndex];

    oForm.price.value=option.dataset.price;
    oForm.quantity.value=option.dataset.quantity;
    oForm.form.value=option.dataset.form;
    oForm.manufacturer.value=option.dataset.manufacturer;
  });
});
<body>  
        <div class="container">
            <br />
            
            <h3 align="center">Multiple drug prescription</a></h3><br />
            <br />
            <br />
            <div align="right" style="margin-bottom:5px;">
                <button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
            </div>
            <br />
            <form method="post" id="user_form">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="user_data">
                        <tr>
                            <th>Drug Name</th>
                            <th>Drug Unit</th>
                            <th>Morning</th>
                            <th>Day</th>
                            <th>evening</th>
                            <th>bedtime</th>
                            <th>Duration in days</th>
                            <th>Prescribed</th>
                            <th>Qty in stock</th>
                        
                        </tr>
                    </table>
                </div>
                <div align="center">
                    <input type="submit" name="insert" id="insert" class="btn btn-primary" value="Insert" />
                </div>
            </form>

            <br />
        </div>
        <div id="user_dialog" title="Add prescriprion">
        
            <div class="form-group">
                <label>Drug Name</label>
                <select  name='drugselect 'class="form-control" id="drugselect">
                 <option selected hidden disabled>Please select your drug
          <option value="1" data-unit="mg" data-quantity="50"  data-form="tablet">Abutilon
          <option value="2" data-unit="mg" data-quantity="20"  data-form="injection">Pramaxil
          <option value="3" data-unit="ml" data-quantity="30"  data-form="suppository">Exylichnine
          <option value="4" data-unit="mg" data-quantity="1"  data-form="cream">BoronHydroxil
          <option value="5" data-unit="mg" data-quantity="100"  data-form="tablet">Dexaclam
        
                            
                            ?>
                        </select>
                <span id="error_drgdn" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Drug Unit</label>
                <input type="text" name="Drugunit" id="Drugunit" class="form-control" />
                <span id="error_drgu" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Drug Form</label>
                <input type="text" name="Drugfm" id="Drugfm" class="form-control" />
                <span id="error_drgu" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Morn</label>
                <input type="text" name="drgmorn" id="drgmorn" class="form-control" />
                <span id="error_drgmrn" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Day</label>
                <input type="text" name="drgday" id="drgday" class="form-control" />
                <span id="error_drgd" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>even</label>
                <input type="text" name="drgeve" id="drgeve" class="form-control" />
                <span id="error_drge" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>bedtime</label>
                <input type="text" name="drgbdt" id="drgbdt" size ="5" class="form-control"  />
                <span id="error_drgbt" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>days</label>
                <input type="text" size ="5" name="drgpdays" id="drgpdays" class="form-control"   />
                <span id="error_drgdys" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>prescribe</label>
                <input type="text" name="drgpriscript" id="drgpriscript" class="form-control" />
                <span id="error_drgpre" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>in stock</label>
                <input type="text" name="drginstock" id="drginstock" class="form-control" />
                <span id="error_drgqis" class="text-danger"></span>
            </div>
            <div class="form-group" align="center">
                <input type="hidden" name="row_id" id="hidden_row_id" />
                <button type="button" name="save" id="save" class="btn btn-info">Save</button>
            </div>
    
        <div id="action_alert" title="Action">

        </div>
        

    </div>
    </body>

I am looking for a a solution of populating table values into multiple input text on a bootstrap window the input text are outside the form and are in a class 'form-group'.

Wwhat I want is that when I select option value certain values from a table on the same id must also display on other textbox inside class form-group. the function I have displayed only work when the input text are inside the form.

<html>  
    <head>  
        
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="bootstrap.min.css" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>  
    <body>  
        <div class="container">
            <br />
            
            <h3 align="center">Multiple drug prescription</a></h3><br />
            <br />
            <br />
            <div align="right" style="margin-bottom:5px;">
                <button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
            </div>
            <br />
            <form method="post" id="user_form">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="user_data">
                        <tr>
                            <th>Drug Name</th>
                            <th>Drug Unit</th>
                            <th>Morning</th>
                            <th>Day</th>
                            <th>evening</th>
                            <th>bedtime</th>
                            <th>Duration in days</th>
                            <th>Prescribed</th>
                            <th>Qty in stock</th>
                        
                        </tr>
                    </table>
                </div>
                <div align="center">
                    <input type="submit" name="insert" id="insert" class="btn btn-primary" value="Insert" />
                </div>
            </form>

            <br />
        </div>
        <div id="user_dialog" title="Add prescriprion">
        
            <div class="form-group">
                <label>Drug Name</label>
                <select  name='drugselect 'class="form-control" id="drugselect">
                <option >Please select your drug
                            <?php
                                $sqlx = mysqli_query($con,"select 
                                     `drugID`,
                                    `d`.`drugName` as `dname` ,
                                    `catName` as cname,
                                    `drugCategory` as dcat,
                                    `units` as dunits,
                                    `stockqty`
                                     
                                from `drug` `d` JOIN `category` `c` on `d`.`drugCategory` = `c`.`catID` JOIN `pharmacy` `p` on `d`.`drugID` = `p`.`drug` WHERE  `p`.`stockqty` >0 ");
                        

                                while ($rowx=mysqli_fetch_array($sqlx)){
                                
                                
                              
                                    printf(
                                        '<option value="%d"   data-cname="%s" data-stockqty="%d"  data-dcat="%d" data-dunits="%s"  data-dname="%s">%s',
                                        $rowx['drugID'],
                                        $rowx['cname'],
                                        $rowx['stockqty'],
                                        $rowx['dcat'],
                                        $rowx['dunits'],
                                        $rowx['dname'],
                                        $rowx['dname']
                                    );
                                    
                                    
                                }
                            //}
                            
                            
                            ?>
                        </select>
                <span id="error_drgdn" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Drug Unit</label>
                <input type="text" name="Drugunit" id="Drugunit" class="form-control" />
                <span id="error_drgu" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Drug Form</label>
                <input type="text" name="Drugfm" id="Drugfm" class="form-control" />
                <span id="error_drgu" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Morn</label>
                <input type="text" name="drgmorn" id="drgmorn" class="form-control" />
                <span id="error_drgmrn" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Day</label>
                <input type="text" name="drgday" id="drgday" class="form-control" />
                <span id="error_drgd" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>even</label>
                <input type="text" name="drgeve" id="drgeve" class="form-control" />
                <span id="error_drge" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>bedtime</label>
                <input type="text" name="drgbdt" id="drgbdt" size ="5" class="form-control"  />
                <span id="error_drgbt" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>days</label>
                <input type="text" size ="5" name="drgpdays" id="drgpdays" class="form-control"   />
                <span id="error_drgdys" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>prescribe</label>
                <input type="text" name="drgpriscript" id="drgpriscript" class="form-control" />
                <span id="error_drgpre" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>in stock</label>
                <input type="text" name="drginstock" id="drginstock" class="form-control" />
                <span id="error_drgqis" class="text-danger"></span>
            </div>
            <div class="form-group" align="center">
                <input type="hidden" name="row_id" id="hidden_row_id" />
                <button type="button" name="save" id="save" class="btn btn-info">Save</button>
            </div>
    
        <div id="action_alert" title="Action">

        </div>
        

    </div>
    </body>

Function below works when input box are in a form but I want below functionality to happen on a Bootstrap window.

<script>
    document.addEventListener('DOMContentLoaded', e => {
        let oForm = document.forms.admin;

        document.querySelector('select[name="drugselect"]').addEventListener('change', function(e) {
            let option = this.options[this.options.selectedIndex];

            oForm.Instock.value = option.dataset.stockqty;
            oForm.catgname.value = option.dataset.cname;
            oForm.drugCategory.value = option.dataset.dcat;
            oForm.Drugunit.value = option.dataset.dunits;
            oForm.DrugName.value = option.dataset.dname;
        });
    });
</script>

Please help me with a solution.

Improve this question
1
  • The javascript code references a form called admin yet the HTML does not name any forms Commented Oct 29, 2021 at 7:08

1 Answer 1

Reset to default
1

If I have understood correctly the intention is to populate the input elements below the select menu when the user changes the selection in that select menu. The first piece of HTML above features the dummy data and Javascript I used when answering the original question so I have expanded upon the array data I used then to create the following.

The PHP data to build the menus was used in the same way as in previous answer and yields a select menu as seen below in the snippet.

I must admit that I made a few assumptions as it was not entirely clear what the real problem was/is. For instance - I assumed that the database query should return far more information than shown in your code - afterall why have input elements named as they are otherwise if these are not to be the fields that are populated?!

$drugs=array(
    array(
        'unit'=>'kg',
        'morning'=>2,
        'day'=>2,
        'evening'=>2,
        'bedtime'=>2,
        'prescriber'=>'Dr. Bob',
        'days'=>14,
        'id'=>1,
        'name'=>'Abutilon',
        'price'=>'25',
        'form'=>'tablet',
        'quantity'=>50,
        'manufacturer'=>'ACME Drugs Corp'
    ),
    array(
        'unit'=>'mg',
        'morning'=>4,
        'day'=>4,
        'evening'=>4,
        'bedtime'=>2,
        'prescriber'=>'Dr. John',
        'days'=>365,
        'id'=>2,
        'name'=>'Pramaxil',
        'price'=>'50',
        'form'=>'injection',
        'quantity'=>20,
        'manufacturer'=>'ACME Cybernautics Division'
    ),
    array(
        'unit'=>'lb',
        'morning'=>1,
        'day'=>1,
        'evening'=>1,
        'bedtime'=>1,
        'prescriber'=>'Dr. Radish',
        'days'=>28,
        'id'=>3,
        'name'=>'Exylichnine',
        'price'=>'150',
        'form'=>'suppository',
        'quantity'=>30,
        'manufacturer'=>'ACME Corporate Greed Division'
    ),
    array(
        'unit'=>'kg',
        'morning'=>6,
        'day'=>2,
        'evening'=>9,
        'bedtime'=>2,
        'prescriber'=>'Dr. Womble',
        'days'=>7,
        'id'=>4,
        'name'=>'BoronHydroxil',
        'price'=>'55',
        'form'=>'cream',
        'quantity'=>1,
        'manufacturer'=>'ACME Famine Feasibility'
    ),
    array(
        'unit'=>'ton',
        'morning'=>2,
        'day'=>2,
        'evening'=>2,
        'bedtime'=>2,
        'prescriber'=>'Dr. Saskia',
        'days'=>30,
        'id'=>5,
        'name'=>'Dexaclam',
        'price'=>'10',
        'form'=>'tablet',
        'quantity'=>100,
        'manufacturer'=>'ACME Drugs Corp'
    )
);


const q=(e,n=document)=>n.querySelector(e);


q('select[name="drugselect"]').addEventListener('change', function(e) {
  let option = this.options[ this.options.selectedIndex ];
  for( let attr in option.dataset ){
    let input=q('.form-group input[data-name="'+attr+'"]');
    if( input )input.value=option.dataset[attr];
  }
});
<div id='user_dialog' title='Add prescriprion'> 
    <div class='form-group'>
        <label>Drug Name</label>

        <select name='drugselect' class='form-control'>
          <option selected hidden disabled>Please select your drug
          <option 
            value="1" 
            data-price="25" 
            data-quantity="50" 
            data-manufacturer="ACME Drugs Corp" 
            data-form="tablet"
            data-unit="kg"
            data-morning="2"
            data-day="2"
            data-evening="2"
            data-bedtime="2"
            data-prescriber="Dr. Bob"
            data-days="14"
          >Abutilon
          
          <option 
            value="2" 
            data-price="50" 
            data-quantity="20" 
            data-manufacturer="ACME Cybernautics Division" 
            data-form="injection"
            data-unit="mg"
            data-morning="4"
            data-day="4"
            data-evening="4"
            data-bedtime="2"
            data-prescriber="Dr. John"
            data-days="365"
          >Pramaxil
          
          <option 
            value="3" 
            data-price="150" 
            data-quantity="30" 
            data-manufacturer="ACME Corporate Greed Division" 
            data-form="suppository"
            data-unit="lb"
            data-morning="1"
            data-day="1"
            data-evening="1"
            data-bedtime="1"
            data-prescriber="Dr. Radish"
            data-days="28"
          >Exylichnine
          
          <option 
            value="4" 
            data-price="55" 
            data-quantity="1" 
            data-manufacturer="ACME Famine Feasibility" 
            data-form="cream"
            data-unit="kg"
            data-morning="6"
            data-day="2"
            data-evening="9"
            data-bedtime="2"
            data-prescriber="Dr. Womble"
            data-days="7"
          >BoronHydroxil
          
          <option 
            value="5" 
            data-price="10" 
            data-quantity="100" 
            data-manufacturer="ACME Drugs Corp" 
            data-form="tablet"
            data-unit="ton"
            data-morning="2"
            data-day="2"
            data-evening="2"
            data-bedtime="2"
            data-prescriber="Dr. Saskia"
            data-days="30"
          >Dexaclam
        </select>
        <span id='error_drgdn' class='text-danger'></span>
    </div>

    <div class='form-group'>
        <label>Drug Unit</label>
        <input type='text' name='Drugunit' class='form-control' data-name='unit' />
        <span id='error_drgu' class='text-danger'></span>
    </div>

    <div class='form-group'>
        <label>Drug Form</label>
        <input type='text' name='Drugfm' class='form-control' data-name='form' />
        <span id='error_drgu' class='text-danger'></span>
    </div>

    <div class='form-group'>
        <label>Morn</label>
        <input type='text' name='drgmorn' class='form-control' data-name='morning' />
        <span id='error_drgmrn' class='text-danger'></span>
    </div>

    <div class='form-group'>
        <label>Day</label>
        <input type='text' name='drgday' class='form-control' data-name='day' />
        <span id='error_drgd' class='text-danger'></span>
    </div>

    <div class='form-group'>
        <label>even</label>
        <input type='text' name='drgeve' class='form-control' data-name='evening' />
        <span id='error_drge' class='text-danger'></span>
    </div>

    <div class='form-group'>
        <label>bedtime</label>
        <input type='text' name='drgbdt' size ='5' class='form-control' data-name='bedtime' />
        <span id='error_drgbt' class='text-danger'></span>
    </div>

    <div class='form-group'>
        <label>days</label>
        <input type='text' size='5' name='drgpdays' class='form-control' data-name='days' />
        <span id='error_drgdys' class='text-danger'></span>
    </div>

    <div class='form-group'>
        <label>prescribe</label>
        <input type='text' name='drgpriscript' class='form-control' data-name='prescriber' />
        <span id='error_drgpre' class='text-danger'></span>
    </div>

    <div class='form-group'>
        <label>in stock</label>
        <input type='text' name='drginstock' class='form-control' data-name='quantity' />
        <span id='error_drgqis' class='text-danger'></span>
    </div>

    <div class='form-group' align='center'>
        <input type='hidden' name='row_id' />
        <button type='button' name='save' id='save' class='btn btn-info'>Save</button>
    </div>

  <div id='action_alert'></div>
</div>

To link the input elements to the option selected in the drugselect menu I used a data-name attribute that is the same as the key in the array. This would be the same as using the column name in the sql query. Perhaps, if this is incorrect, you might add the database schema and sample data?

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks @Professor Abronsius let me add database schema, i will let you know asap
it has worked like magic thanks a lot the genius!!!! much appreciation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.