2
votes

Comment obtenir une valeur de réponse automatique en utilisant deux listes déroulantes en PHP et Ajax?

Comment obtenir la valeur finale en AJAX en utilisant deux valeurs déroulantes,

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

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

  <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>

Résultat attendu:

p >

Si le client choisit: J'ai -> un et je veux -> deux le coût devrait être 10 $ comme réponse automatique à montrer au client . [Chaque combinaison a son propre coût]

ajax dropdown autocomplete php-7

1 commentaires

Où est ton appel Ajax? Vous pouvez utiliser jQuery $ .ajax avec les deux valeurs sélectionnées comme paramètres afin d'appeler un page php qui vous donne le résultat

3 Réponses :

2
votes

J'ai apporté quelques modifications à votre code. Et ajoutez un peu d'Ajax à cela et créez également un code PHP séparé, vous pouvez avoir une idée de base en utilisant cet exemple de code.

Page Html -

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

Code de page PHP - p>

<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>

Voici ce qui se passe, une fois que l'utilisateur a fait les sélections, l'utilisateur doit cliquer sur le bouton "Vérifier la valeur" et une fois que l'utilisateur a cliqué sur ce bouton, il fera une requête Ajax à la page PHP "value_calculate.php" et le code php retournent la valeur en fonction de la sélection de l'utilisateur.

Ce n'est pas une solution complète mais vous pouvez avoir une idée de base et améliorer ce code en fonction de vous.

Merci, Tharanga.

0 commentaires

0
votes

Vous pouvez essayer cette solution: 1) Modifiez votre code HTML comme ceci:

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
        }
    });
    }
  }
 }

2) Ajoutez cette fonction JavaScript à votre page:

  <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>

Je n'ai pas testé ce code . Veuillez apporter les modifications nécessaires. Si vous ne savez toujours pas ce qui se passe, je vous recommande de suivre un didacticiel détaillé afin de comprendre d'abord les concepts, puis de coder. par exemple. https://www.w3schools.com/php/php_ajax_intro.asp p >

1 commentaires

Vous pouvez créer un fichier CalculateCost.php et l'utiliser comme indiqué par @Sri: 'sucess', 'msg' => '10 $'));} else {ec‌ ho json_encode (array ('sucess' => 'sucess', 'msg' => '0'));}}?>

0
votes

Problèmes (d'après votre message sur le site Web daniweb):

Il n'y a pas de champ de saisie avec un identifiant de est_shi_val
En regardant votre code, vous souhaitez utiliser à la fois les champs de sélection ancien et nouveau , lorsqu'ils sont modifiés, le résultat sera placé dans un champ de saisie masqué. Mais le résultat ne sera renvoyé que si l ' ancien et le nouveau ont sélectionné des options. c'est ce que tu veux? Ou au moins l'un d'entre eux doit être sélectionné et le résultat reviendra?
Utilisez une base de données pour rechercher des conditions au lieu de créer manuellement des conditions if-else

Instructions: Vous pouvez d'abord supprimer votre attribut / appel onchange dans vos champs de sélection ancien et nouveau .

Appel 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 */
});

Puis à votre 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));

Autre option: pas d'AJAX

Vous pouvez également le faire sans utiliser AJAX puisque vous créez manuellement des conditions:

$("#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" */
    }
  });

});

Prenez un coup d'oeil à ce violon .

3 commentaires

Puis-je savoir comment résoudre l'erreur: snag.gy/WMT1mK.jpg @Logan Wayne

@Gem supprime l'info-bulle de survol pour que je puisse voir la variable déclarée avant l'erreur. Je suppose que vous ajoutez à nouveau var en déclarant la new variable.

@Gem - j'ai oublié que new est un mot réservé. Vous pouvez le remplacer par newval . Regardez ma réponse mise à jour.