Невозможно получить раскрывающийся список для автоматического заполнения AJAX PHP - PullRequest
Новая
       1

Невозможно получить раскрывающийся список для автоматического заполнения AJAX PHP

0 голосов
/ 30 июня 2019

Я пытаюсь настроить форму, в которой клиенты могут вводить информацию о доставке для товаров, которые они заказывают на моем сайте. Я отправляю в США и Канаду, поэтому мне бы хотелось, чтобы они выбрали «Соединенные Штаты» или «Канада» в раскрывающемся списке стран, а затем с помощью ajax и php создали список вариантов выбора штатов / провинций для выбранная страна без перезагрузки страницы.

Мой код до сих пор: 

<?php

require_once 'includes/functions.php';

include_once 'header.php';

?>

<h1>Shipping Information</h1>

<p>Please use the form below to add a shipping address to your account.  You MUST have a shipping address on file to be able to access our store.  For a list of accepted state/provice and country codes, please visit <a href="https://www.ups.com/worldshiphelp/WS14/ENU/AppHelp/Codes/State_Province_Codes.htm" target="_blank">here</a>.  We only ship to the United States and Canada at this time.</p>

<div id="form">
<form action="" method="post">
<table cellspacing="2" cellpadding="2" width="550">
    <tr>
        <th colspan="2">Add Shipping Address</th>
    </tr>

    <?php
    if($error)
    {
        echo '<tr><td colspan="2">';
        echo $error;
        echo '</td></tr>';
    }
    ?>

    <tr>
        <td align="right"><label for="fname">First Name</label></td>
        <td><input type="text" name="fname" /></td>
    </tr>

    <tr>
        <td align="right"><label for="lname">Last Name</label></td>
        <td><input type="text" name="lname" /></td>
    </tr>

    <tr>
        <td align="right"><label for="addr1">Address</label></td>
        <td><input type="text" name="addr1" /></td>
    </tr>

    <tr>
        <td align="right"><label for="addr2">Apt/Suite/Unit</label></td>
        <td><input type="text" name="addr2" /></td>
    </tr>

    <tr>
        <td align="right"><label for="city">City</label></td>
        <td><input type="text" name="city" /></td>
    </tr>

    <tr>
        <td align="right"><label for="cc">Country</label></td>
        <td>
            <select name="cc" id="cc">
                <option value="">Select One...</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
            </select>
        </td>
    </tr>

    <tr>
        <td align="right"><label for="sp">State/Province</label></td>
        <td id="response"></td>
    </tr>

    <tr>
        <td align="right"><label for="pcode">Postal Code</label></td>
        <td><input type="text" name="pcode" /></td>
    </tr>

    <tr>
        <td align="right"><label for="active">Set Default</label></td>
        <td><input type="checkbox" name="active" /></td>
    </tr>

    <tr>
        <td colspan="2"><hr /></td>
    </tr>

    <tr>
        <td colspan="2" align="center"><input type="submit" name="submit" value="Add Address" /></td>
    </tr>
</table>
</form>
</div>

<script>
$("#cc").on("change",function(){
    var selected = $(this).val();
    $.ajax({
        type:POST,
        url:"process-request.php",
        data: { cc : selected },
        contentType:"application/json; charset-utf-8",
        dataType:"json",
        async:false,
        success: ccSuccess,
        error: AjaxFailed
    });
});

function ccSuccess(result)
{
    $("#response").html(result);
}

function AjaxFailed(result)
{
    $("#response").html("<p class='error'>Failed to Load State/Province Codes</p>");
}
</script>

<?php

include_once 'footer.php';

?>

Мой файл process-request.php: 

<?php
// process-request.php

if(isset($_POST['cc']))
{
    $country = $_POST['cc'];
    $countryArr = array(
        "US" => array(
        'AL',
        'AK',
        'AZ',
        'AR',
        'CA',
        'CO',
        'CT',
        'DE',
        'DC',
        'FL',
        'GA',
        'HI',
        'ID',
        'IL',
        'IN',
        'IA',
        'KS',
        'KY',
        'LA',
        'ME',
        'MD',
        'MA',
        'MI',
        'MN',
        'MS',
        'MO',
        'MT',
        'NE',
        'NV',
        'NH',
        'NJ',
        'NM',
        'NY',
        'NC',
        'ND',
        'OH',
        'OK',
        'OR',
        'PA',
        'RI',
        'SC',
        'SD',
        'TN',
        'TX',
        'UT',
        'VT',
        'VA',
        'WA',
        'WV',
        'WI',
        'WY'
        ),
        "CA" => array(
        'AB',
        'BC',
        'MB',
        'NB',
        'NL',
        'NT',
        'NS',
        'NU',
        'ON',
        'PE',
        'QC',
        'SK',
        'YT'
        )
    );
    if($country !== 'Select One...')
    {
        echo "<select name='sp'>";
        foreach($countryArr[$country] as $value)
        {
            echo "<option value='".$value."'>".$value."</option>";
        }
        echo "</select>";
    }
}
?>

Мои header.php и footer.php содержат только div форматирования для разметки страницы, а также ссылки для css и javascript href "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js".

Я понятия не имею, чего не хватает или что я делаю неправильно, поскольку я впервые имею дело с javascript, и я попробовал несколько учебных пособий о том, как это сделать, и все они не работали, когда я менял выбор.

