How to display different <option> text and value from a chosen checkbox using jquery Ajax. On my form, I have a two checkbox for user to choose price range. Example as below, <input type="checkbox" name="price_range" value="1" id="ceo"> < RM 10,000 <input type="checkbox" name="price_range" value="2" id="bod"> < RM 200,000 If user choose value='1' or value='2' , the output of two select option value will change base on the selected checkbox. //display application name <select name="submited_by" id="submited_by"> <option value="0">Choose Price Range</option> </select> //display name to approve application <select name="hod" id="hod"> <option value="0">Choose Price Range</option> </select> Ajax to peform the change $("input[name='price_range']").click(function() { var price = $(this).val(); $.ajax({ type: 'POST', url: 'DropdownValuesForm.php', data: { price : price }, success: function(data){ $('#submited_by').html(data) } }); }); DropdownValuesForm.php <?php require 'db_connection.php'; if ($_SERVER["REQUEST_METHOD"] == "POST") { $price = $_POST['price']; } if($price == '< RM 10,000'){ //do the Query if(mysqli_num_rows($result) > 0){ while($row = mysqli_fetch_assoc($result)){ $submited_by = $row['staff_id']; $nama = $row['nama']; echo '<option value=" ' . $submited_by . ' ">' . $nama . '</option>'; } } mysqli_free_result($result); } else { //do the Query if(mysqli_num_rows($result) > 0){ while($row=mysqli_fetch_assoc($result)){ $submited_id = $row['staff_id']; $nama_pemohon = $row['nama']; echo '<option value=" ' . $submited_id . ' ">' . $nama_pemohon . '</option>'; } } mysqli_free_result($result); } ?> On my case, it will change for <select name="submited_by"> only. Do I need to make another ajax function for the <select name="hod" id="hod"> and make another page to get the value from database like DropdownValuesForm.php .

Jquery - Change Option Value After Selection

Reputation: 12505

To do what you are trying to do, you really just need to stick with one ajax page that will dispatch instructions. See my answer (second half under EDIT/JUST AS A SIDE) here to see how to implement a simple dispatcher. Using the dispatcher from that post, here is what this workflow would look like:

Form checkboxes:

<!-- Unless you need the form to submit a 1 or 2, it would be better to send 10,000 or 20,000 instead of 1 or 2 -->
<input type="checkbox" name="price_range" value="1" id="ceo" data-instructions='{"action":"get_price_range","value":"< RM 10,000","sendto":"#submited_by"}' class="ajax_trigger" />
<input type="checkbox" name="price_range" value="2" id="bod" data-instructions='{"action":"get_price_range","value":"< RM 20,000","sendto":"#hod"}' class="ajax_trigger" />

jQuery:

$(document).ready(function() {
    var doc = $(this);
    // Create ajax instance (from other post, see that script)
    var Ajax = new AjaxEngine($);
    // If you trigger on a class, you can do ajax anywhere on your page
    doc.on('click', '.ajax_trigger', function() {
        // You will likely want to check first that the click is enabling
        // the checkbox or disabling it (check/uncheck) before you run the ajax
        // Extract the instructions
        var dataInstr = $(this).data('instructions');
        // Send the instructions
        Ajax.send(dataInstr,function(response) {
            // Use the extracted sendto to save to a spot on this page
            // It would be better to return json string to decode. This way
            // you can return instructions along with the html for further
            // dynamic processing...but this instance, this should do
            $(dataInstr.sendto).html(response);
        });
    });
});

$_POST:

Your post would then send:

Array(
    [action] => get_price_range
    [value] => < RM 10,000
    [sendto] => #submited_by
)

XML:

Using the other post as a guide, you can create an xml to point your dispatch to that spot:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <ajax>
        <action>
            <get_price_range>
                <include>/actions/get_price_range.php</include>
            </get_price_range>
        </action>
    </ajax>
</config>

Your dispatch would then include this page into the call:

/actions/get_price_range.php

/functions/getPriceOptions.php

Put key scripts into functions (class/methods for even more flexibility) for portability and re-use.

<?php
/*
** @description  This will return your options
** @param $key [string] This is whatever you used to isolate the data in your sql call
** @param $db [resource] This is the mysqli connection that you need to run the query
*/
function getPriceOptions($key,$db)
    {
        ##################
        ## do the query ##
        ##################

        if(mysqli_num_rows($result) > 0){
            while($row = mysqli_fetch_assoc($result)){
                $submited_by = $row['staff_id'];    
                $nama        = $row['nama'];
                # You may want to just return data and not a view
                # the function will be more flexible that way
                $disp[]      = '<option value=" ' . $submited_by . ' ">' . $nama . '</option>';
            }
        }
        mysqli_free_result($result);
        return (!empty($disp))? implode(PHP_EOL,$disp):'';
    }

/actions/get_price_range.php

<?php
require_once(__DIR__.'/db_connection.php');
# include the function
require_once(__DIR__.'/functions/getPriceOptions.php');
# Isolate the post
$price = $_POST['price'];
# Get the query key word/value to search your database
$key   = ($price == '< RM 10,000')? 'whatever' : 'otherwhatever';
# Write to the view
echo getPriceOptions($key,$db);

DEMO:

Here is a demo of all the integrating script from the linked post and the above. The example is slightly different because I don't have your table and I want to send back the post array so you can see that as well, but the end result is the same:

http://www.nubersoft.com/tester.php?example=39736539

Upvotes: 1

Jquery - Change Option Value After Selection

Answers (1)

Related Questions