Pass multiple variables via Ajax through variable to PHP not working

Question

Am wanting to pass three variables, one a constant the other two from a date picker, through the URL using Ajax. Am able to pass the constant through fine however the variables for the dates are just being passed as the variable name.

Below is the code for the date pickers:

        <tr>
            <td>
                <input type="text" id="range1" size="10" data-datepick="rangeSelect: true, minDate: 'new Date()'"/>
            </td>
            <td>
                <input type="text" id="range2" size="10" data-datepick="rangeSelect: true, minDate: 'new Date()'"/>
            </td>
            <td>
                <button type="button" onclick="dateRangeFunction()">Go</button>
            </td>   
        </tr>

The variables range1 and range2 contain the dates to be passed, the function to create the URL and pass the variables is below:

        function dateRangeFunction() {
            var range1 = document.getElementById('range1').value;
            var range2 = document.getElementById('range2').value;

            if(range1 == null || range1=="") {
                alert("Please Select A Date To Search From");
                return;
            }
                $.ajax({
                    type: 'GET',
                    url: 'daterangedetails.php?pt=7&rngstrt=" + range1 + "&rngfin=" + range2',
                    success: function (data) {
                    document.getElementById('rangeDetails').innerHTML = data;
                    }
                });
            }           
</script>

Doing an alert on the two variables shows the correct dates as selected, however when passed via the URL and using $_GET to echo the resultant variable on rngstrt and rngfin in the daterangedetails.php only gives the variable names as "range1 " & " range2. The pt value is passed correctly.

The code used to echo the variables is:

<?php
session_start();

include 'dbconnect.php';

$dateFrom = $_GET['rngstrt'];
$dateTo = $_GET['rngfin'];
$rangeType = $_GET['pt1'];

echo "Date From: ".$_GET['rngstrt']."<br/>";
echo "Date To: ".$dateTo."<br/>";
echo "Date: ".$criteriaDate."<br/>";
echo "Type: ".$rangeType;
?>

Any help would be greatly appreciated, I was thinking maybe I have to put the variables into an array?? But am unsure how to do that if that's how I should go.

Answer 1

function dateRangeFunction() {
        var range1 = $('range1').val;
        var range2 = $('range2').val;

        if(range1 == null || range1=="") {
            alert("Please Select A Date To Search From");
            return;
        }
            $.ajax({
               type  : 'GET',
                url  : 'daterangedetails.php',
                data : {pt:'7',rngstrt:range1, rngfin:range2},
                success: function (data) {
                document.getElementById('rangeDetails').innerHTML = data;
                }
            });
        }           

Answer 2

url: 'daterangedetails.php?pt=7&rngstrt=" + range1 + "&rngfin=" + range2',

应该

url: 'daterangedetails.php?pt=7&rngstrt=' + range1 + '&rngfin=' + range2,

Answer 3

xhttp.open("GET", "url?parameter_name="+value + "&parameter_name="+value, true);
xhttp.send();