How to display a filtered table where filtering depend upon dropdown and radio

Question

I have a dropdown and a set of two radio buttons. When a dropdown value alongwith a radio opotion is selected I need to show a table with the corresponding values fetched. The data is fetched from CouchCMS backend.

  <select id='dd_icp'>
    <option value="ET" >ET</option>
    <option value="NGP" >NGP</option>
    <option value="GCC" >GCC</option>
  </select>

  <label for="f_to_ho0">
    <input type="radio" name="f_to_ho" id="f_to_ho0" value="0" checked="checked">T/O
  </label>
  <label for="f_to_ho1">
    <input type="radio" name="f_to_ho" id="f_to_ho1" value="1"> H/O 
  </label>

  <table>
    ...
  </table>

$(document).ready(function() {
  $("#dd_icp").change(function() {
    var selectedValue = $(this).val();
    // Radio???
    // Table with data???

  });
});

Please go read [ask]. You are supposed to describe to us what you already tried, and what you are struggling with in particular; _not_ to only drop off your “requirement.” — 04FS, Mar 26 '19 at 11:43
@FalcoGer I have a dropdown and a set of two radio buttons. When a dropdown value alongwith a radio opotion is selected I need to show a table with the corresponding values fetched — Kalyani Kherde, Mar 26 '19 at 14:09

score 0 · Answer 1 · answered Mar 26 '19 at 12:16

In my answer, to allow me to simply cut and paste an example, I changed the radio button to a selection box, but you would process the radio button in like manner.

Form

<select id="dd_icp">
    <option value="" >Select ???</option> <!-- Forces Selection -->
    <option value="ET" >ET</option>
    <option value="NGP" >NGP</option>
    <option value="GCC" >GCC</option>
  </select>

  <select id="f_to_ho" name="f_to_ho">
    <option value="0" >T/O</option>
    <option value="1" >H/O</option>
  </select>

 <div id="results"></div>

Notice the <div id="results"></div>

jQuery

$( "#dd_icp" ).change(function() {  
    var var_a = $(this).val();
    var var_b = $('#f_to_ho').val();
    var url = 'path-to-parse.php';
    var postit = $.post( url, {var_a:var_a,var_b:var_b});       
    postit.done(function( data ) {$('#results').html(data);});  
});

parse.php

<?php
    $var_a = $_POST['var_a'];
    $var_b = $_POST['var_b'];

    // parse and echo filtered table here

?>

Hope this helps.

actually i am new to coding and my company is using couchcms. the issue i am facing is that i cannot use $_POST we are using cms:pages which will generate the table. so basically my entire code, i.e. the form, the table and the script is on the same page. and I am unable to change the dropdown to radio. If you could do that for me it will be more helpful for me. Please. — Kalyani Kherde, Mar 26 '19 at 12:58
That is the problem with out-of-the-box cms... you are limited by not only the script itself but by your programming skill as well. I write my own cms scripts and am not familiar couchcms. I refer you to @04FS comment above. This site is designed for programmers to assist others programmers in working through issues they are having in their code... it is not a place to come and have code written for you for free. The answer above is a viable solution, but you need to know where to place the code in the cms. Regarding $_POST all of that takes place in the jQuery and on your parse file. — petebolduc, Mar 26 '19 at 14:19

How to display a filtered table where filtering depend upon dropdown and radio

1 Answers1