Member Avatar for aveeva7
aveeva7 0 Newbie Poster

I have predefined value like shipping_weight = 10$, my form consisting two dropdown list, if the dropdown selected based on the selection how to return my ajax value,

Index.php :

    <tr>
        <th>I have : </th>
        <td>
            <select id="old" name="i_have">
                <option value = "select_option">Select Option</option>
                <option value = "three_compact">3 Compact</option>
                <option value = "three_regular">3 Regular</option>
                <option value = "three_triple">3 Triple</option>
                <option value = "five_compact">5 Compact</option>
                <option value = "five_regular">5 Regular</option>
                <option value = "five_triple">5 Triple</option>
                <option value = "seven_compact">7 Compact</option>
                <option value = "seven_regular">7 Regular</option>
                <option value = "seven_triple">7 Triple</option>
                <option value = "nine_compact">9 Compact</option>
                <option value = "nine_regular">9 Regular</option>
                <option value = "nine_triple">9 Triple</option>
            </select>
        </td>
    </tr>

    <tr>
        <th>I want : </th>
        <td>
            <select id="new" name="i_want">
                <option value = "select_option">Select Option</option>
                <option value = "three_compact">3 Compact</option>
                <option value = "three_regular">3 Regular</option>
                <option value = "three_triple">3 Triple</option>
                <option value = "five_compact">5 Compact</option>
                <option value = "five_regular">5 Regular</option>
                <option value = "five_triple">5 Triple</option>
                <option value = "seven_compact">7 Compact</option>
                <option value = "seven_regular">7 Regular</option>
                <option value = "seven_triple">7 Triple</option>
                <option value = "nine_compact">9 Compact</option>
                <option value = "nine_regular">9 Regular</option>
                <option value = "nine_triple">9 Triple</option>
            </select>
        </td>
    </tr>

    <tr>
        <th>Shipping Weight : </th> 
        <td id="results"></td>
        <input type="hidden" name="shipping_weight" id="shipping_weight"/>
    </tr> 
    <tr>    

    <script>
        $(document).ready(function(){
        $('#new').on('change',function(){

        var ship_val = $("#est_shi_val").val();
        $.ajax({
        type: "POST",
        url: "ajax_ship_data.php",
        dataType: "text",
        data: {est_shi_val: ship_val },
        success: function(data)
        {
            // Check the output of ajax call on firebug console
            // console.log(data);
            $('#results').html(data);
            $('#shipping_weight').val(data);
        }
});

});
});

</script>

My value is,

ajax_ship_data.php

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

// three step kolupadi combination 

//part 1 

if($old=='three_compact'&&$new=='five_compact'){  // 6250111

/** echo json_encode(array('Cost 10$')); */
echo "10";
}

How get my shipping weight if two drop down seleted.
FYI -> https://snag.gy/pNaEMv.jpg

Edited by aveeva7
  • 1 Contributor
  • 0 Replies
  • 2K Views

Dani AI

Generated

you are almost there. Two things are tripping you up: (1) your JS posts a non-existent field est_shi_val instead of the two select values, and (2) the AJAX runs only when #new changes. Post both old and new anytime either dropdown changes, then return a simple JSON payload. That keeps the client code clean and avoids piles of if statements.

// index.php (JS)
$(function () {
  function updateShipping() {
    var oldVal = $("#old").val();
    var newVal = $("#new").val();

    if (oldVal === "select_option" || newVal === "select_option") {
      $("#results").text("");
      $("#shipping_weight").val("");
      return;
    }

    $.ajax({
      type: "POST",
      url: "ajax_ship_data.php",
      dataType: "json",
      data: { old: oldVal, new: newVal },
      success: function (res) {
        $("#results").text(res.weight + " $");
        $("#shipping_weight").val(res.weight);
      },
      error: function () {
        $("#results").text("Error");
        $("#shipping_weight").val("");
      }
    });
  }

  $("#old, #new").on("change", updateShipping);
});
// ajax_ship_data.php (PHP)
header('Content-Type: application/json; charset=UTF-8');

$old = $_POST['old'] ?? null;
$new = $_POST['new'] ?? null;

$rates = [
  'three_compact' => ['five_compact' => 10 /*, ... */],
  // add your other combos here
];

if (!$old || !$new || !isset($rates[$old][$new])) {
  echo json_encode(['weight' => null]);
  exit;
}

echo json_encode(['weight' => $rates[$old][$new]]);

Notes:

  • Guard against the placeholder option so you do not query the server prematurely.
  • If you prefer plain text, change dataType: "json" to "text" and echo "10";, but JSON scales better as you add fields (currency, notes, etc.).
  • Keep server-side validation; never trust only the client.
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.