Как получить значение автоответчика, используя Два раскрывающихся списка в PHP и Ajax? - PullRequest
Новая
       29

Как получить значение автоответчика, используя Два раскрывающихся списка в PHP и Ajax?

2 голосов
/ 03 апреля 2019

Как получить окончательное значение в 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 как Автоответчик для показа клиенту . [Каждая комбинация имеет свою стоимость]

Ответы [ 3 ]

2 голосов
/ 03 апреля 2019

Я сделал некоторые изменения в вашем коде. И добавьте немного 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'));}
} ?>

Вот что происходит, когда пользователь выбирает пользователя, который нажимает кнопку «Проверить значение», и когда пользователь нажимает эту кнопку, он отправляет Ajax-запрос на страницу PHP «value_calculate.php» и возвращает код php. по выбору пользователя.

Это не полное решение, но вы можете получить основную идею и улучшить этот код в соответствии с вашими предпочтениями.

Спасибо, Tharanga.

0 голосов
/ 22 апреля 2019

Проблемы (основываясь на вашем сообщении на веб-сайте daniweb):

  • Нет поля ввода с идентификатором est_shi_val
  • Просмотр вашегокод, вы хотите использовать оба поля выбора old и new, после изменения результат будет помещен в скрытое поле ввода.Но результат вернется, только если оба параметра old и new имеют выбранные параметры.Это то, что вы хотите?Или хотя бы один из них должен быть выбран, и результат вернется?
  • Использовать базу данных для поиска условий вместо того, чтобы вручную создавать if-else условия

Инструкции: Вы можете сначала удалить свой атрибут / вызов onchange в полях выбора old и 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 */
});

Взгляните на эту скрипку .

0 голосов
/ 03 апреля 2019

Вы можете попробовать это решение: 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

...