如何在 PHP 和 Ajax 中使用两个下拉列表获取自动响应值？答案

【问题标题】：How to get auto response value by using Two Drop-Down List in PHP & Ajax?如何在 PHP 和 Ajax 中使用两个下拉列表获取自动响应值？
【发布时间】：2019-04-03 05:35:53
【问题描述】：

如何使用两个下拉值在AJAX中获取最终值，

Koluextension.php

  <html>
  <head>
  <title> Upgrade Cost</title>
  </head>

<form method='POST' action='upgradecost.php'>

Name            : <input type="text" name="name"/><br/><br/>
Email Id        : <input type="text" name="email_id"/><br/><br/>
Contact Number  : <input type="text" name="contact_number"/><br/><br/>
I have          :
<select onchange="getvalue()" id="old">
<option value = "select_option">Select Option</option>
<option value = "one">One</option>
<option value = "two">Two</option>
<option value = "three">Three</option>
<option value = "four">Four</option>
<option value = "five">Five</option>
</select><br/><br/>
I want          :
<select onchange="getvalue()" id="new">
<option value = "select_option">Select Option</option>
<option value = "one">One</option>
<option value = "two">Two</option>
<option value = "three">Three</option>
<option value = "four">Four</option>
<option value = "five">Five</option>
</select>
</form>
</html>

升级成本.php

   <?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

if(isset($_POST['old']) && isset($_POST['new'])){
    $old = $_POST['old'];
    $new = $_POST['new'];
    if($old=='one'&&$new=='two'){
        echo json_encode(array('sucess'=>'sucess','msg'=>'10$'));
        }
        else{echo json_encode(array('sucess'=>'sucess','msg'=>'0'));}
} ?>

计算成本.php

<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

if(isset($_POST['old']) && isset($_POST['new'])){
    $old = $_POST['old'];
    $new = $_POST['new'];
    if($old=='one'&&$new=='two'){
        echo json_encode(array('sucess'=>'sucess','msg'=>'10$'));
        }
        else{echo json_encode(array('sucess'=>'sucess','msg'=>'0'));}
} ?>

预期输出：

如果客户选择：我有 -> 一个并且我想要 -> 两个，费用应该 $10 作为向客户展示的自动回复。 [每个组合都有自己的成本]

【问题讨论】：

你的 ajax 调用在哪里？您可以将jQuery $.ajax 与两个选定的值一起用作参数，以便调用为您提供结果的 php 页面

标签： ajax autocomplete dropdown php-7

【解决方案1】：

我对您的代码做了一些更改。并为此添加一些 Ajax 并创建单独的 PHP 代码，您可以使用此代码示例获得基本概念。

HTML 页面 -

<html>
<head>
<title> Upgrade Cost</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>

<form method='POST' action='upgradecost.php'>

Name            : <input type="text" name="name"/><br/><br/>
Email Id        : <input type="text" name="email_id"/><br/><br/>
Contact Number  : <input type="text" name="contact_number"/><br/><br/>
I have          :
<select id="old">
<option value = "select_option">Select Option</option>
<option value = "one">One</option>
<option value = "two">Two</option>
<option value = "three">Three</option>
<option value = "four">Four</option>
<option value = "five">Five</option>
</select><br/><br/>
I want          :
<select id="new">
<option value = "select_option">Select Option</option>
<option value = "one">One</option>
<option value = "two">Two</option>
<option value = "three">Three</option>
<option value = "four">Four</option>
<option value = "five">Five</option>
</select>
</form>
<button id="btn_check_value">Check for value</button>

<script>
    $(document).ready(function(){
        $('#btn_check_value').on('click',function(){
            var old_val = $("#old option:selected").val();
            var new_val = $("#new option:selected").val();
            $.ajax({
                method: "POST",
                url: "value_calculate.php",
                data: { old: old_val, new: new_val }
              })
                .done(function( msg ) {
                  alert( "Data Saved: " + msg );
            });
        })
    })

    </script>
</html>

PHP 页面代码 -

<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

if(isset($_POST['old']) && isset($_POST['new'])){
    $old = $_POST['old'];
    $new = $_POST['new'];
    if($old=='one'&&$new=='two'){echo json_encode(array('sucess'=>'sucess','msg'=>'10$'));}else{echo json_encode(array('sucess'=>'sucess','msg'=>'0'));}
} ?>

这里发生的情况是，一旦用户进行选择，用户必须单击“检查值”按钮，一旦用户单击该按钮，它将向 PHP 页面“value_calculate.php”发出 Ajax 请求，并且 php 代码返回值根据用户选择。

这不是完整的解决方案，但您可以根据自己的基本想法和改进此代码。

谢谢，塔兰加。

【讨论】：

【解决方案2】：

您可以尝试以下解决方案： 1) 像这样修改你的 HTML：

  <html>
  <head>
  <title> Upgrade Cost</title>
  </head>

