Question 69666 in Ajax Question posted in
You can find the official documentation here.

How to pass multiple parameters with Ajax – Jquery ajax

 <select name="docname" class="form-control" id="docname" required>
    <option Value="">Please Choose Doctor</option>
    <?php
        foreach($data as $crow){
        echo "<option value='$crow->name'>$crow->name</option>";  
        }
    ?>
</select>

 <input type="date" name="bdate"  class="form-control txtDate" id="txtHint" required>
 <div class="form-group" id="txtHint1"></div>

<script>
    $(document).ready(function(){
        $('#docname').on('change',function(){
            var doc_id=this.value;
            $.ajax({
                url:"subcat.php",
                type:"POST",
                data:{
                    doc_id:doc_id
                },
                cache:false,
                success:function(result){
                    $("#txtHint").html(result);
                    $('#txtHint1').html('<optionvalue="">SelectDateFirst</option>');
                }
            });
        });
        
        $('#txtHint').on('change',function(){
            var date_id=this.value;
            $.ajax({
                url:"catsubcat.php",
                type:"POST",
                data:{
                    date_id:date_id
                },
                cache:false,
                success:function(result){
                    $("#txtHint1").html(result);
                }
            });
        });
    });

</script>

Here you can see Ajax and Other Code. How I Fetch First Ajax value with 3rd Id.
For e.g First I select Doctor Name then I select an appointment date and Last I want to fetch the Time slot of That doctor for this date.

Can anyone suggest to me how could I do that??

Tags:

5

Answers


  1. 0

    Pass data like this :

    data:{
    ‘doc_id’: doc_id,
    ‘blob_data_username’: blob_username,
    ‘blob_data_password’: blob_password
    },

    Login or Signup to reply.
  2. 0

    To get doctor name or selected option use $('#docname').val()

    <select name="docname" class="form-control" id="docname" required>
  <option Value="">Please Choose Doctor</option>
  <option value="test">test</option>
  <?php
  foreach($data as $crow){
    echo "<option value='$crow->name'>$crow->name</option>";  
  }
  ?>
</select>

<input type="date" name="bdate" class="form-control txtDate" id="txtHint" required>
<div class="form-group" id="txtHint1"></div>

<script>
$(document).ready(function() {
  $('#docname').on('change', function() {
    var doc_id = this.value;
    $.ajax({
      url: "subcat.php",
      type: "POST",
      data: {
        doc_id: doc_id
      },
      cache: false,
      success: function(result) {
        // $("#txtHint").html(result); // remove this or your input date  overwritten
        $('#txtHint1').html('<div>Select Date First</div>'); // instead of "<option>" ?
      }
    });
  });

  $('#txtHint').on('change', function() {
    var date_id = this.value;
    $.ajax({
      url: "catsubcat.php",
      type: "POST",
      data: {
        doc_id: $('#docname').val(), // here to get doctor name
        date_id: date_id
      },
      cache: false,
      success: function(result) {
        $("#txtHint1").html(result); // write <option> here?
      }
    });
  });
});
</script>
    Login or Signup to reply.
  3. 0

    As I do not use jQuery I cannot offer advice/help on that but with some fairly simple vanilla Javascript you can quite easily use AJAX to fetch data and use the response to help construct the next element in your form ( which is how I interpret your needs "First I select Doctor Name then I select an appointment date and Last I want to fetch the Time slot of That doctor for this date." )

    The following code sends All ajax requests to the same page ( this could be a totally separate script if needed ) with the value from whichever form element the user used to make the current selection.

    The event handler inspects the element that invokes it to see if there is a following HTML element, defined with a dataset attribute data-next. Using that dataset attribute in the ajax callback you can populate the following element with the data returned from the db lookup ( ajax request response )

    The ajax request sends two pieces of information in each request – the name/value of the selected element and the dataset value of the next element. With these you can easily setup logic in PHP that runs the appropriate SQL query and returns the correct response. In the code here this is emulated with simple data responses ( date / time ) – the response could be considerably more complex (json for instance) but then the ajax callback would need to be modified accordingly.

    Hope it makes sense. Copy to a new PHP file and run it perhaps

    <?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        /*
        
            emulate database lookups by returning a simple
            value appropriate to the ajax call made.
            
        */
        if( isset( $_POST['docname'] ) ){
            /*
                $data=$conn->prepare('select `sdate` from `slot` where `name`=?');
                $data->execute( array(
                    $_POST['docname']
                ));
                $row=$data->fetchall( PDO::FETCH_OBJ );
                
                exit( json_encode( $row ) );
            */
            exit( date('Y-m-d') );
        }
        if( isset( $_POST['bdate'], $_POST['docname'] ) ){
            /*
                $data=$conn->prepare('select * from `timeslot` where `sdate`=? and `docname`=?');
                $data->execute( array( 
                    $_POST['bdate'],
                    $_POST['docname']
                ));
                $row=$data->fetchall( PDO::FETCH_OBJ );
                
                exit( json_encode( $row ) );
            */
            exit( date('H:i:s') );
        }
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            .hidden{visibility:hidden}
        </style>
    </head>
    <body>
    
        <form method='post'>
            <select name='docname' data-next='bdate' class='form-control' required>
                <option selected hidden disabled>Please Choose Doctor</option>
                <option value=1>Dr. Bob
                <option value=2>Dr. Nick
                <option value=3>Dr. Who
            </select>
            
            <input type='date' name='bdate' data-next='timeslot' class='form-control txtDate hidden' required />
            <input type='time' name='timeslot' data-next='sub' class='form-control hidden' min='08:00' max='18:00' required />
        
            <input type='submit' name='sub' class='hidden' />
        </form>
        
        
        <script>
        
            const q=(e,n=document)=>n.querySelector(e);
            const qa=(e,n=document)=>n.querySelectorAll(e);
            
            // this is the ajax payload. It will be updated by each invocation of the event handler.
            let fd=new FormData();
            
            
            qa('select,input').forEach( obj => obj.addEventListener('change',function(e){
                
                let next = this.hasAttribute('data-next') ? this.dataset.next : false;
                    // add the element name / value
                    fd.append( this.name, this.value );
                    // change the next item
                    fd.set( 'next', next );
                    
                fetch( location.href, { method:'post', body:fd } )
                    // if the response is JSON this needs to be changed to r=r.json()
                    .then( r=>r.text() )
                    .then( value=>{
                        if( value && next ){
                            
                            let input=q('[name="'+next+'"]');
                                input.classList.remove('hidden')
                            /*
                                The following processes a single result only.
                                If the real response is JSON and has multiple values as I suspect then
                                this should be changed to iterate through entire response.
                                
                            */
                            switch( input.type ){
                                case 'date':input.valueAsDate=new Date( value );break;
                                case 'time':input.value=value;break;
                                default:break;
                            }
                        }
                    })
            }));
        </script>
    </body>
</html>
    Login or Signup to reply.
  4. 0

    You have two options.

    1. Add all element by id of you form
      data: $("#frmRegistroDatos").serialize(),
    2. Add one by one {key:value}
      data: {name:name, id:id, phone:phone},

    I hope this help you.

    Login or Signup to reply.
  5. 0

    you can pass multiple parameters by using these ways

    1.

    param = {
   doc_name: $(selector).val(),
   doc_id: $(selector).val() 
};



$.ajax({
   url: '',
   data: param,
   type: '',
   success: function(response){
   }
});

    2.

    $.ajax({
   url: '',
   data: {   
       doc_name: $(selector).val(),
       doc_id: $(selector).val() 
   },
   type: '',
   success: function(response){
   }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search