Submit Multiple Data through ajax

Creating input and submit through ajax to processing php and return back the value:

For HTML:

        <b>Step 1. </b>Indicate your preferred hourly Rate: 
        <div class="input-group">
          <span class="input-group-addon">$</span>
          <input type="text" id="hrRate" class="form-control" aria-label="Amount (to the nearest dollar)">
          <span class="input-group-addon">/hours</span>
        </div>
        <b>Step 2. </b>The number of hours i will work per day:
        <div class="input-group">
          <input type="text" id="hrsPerDay" name="hrsPerDay" class="form-control">
          <span class="input-group-addon" id="basic-addon2">hours/Per Day</span>
        </div>
        <b>Step 3. </b>The number of days to complete the required deliverables:
                <div class="input-group">
          <input type="text" id="totalDays" name="totalDays" class="form-control">
          <span class="input-group-addon" id="basic-addon2">Days</span>
        </div>
        <br>
        <button class="btn default-btn" type="submit" onclick='summary()'>View Summary</button>

For PHP:

<?php
$_POST;

echo '<pre>', print_r($_POST, true), '</pre>';
?>

For Ajax:

    function summary() {
        hrRate = document.getElementById('hrRate').value;
        hrsPerDay = document.getElementById('hrsPerDay').value;
        totalDays = document.getElementById('totalDays').value;

      $.ajax({
           type: "POST",
           url: "bidsummary.php",
           data : 'rate=' + hrRate + '&hr=' + hrsPerDay + '&day=' + totalDays, 
           error: function(xhr,status,error){alert(error);},
           success:function(data) {
             document.getElementById( 'summary' ).innerHTML = data;
           }

      });