<form method='POST' action='upgradecost.php'>

Name            : <input type="text" name="name"/><br/><br/>
Email Id        : <input type="text" name="email_id"/><br/><br/>
Contact Number  : <input type="text" name="contact_number"/><br/><br/>
I have          :
<select onchange="getvalue()" id="old">
<option value = "select_option">Select Option</option>
<option value = "one">One</option>
<option value = "two">Two</option>
<option value = "three">Three</option>
<option value = "four">Four</option>
<option value = "five">Five</option>
</select><br/><br/>
I want          :
<select onchange="getvalue()" id="new">
<option value = "select_option">Select Option</option>
<option value = "one">One</option>
<option value = "two">Two</option>
<option value = "three">Three</option>
<option value = "four">Four</option>
<option value = "five">Five</option>
</select>
</form>
</html>

2) 将此 JavaScript 函数添加到您的页面：

function getValue() {
var cost1=$('#old').val();
var cost2=$('#new').val();

 $.ajax({
        url: '{{ url("calculateCost.php") }}',
        type: 'get',
        //async:true,
        data: {
            oldId: cost1,
            NewId: cost2,
        },
        dataType: 'json',
        success: function(json) {
           //you can calculate total cost on server and show updated cost using 
           //jquery anywhere on your form
          //do whatever you wanted to do
        //you can easily manipulate DOM using jQuery
  },
        error : function(xhr, textStatus, errorThrown ) {
            //in case ajax call error
        }
    });
    }
  }
 }

尚未测试此代码。请进行必要的更改。如果您仍然不知道发生了什么，那么我建议您阅读详细的教程，以便先了解概念，然后再编写代码。例如https://www.w3schools.com/php/php_ajax_intro.asp

【讨论】：

您可以创建一个文件 calculateCost.php 并按照@Sri 的指示使用它： 'sucess','msg'=>'10$'));}else{echo json_encode (array('sucess'=>'sucess','msg'=>'0'));} } ?>

【解决方案3】：

问题（基于您在 daniweb 网站上的帖子）：

没有ID为est_shi_val的输入字段
查看您的代码，您希望同时使用old 和new 选择字段，更改后会将结果放入隐藏的输入字段。但只有在old 和new 都选择了选项时，才会返回结果。这是你想要的吗？或者至少应该选择其中一个，然后返回结果？
使用数据库查找条件，而不是手动创建if-else 条件

说明： 您可以先在您的old 和new 选择字段中删除您的onchange 属性/调用。

AJAX 调用：

$("#old, #new").change(function(){ /* WHEN YOU CHANGE THE VALUE OF THE OLD OR NEW INPUT FIELD */
  var old = $("#old").val(),
      newval = $("#new").val();

  $.ajax({ /* TRIGGER THE AJAX CALL */
    type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
    url: "ajax_ship_data.php", /* PAGE WHERE WE WILL PASS THE DATA */
    data: {'old':old, 'new':newval}, /* THE DATA WE WILL BE PASSING */
    dataType: 'json',
    success: function(result){ /* GET THE RETURNED DATA */
      $("#results").html(result.message); /* THE RETURNED MESSAGE WILL BE SHOWN IN THIS DIV, PROVIDED THAT YOU HAVE A DIV WITH AN ID OF "results" */
      $('#shipping_weight').val(result.weight); /* ASSUMING THAT YOU HAVE A HIDDEN INPUT FIELD WITH AN ID OF "shipping_weight" */
    }
  });

});

然后在你的ajax_ship_data.php:

$shipping_weight = 0;
$message = 'Please select an option from both fields.';

if(isset($_POST['old']) && isset($_POST['new'])){
    $old = $_POST['old'];
    $new = $_POST['new'];

    //part 1 
    if($old == 'three_compact' && $new == 'five_compact'){
        $shipping_weight = 10;
        $message = 'Shipping weight is 10.';
    }
    /** REST OF IF-ELSE CONDITIONS **/
}

echo json_encode(array('message' => $message, 'weight' => $shipping_weight));

其他选项：无 AJAX

您也可以在不使用 AJAX 的情况下执行此操作，因为您是手动创建条件：

$("#old, #new").change(function(){
    var old = $("#old").val(),
        newval = $("#new").val();

    if(old=='three_compact' && newval=='five_compact'){
        $("#results").text('10');
    }
    /* REST OF IF-ELSE CONDITIONS */
});

看看这个fiddle。

【讨论】：

我知道如何解决这个错误：snag.gy/WMT1mK.jpg@Logan Wayne
@Gem 删除悬停的工具提示，以便我可以在错误之前看到声明的变量。我假设您在声明new 变量时再次添加var。
@Gem - 忘了new 是保留字。您可以改为将其更改为 newval。看看我更新的答案。