Если я изменю выбор страны, ничего не обновляется для раздела штата / провинции, # response.

UPDATE: Мне удалось заставить все работать со следующими фрагментами кода: 

<div id="form">
<form action="" method="post">
<table cellspacing="2" cellpadding="2" width="550">
    <tr>
        <th colspan="2">Add Shipping Address</th>
    </tr>

    <?php
    if($error)
    {
        echo '<tr><td colspan="2">';
        echo $error;
        echo '</td></tr>';
    }
    ?>

    <tr>
        <td align="right"><label for="fname">First Name</label></td>
        <td><input type="text" name="fname" /></td>
    </tr>

    <tr>
        <td align="right"><label for="lname">Last Name</label></td>
        <td><input type="text" name="lname" /></td>
    </tr>

    <tr>
        <td align="right"><label for="addr1">Address</label></td>
        <td><input type="text" name="addr1" /></td>
    </tr>

    <tr>
        <td align="right"><label for="addr2">Apt/Suite/Unit</label></td>
        <td><input type="text" name="addr2" /></td>
    </tr>

    <tr>
        <td align="right"><label for="city">City</label></td>
        <td><input type="text" name="city" /></td>
    </tr>

    <tr>
        <td align="right"><label for="cc">Country</label></td>
        <td>
            <select name="cc" id="country">
                <option value="">Select One...</option>
                <?php
                $sql = $db->query('SELECT * FROM country');
                if(is_object($sql) && $sql->num_rows > 0)
                {
                    while($row = $sql->fetch_array())
                    {
                        echo '<option value="'.$row['id'].'">'.$row['cn'].'</option>';
                    }
                }
                ?>
            </select>
        </td>
    </tr>

    <tr>
        <td align="right"><label for="sp">State/Province</label></td>
        <td><select name="sp" id="state"><option>Select One...</option></select></td>
    </tr>

    <tr>
        <td align="right"><label for="pcode">Postal Code</label></td>
        <td><input type="text" name="pcode" /></td>
    </tr>

    <tr>
        <td align="right"><label for="active">Set Default</label></td>
        <td><input type="checkbox" name="active" /></td>
    </tr>

    <tr>
        <td colspan="2"><hr /></td>
    </tr>

    <tr>
        <td colspan="2" align="center"><input type="submit" name="submit" value="Add Address" /></td>
    </tr>
</table>
</form>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#country").change(function(){
        var country_id = $(this).val();
        if(country_id != ""){
            $.ajax({
                url:"get-states.php",
                data: {c_id:country_id},
                type:"POST",
                success:function(response){
                    var resp = $.trim(response);
                    $("#state").html(resp);
                }
            });
        } else {
            $("#state").html("<option value=''>Select One...</option>");
        }
    });
});
</script>

<?php
require_once 'includes/functions.php';

if(isset($_POST['c_id']))
{
    $sql = $db->query('SELECT * FROM states WHERE ccid = "'.$_POST['c_id'].'"');
    if(is_object($sql) && $sql->num_rows > 0)
    {
        echo '<option value="">Select One...</option>';
        while($row = $sql->fetch_array())
        {
            echo '<option value="'.$row['id'].'">'.$row['sname'].'</option>';
        }
    }
    else
    {
        echo '<option value="">ERROR</option>';
    }
}
else
{
    redirect('./');
}
?>

Я преобразовал все штаты / провинции и страны в записи в моей базе данных MySQL, и с запросами выше, это теперь работает. Мне также пришлось вручную загрузить файл jquery.min.js в папку js, чтобы он действительно работал, так как он не хотел читать удаленный файл.

Ответы [ 3 ]

0 голосов
/ 30 июня 2019

Попробуйте.

Сделайте return json_encode($countryArr[$country]) в вашем php-скрипте.Удалить эхо-часть. 

function ccSuccess(result)
{       
 alert(result);

var country = JSON.parse(result);
var html = "";
   html += "<select name='sp'>";
    for(var i =0; i < country.length; i++)
    {
        html +="<option value='"+ country[i] +"'>"+ country[i] +"</option>";
    }
    html += "</select>";
    $("#response").html(html);
}
0 голосов
/ 30 июня 2019

dataType:"json", Вам нужно удалить эту строку, так как вы не возвращаете json из process-request.php, он просто возвращает HTML-код.

0 голосов
/ 30 июня 2019

Возможно, проблема в вашем вызове AJAX. Вы указываете: 

    contentType:"application/json; charset-utf-8",
    dataType:"json",

Вы отправляете обратно HTML со своей страницы PHP. Попробуй это. / Echo / html / и другие правки предназначены для JSFiddle. Просто верните старые значения для этого, измените dataType и выньте contentType. 

$("#cc").on("change",function(){
    var selected = $(this).val();
    $.ajax({
        type:"POST",
        url:"process-request.php",
        data: { cc : selected },
        dataType:"html",
        async:false,
        success: ccSuccess,
        error: AjaxFailed
    });
});

function ccSuccess(result)
{       alert(result);
    $("#response").html(result);
}

function AjaxFailed(result)
{
    $("#response").html("<p class='error'>Failed to Load State/Province Codes</p>");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...