PHP dynamic select box using $_POST?

1 Views

I was wondering if there is a way similar to the code below in order to use ‘conditional’ select boxes. I tried a few jquery methods, but I really got stuck since I use wordpress, and this should be a search box so it complicates things for me. 

<form name="main" method="post">
  <select name="currency-select">
    <option value="default">Currency</option> 
    <option value="a">U.S Dollars (USD)</option> 
    <option value="b">Euros (EUR)</option> 
    <option value="c">British Pounds (GBP)</option> 
  </select>
</form>

<form name="child">
  <select name="currency-child">

    <?php if($_POST['currency-select'] == "a"): >
      <option value="1">price</option> 
      <option value="2">100</option> 
      <option value="3">200</option> 
      <option value="4">300</option> 
    <?php endif; ?>

    <?php if($_POST['currency-select'] == "b"): >
      <option value="5">price</option> 
      <option value="6">50</option> 
      <option value="7">60</option> 
      <option value="8">70</option> 
    <?php endif; ?>

    <?php if($_POST['currency-select'] == "c"): >
      <option value="9">price</option> 
      <option value="10">130</option> 
      <option value="11">260</option> 
      <option value="12">390</option> 
    <?php endif; ?>

  </select>
</form>

Update : syntax errors fixed

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. As long as the form is not submited, PHP don’t do any thing about your form, and you don’t have a submit button in your html so the values won’t be set in your PHP script.
    I suggest you jQuery.
    I wrote the code below for you, but you have to set the new attributes for your html elements and append a <div> with id="wrapper"–> <div id="wrapper">
    If you didn’t append wrapper, change $('#wrapper').on('change', 'form#main', function() { with$(document).on('change', 'form#main', function() {.
    but in larg codes, I suggest #wrapper instead of document.

    CODE:
    Add this lines in the <head> of page:

    //jQuery
<script type="text/javascript" src="../jQuery/jquery-1.10.2.min.js"></script>

<script type="text/javascript" language="javascript">
    $(document).ready(function() {

        $('#wrapper').on('change', 'form#main', function() {
            if ( $('#a').is(':selected') ) {
                $('option.remove').remove();
                $('#child1').append('<option value="1" class="remove">price</option>');
                $('#child1').append('<option value="2" class="remove">100</option>');
                $('#child1').append('<option value="3" class="remove">200</option>');
                $('#child1').append('<option value="4" class="remove">300</option>');

            }
            else if ( $('#b').is(':selected') ) {
                $('option.remove').remove();
                $('#child1').append('<option value="1" class="remove">price</option>');
                $('#child1').append('<option value="6" class="remove">50</option>');
                $('#child1').append('<option value="7" class="remove">60</option>');
                $('#child1').append('<option value="8" class="remove">70</option>');
            }
            else if ( $('#c').is(':selected') ) {
                $('option.remove').remove();
                $('#child1').append('<option value="9" class="remove">price</option>');
                $('#child1').append('<option value="10" class="remove">130</option>');
                $('#child1').append('<option value="11" class="remove">260</option>');
                $('#child1').append('<option value="12" class="remove">390</option>');

            }
            else if ( $('#default').is(':selected') ) {
                $('option.remove').remove();//reset every thing 
            }

    });

  });
</script>

    Body-html elements-

    <body>
<div id="wrapper">
<form name="main" method="post" action="#" id="main">
  <select name="currency-select">
    <option value="default" id="default">Currency</option> 
    <option value="a" id="a">U.S Dollars (USD)</option> 
    <option value="b" id="b">Euros (EUR)</option> 
    <option value="c" id="c">British Pounds (GBP)</option> 
  </select>
</form>

<form name="child" id="child" method="post" action="#">
  <select name="currency-child" id="child1">
  </select>
</form>
</div>
</body>