如何在PHP和Ajax中使用Two下拉列表获取自动响应值?

问题描述 投票:2回答:3

如何使用两个下拉值获取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> 

upgratedcost.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'));}
} ?>

calculatecost.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'));}
} ?>

预期产出:

enter image description here

如果客户选择:我有 - >一个,我想要 - >两个成本应该是10美元作为向客户展示的自动回复。 [每种组合都有自己的成本]

ajax autocomplete dropdown php-7
3个回答
2
投票

我对您的代码进行了一些更改。并为此添加一些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代码值选择。

这不是完整的解决方案,但您可以根据自己的需要获得基本想法并改进此代码。

谢谢,Tharanga。


0
投票

您可以尝试此解决方案: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


0
投票

问题(根据您在daniweb网站上的帖子):

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

说明:您可以先在onchangeold选择字段中删除new属性/调用。

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

© www.soinside.com 2019 - 2024. All rights reserved.