Php - Using Ajax to populate HTML tab content

adesure
July 21, 2023
174 views
0 votes
2 Answers

I don’t know how to explain (not good with English), but I believe my code does justice, so I want to populate an Input select option using Ajax. So I was able to do it for a single tab. But the issue now is I have 4 tabs with the same form; a hidden value is passed to Ajax to fetch their different content, but it only works for the first tab, and others don’t work.

So based on the code you are seeing, it is only fetching data for the first tab, "MTN" Other tabs are not working; what are the possible issues? Please help

        <li class="nav-item">
            <a class="nav-link network-tab" data-bs-toggle="pill" href="#mtn" role="tab" aria-controls="mtn" aria-selected="true">
                <img class="img-fluid" src="assets/images/network/mtn.jpg" alt="" width="50px" height="100px">
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link active network-tab" data-bs-toggle="pill" href="#glo" role="tab" aria-controls="glo" aria-selected="false">
                <img class="img-fluid" src="assets/images/network/glo.jpg" alt="" width="50px" height="100px">
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link network-tab" data-bs-toggle="pill" href="#airtel" role="tab" aria-controls="airtel" aria-selected="false">
                <img class="img-fluid" src="assets/images/network/airtel.jpg" alt="" width="50px" height="100px">
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link network-tab" data-bs-toggle="pill" href="#mobile" role="tab" aria-controls="mobile" aria-selected="false">
                <img class="img-fluid" src="assets/images/network/9mobile.jpeg" alt="" width="50px" height="150px">
            </a>
        </li>
    </ul>
                    </div>
                    <div class="card-body px-0 pb-0"> 
                      <div class="tab-content" id="j-pills-tabContent">
                        <div class="tab-pane fade" id="mtn" role="tabpanel" aria-labelledby="mtn-tab">
                        <div class="col-xxl-8 box-col-12">
                        <div class="card">
                            <div class="card-header py-4">
                                <h5>Buy MTN Data </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-7">
                                        <form class="theme-form mega-form">
                                        <input type="hidden" id="network_provider" name="network_provider" value="MTN">
                                        <div class="mb-3">
                                        <select class="form-control" id="data_type" name="data_type">
                <option value="">Select Data Type</option>
                <option value="SME">SME</option>
                <option value="Direct">Direct</option>
                <option value="CG">CG</option>
                <option value="SME2">SME2</option>
            </select>
                                            </div>
                                            <div class="mb-3">
                                            <div class="form-group">
            
            <select class="form-control" id="plan_id" name="plan_id">
                <option value="">Select Data Type First</option>
            </select>
        </div>
                                            </div>
                                            <div class="mb-3">
                                                <input class="form-control" type="text" placeholder="Phone Number">
                                            </div>
                                            <!-- <div class="mb-3">
                                                <input class="form-control" type="date">
                                            </div> -->
                                            <!-- <div class="mb-3">
                                                <input class="form-control" type="text" placeholder="bla bla">
                                            </div> -->
                                            <button type="button" class="btn btn-pill btn-outline-warning">Submit</button>
                                        </form>
                                    </div>
                                    <div class="col-md-5 text-center order-md-last order-first"><img class="img-fluid"
                                            src="assets/images/network/mtn.jpg" alt=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                        </div>
                        <div class="tab-pane fade show active" id="glo" role="tabpanel" aria-labelledby="glo-tab">
                        <div class="col-xxl-8 box-col-12">
                        <div class="card">
                            <div class="card-header py-4">
                                <h5>Buy Glo Data </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-7">
                                        <form class="theme-form mega-form">
                                        <input type="hidden" id="network_provider" name="network_provider" value="GLO">
                                        <div class="mb-3">
                                        <select class="form-control" id="data_type" name="data_type">
                <option value="">Select Data Type</option>
                <option value="SME">SME</option>
                <option value="Direct">Direct</option>
                <option value="CG">CG</option>
                <option value="SME2">SME2</option>
            </select>
                                            </div>
                                            <div class="mb-3">
                                            <div class="form-group">
            
            <select class="form-control" id="plan_id" name="plan_id">
                <option value="">Select Data Type First</option>
            </select>
        </div>
                                            </div>
                                            <div class="mb-3">
                                                <input class="form-control" type="text" placeholder="Phone Number">
                                            </div>
                                            <!-- <div class="mb-3">
                                                <input class="form-control" type="date">
                                            </div> -->
                                            <!-- <div class="mb-3">
                                                <input class="form-control" type="text" placeholder="bla bla">
                                            </div> -->
                                            <button type="button" class="btn btn-pill btn-outline-warning">Submit</button>
                                        </form>
                                    </div>
                                    <div class="col-md-5 text-center order-md-last order-first"><img class="img-fluid"
                                            src="assets/images/network/glo.jpg" alt=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                        </div>
                        <div class="tab-pane fade" id="airtel" role="tabpanel" aria-labelledby="airtel-tab">
                        <div class="col-xxl-8 box-col-12">
                        <div class="card">
                            <div class="card-header py-4">
                                <h5>Buy Airtel Data </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-7">
                                        <form class="theme-form mega-form">
                                        <input type="hidden" id="network_provider" name="network_provider" value="AIRTEL">
                                        <div class="mb-3">
                                        <select class="form-control" id="data_type" name="data_type">
                <option value="">Select Data Type</option>
                <option value="SME">SME</option>
                <option value="Direct">Direct</option>
                <option value="CG">CG</option>
                <option value="SME2">SME2</option>
            </select>
                                            </div>
                                            <div class="mb-3">
                                            <div class="form-group">
            
            <select class="form-control" id="plan_id" name="plan_id">
                <option value="">Select Data Type First</option>
            </select>
        </div>
                                            </div>
                                            <div class="mb-3">
                                                <input class="form-control" type="text" placeholder="Phone Number">
                                            </div>
                                            <!-- <div class="mb-3">
                                                <input class="form-control" type="date">
                                            </div> -->
                                            <!-- <div class="mb-3">
                                                <input class="form-control" type="text" placeholder="bla bla">
                                            </div> -->
                                            <button type="button" class="btn btn-pill btn-outline-warning">Submit</button>
                                        </form>
                                    </div>
                                    <div class="col-md-5 text-center order-md-last order-first"><img class="img-fluid"
                                            src="assets/images/network/airtel.jpg" alt=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                        </div>
                        <div class="tab-pane fade" id="mobile" role="tabpanel" aria-labelledby="mobile-tab">
                        <div class="col-xxl-8 box-col-12">
                        <div class="card">
                            <div class="card-header py-4">
                                <h5>Buy 9Mobile Data </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-7">
                                        <form class="theme-form mega-form">
                                        <input type="hidden" id="network_provider" name="network_provider" value="9MOBILE">
                                        <div class="mb-3">
                                        <select class="form-control" id="data_type" name="data_type">
                <option value="">Select Data Type</option>
                <option value="SME">SME</option>
                <option value="Direct">Direct</option>
                <option value="CG">CG</option>
                <option value="SME2">SME2</option>
            </select>
                                            </div>
                                            <div class="mb-3">
                                            <div class="form-group">
            
            <select class="form-control" id="plan_id" name="plan_id">
                <option value="">Select Data Type First</option>
            </select>
        </div>
                                            </div>
                                            <div class="mb-3">
                                                <input class="form-control" type="text" placeholder="Phone Number">
                                            </div>
                                            <!-- <div class="mb-3">
                                                <input class="form-control" type="date">
                                            </div> -->
                                            <!-- <div class="mb-3">
                                                <input class="form-control" type="text" placeholder="bla bla">
                                            </div> -->
                                            <button type="button" class="btn btn-pill btn-outline-warning">Submit</button>
                                        </form>
                                    </div>
                                    <div class="col-md-5 text-center order-md-last order-first"><img class="img-fluid"
                                            src="assets/images/network/9mobile.jpeg" alt=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                        </div>
                      </div>
                    </div>
                  </div>```

And here is the javascript
```<script>
const data_typeSelect = document.getElementById('data_type');
const plan_idSelect = document.getElementById('plan_id');
const networkProviderInput = document.getElementById('network_provider'); // Hidden input field

