Member Avatar for aveeva7
aveeva7 0 Newbie Poster

Here my form auto responce based on drop-down list,

    <tr> <th>Shipping Cost (Rs) : </th> <td id="findata"></td> <input type="hidden" name="shipping_cost"  id="shipping_cost"/> </tr> <tr>

Same page Ajax :

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

        var zip = $("#zip_postal_code").val();
        var country = $("#country").val();

        $.ajax({
        type: "POST",
        // url: "ajax_ship_cost_data.php",
        url: "sp_cost.php",
        dataType: "text",
        data: { zip_postal_code: zip, country: country},
        success: function(data)
        {
            // Check the output of ajax call on firebug console
             //console.log(data);
            $('#findata').html(data);
            $('#shipping_cost').val(data);

        }
});

});
});
</script>

The field Shipping Cost is auto responce based following field,

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

I have writtend PHP logic like if I have & I want dropdown selected based on this i need to be given shipping cost, i did get the value from magento and shown to customer, if customer choose any one hipping cost dropdown value all values stored into to my table. How to avoid all values stored instead of selected value from ajax dropdown.

Shipping Cost PHP function,

<?php 
{

            // LOGIC

}

###### Post #######
    if(isset($_POST['zip_postal_code']) && isset($_POST['country']))
        {
         $zip_postal_code = $_POST['zip_postal_code'];
         $country = $_POST['country'];

    }
    $results = getShippingEstimate('14419','1',$country,$zip_postal_code);
    ###### Post #######

    $count = -1;
    echo "<select name='shipping_cost'>";
    foreach ($results as $result): 
    $count++;
    ?> <option value="<?php echo $count; ?>"> <?php echo $result["Title"]." - Rs ".$result["Price"];?> </option> <?php
    endforeach;
    echo "</select>"; 
    ?>

Responce : https://snag.gy/8Yuev6.jpg

Expected result : Select and save selected value from dropdown instead of all values in drop down list.

Edited by aveeva7
  • 1 Contributor
  • 0 Replies
  • 368 Views

Dani AI

Generated

Short diagnosis: the AJAX response you inject contains the whole <select> (all option tags), and that full HTML string is being written into the hidden shipping_cost field. When the form posts you end up saving the hidden field value (the whole HTML) instead of a single chosen option. Also having two form controls with the same name (the generated select and the hidden input) creates a race — the browser may submit the hidden value instead of the user’s selection.

Two practical fixes (pick one):

  • Return structured data from the server (JSON) containing the options and a single selected value. Inject the select for the user interface but set the hidden shipping_cost to the price/id that you actually want to store. This avoids ever putting raw HTML into the value you save.
  • If you prefer returning raw HTML for the select, do not give that select a name. Keep the hidden input as the only named field and update it when the user picks an option.

Example client-side patterns (adapt these):

// delegated handler for the injected select (option: server returns a select without name)
document.addEventListener('change', function(e){
  if (e.target && e.target.matches('#findata select')) {
    document.getElementById('shipping_cost').value = e.target.value;
  }
});
// JSON approach: server returns { selectHtml: '...', defaultValue: 'PRICE_OR_ID' }
$.ajax({
  url: 'sp_cost.php',
  method: 'POST',
  dataType: 'json',
  data: { zip: zip, country: country, want: $('#new').val() },
  success: function(resp){
    $('#findata').html(resp.selectHtml);      // selectHtml should NOT have a name attribute
    if (resp.defaultValue) $('#shipping_cost').val(resp.defaultValue);
  }
});

Quick troubleshooting checklist:

  • Inspect the AJAX response in Network → Response to confirm what the server returns.
  • Check the final form payload (Network → Form Data) to see which shipping_cost value is sent.
  • Avoid duplicate name="shipping_cost" on multiple elements.
  • Use a stable ID or method code (not just a loop index) as the option value, and always sanitize before saving.

For : the immediate fix is to stop assigning the entire response string to the hidden field and instead capture only the selected option’s value (or return JSON with the exact value to store).

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.