-1

see my client site first to get an idea.

In above site, i have a giftfinder box in right side. There are 3 select boxes. currently I'm using 3 forms for these 3 select boxes which means each drop down select box is embedded into form. When you select the first drop down select box, it picks one and second select box's value will be determined which value is selected from first select box. So if you choose Man, then all athe related occasions of Man will be dispalyed into seconds drop down select box. Its working fine.

But the problem is it refreshes everytime you select the first drop down box.

I don't want to refresh page. it must select the value and pass the value so seconds select box can determine its related values.

so I'm thinking to us ajax. but no success.

So i included some code for the first drop down select box.

this is mix of html and php and wordpress.

<div class="select-one">

 <form id="searrec" method="post" action="">
    <select name="selectionRecipient" id="selectionRecipient" onchange="this.form.submit();"> 

            <?php 
                    $results_rec = get_option('current_recipient');
                    if(isset($_POST['selectionRecipient'])){
                        $results_rec = $_POST['selectionRecipient'];
                        update_option('current_recipient', $results_rec);
                        $results_rec = get_option('current_recipient');
                    }
            ?>
        <?php 
        //asort($result_rec);
        $t_name_arr = array();

        foreach($result_rec as $rec):
                $t_id = $rec->term_id;
                $term = get_term($t_id , 'category' );
                $t_name_arr[] = $term->name;
        endforeach;

        //print_r($t_name_arr);

        rsort($t_name_arr);

        foreach ($t_name_arr as $t_name):?><option class="rec_val"<?php if($results_rec==$t_name){ echo 'selected="selected"';}?>value="<?php echo $t_name;?>"><?php echo $t_name;?></option>
      <?php endforeach;?>

      </select> 
    <input type="hidden" id="submitrec" value="Search" />
    </form> -->

</div>

So I'm am using form method post and using $_POST to retrieve the selected value and pass it to $results_rec variable.

Later in the code, I'm using if.. else to determine if $results_rec =='Man' then display certain items which are related to Man and so forth.

So what I want is not to refresh the page while I select item from first drop down select box.

Please help.

xlecoustillier
  • 16,183
  • 14
  • 60
  • 85
Zakir Sajib
  • 293
  • 2
  • 7
  • 16

7 Answers7

1

change this:

<select name="selectionRecipient" id="selectionRecipient" onchange="this.form.submit();">

to this:

<select name="selectionRecipient" id="selectionRecipient">

and the jquery:

$("#searrec").submit(function(e) {
   e.preventDefault();

   // your code

   return false;
});

EDITED:

use this to get the selected index (number)

var index = $("#selectionRecipient")[0].selectedIndex;

or value:

var value = $("#selectionRecipient")[0].value;

Then you can call an ajax perhaps: (assuming the other selection box has "id=other_select"

$.ajax({url:"index.php",type:"POST",data {type:"populate",index:2,value:"option1"},dataType:"json",
   success: function(data) {
      // data (json) returned from server so populate other selection boxes with that..
  // in this example 'data' is an array, coming directly from server (see below the .php)   
      $("#other_select")[0].selectedIndex = 0;
  for(var x in data) {
     $("#other_select")[0].options[x] = new Option(data[x]);
  }
   }
})

in your .php i assume you get a list (etc. database) to populate the other selection list (in client). This code could looks like:

if (isset($_POST["type"]) && $_POST["type"]=="populate") {
   echo json_encode(array("option1","option2","option3"));
   exit(1);
}
  • @vizvi, it stops, but how i am going to get the value which was selected and pass to second form where there is another select box? thnkx – Zakir Sajib Jun 15 '12 at 15:49
  • ok, but how i am going to pass index or value variable to my php variable? because in later part of the code, i am using php variable $results_rec to determine which one is selected. if Man is selected then i have different values , if woman is selected then different values will be is second drop down box. i just need to find out how to pass this javascript variable's value to my php variable. – Zakir Sajib Jun 15 '12 at 16:06
  • or can i assign javascript variable to php variable? I know it is possible to assign php variable to javascript variable. but not the other way as js is client side and php is server side. – Zakir Sajib Jun 15 '12 at 16:08
  • you can call an ajax passing index/value (what you want) and call the php. On php, you build your values to be populate the next selection box (based on index/value you passed) and return them in json ideally. check post for example. –  Jun 15 '12 at 16:12
  • how about if i want to use my home page as url? how i can write the code in url: ?? thanks – Zakir Sajib Jun 15 '12 at 17:32
  • can u show me how to poulate data from your code when it is successful in ajax? i dont know how to pass index or value variabel to my php server where i need to populate another drop down select box. thanks – Zakir Sajib Jun 16 '12 at 05:14
  • Check edited post that show the required js and php for a basic use. –  Jun 16 '12 at 07:10
0
$('#searrec').submit(function () {
 //do some form submit work here
 return false;
});
Sujit Agarwal
  • 12,348
  • 11
  • 48
  • 79
0

You'll have to use an AJAX call to populate the other select boxes based on whatever you've selected in the first one without reloading the page.

I suggest you take a look at jQuery's AJAX functionality. Read up on $.ajax and $.post - with them you could submit the value that you've selected in the first listbox to a PHP script and then based on that value return and populate the other select boxes.

Bob
  • 1,355
  • 5
  • 19
  • 38
  • i think ajax is the solution, but dont know about ajax. i think i need to study but dont have enough time for this project, its almost done. only this part has to be fixed!! thnaks man. – Zakir Sajib Jun 15 '12 at 15:50
0

Use AJAX to update the other selects without refreshing the page. Use jQuery to make AJAX easy.

This question will help: Change the selected value of a drop-down list with jQuery

Community
  • 1
  • 1
Scott Saunders
  • 29,840
  • 14
  • 57
  • 64
0
$('#searrec').submit(function(e){

    e.preventDefault();

});
laymanje
  • 833
  • 5
  • 9
0

You should delete event onchange="this.form.submit(); from combobox

And use ajax with jquery:

$("#searrec").onchange(function() {
    $.ajax({
        url:"",
        success:function(response){
            alert("success");
        }
    });
});
Bunlong
  • 652
  • 1
  • 9
  • 21
0

Guys its fixed.

Plz have a look at http://giftideasitems.com/.

See gift finder box and see how it works.

I used iframe and embedded the forms, drop down coding there. thats it.

Even I used onchange="this.form.submit()" and page doesnot referesh, actually page refresh .... but not the main page, only the iframe is refreshing which is fine. this is exactly what i wanted.

<div id="gift-finder">
<div class="gift-finder-form">

            <iframe name="inlineframe" src="code.php" frameborder="0" 
                    scrolling="auto" width="200" height="180" 
                    marginwidth="0" marginheight="0" id="gift-iframe">
            </iframe>

</div>

This is my iframe code and see src, i used code.php; so all code is in separate place.

Though I had to modify some css, but anyways this is fine.

Thanks everyone who contributed yesterday.

Zakir Sajib
  • 293
  • 2
  • 7
  • 16