data_typeSelect.addEventListener('change', function () {
    const selectedType = data_typeSelect.value;
    const networkProvider = networkProviderInput.value; // Get the value of the hidden input field

    if (selectedType !== '') {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                // Update the options in the second select box with the retrieved data
                plan_idSelect.innerHTML = xhr.responseText;
            }
        };
        xhr.open('POST', 'partial/processor.php', true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send('data_type=' + encodeURIComponent(selectedType) + '&network_provider=' + encodeURIComponent(networkProvider)); // Include the network provider value in the POST data
    } else {
        // If no data type is selected, reset the second select box to its default state
        plan_idSelect.innerHTML = '<option value="">Select Data Type First</option>';
    }
});
</script>```

Answers

This is just an example that will help you out.
HTML

<select class="form-control" id="data_type_mtn" name="data_type">
</select>
<select class="form-control" id="data_type_glo" name="data_type">
</select>
<select class="form-control" id="data_type_airtel" name="data_type">
</select>
<select class="form-control" id="data_type_mobile" name="data_type">
</select>

  const dataTypeSelects = document.querySelectorAll('.data-type-select');

dataTypeSelects.forEach((dataTypeSelect) => {
    dataTypeSelect.addEventListener('change', function () {
        const selectedType = dataTypeSelect.value;
        const networkProvider = dataTypeSelect.dataset.network;

        if (selectedType !== '') {
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                   
                    const planIdSelect = dataTypeSelect.parentElement.querySelector('.plan-id-select');
                    planIdSelect.innerHTML = xhr.responseText;
                }
            };
            xhr.open('POST', 'partial/processor.php', true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.send('data_type=' + encodeURIComponent(selectedType) + '&network_provider=' + encodeURIComponent(networkProvider));
        } else {
          
            const planIdSelect = dataTypeSelect.parentElement.querySelector('.plan-id-select');
            planIdSelect.innerHTML = '<option value="">Select Data Type First</option>';
        }
    });
});

Simple solution would be to get the value straight from the select tag, That way you focus on getting the data you need based on the values.

function getData (value) {
 alert(value);
}

<select onchange="getData(this.value)">
   <option value="" selected>Select Data Type MTN</option>
  <option value="SME MTN">SME</option>
  <option value="Direct MTN">Direct</option>
</select>

<select onchange="getData(this.value)">
   <option value="" selected>Select Data Type Telkom</option>
  <option value="SME Telkom">SME</option>
  <option value="Direct Telkom">Direct</option>
</select>

<select onchange="getData(this.value)">
   <option value="" selected>Select Data Type Vodacom</option>
  <option value="SME Vodacom">SME</option>
  <option value="Direct Vodacom">Direct</option>
</select>

Please signup or login to give your own answer.

Click here to cancel reply.

Php – Using Ajax to populate HTML tab content

Answers