Passing a value to PHP

JavaScript
1

I am working on a dropdown list of countries and I have two questions about the code below:

  1. How do I pass the value of the getSelectedValue() function into a hidden html field, so that I can post it to PHP’s $_POST array?

  2. When I create two or more instances of the dropdown list (shipping and billing addresses) the value of one changes both values, when I echo out <span id=“country”>. What do I need to do to separate them, so that each getSelectedValue() is separate? I know I can only have one id=country per page, so how do I have multiple values that remain separate?


$(".dropdown dd ul a").click(function() {
    var dl = $(this).closest("dl");
    var dropID = dl.attr("id");
    var text = $(this).html();
    var source = dl.prev();
    $("#" + dropID + " dt a").html(text);
    $("#" + dropID + " dd ul").hide();
    $("#country").html(getSelectedValue(dropID));
  });

  function getSelectedValue(dropID) {
    return $("#" + dropID).find("dt a span.value").html();
  }

Here’s the full script example I am using:


$(document).ready(function() {
  createDropDown();

  $(".dropdown dt a").click(function(event) {
    event.preventDefault();
    var dropID = $(this).closest("dl").attr("id");
    $("#" + dropID).find("ul").toggle();
  });

  $(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (! $clicked.parents().hasClass("dropdown"))
      $(".dropdown dd ul").hide();
  });


  $(".dropdown dd ul a").click(function() {
    var dl = $(this).closest("dl");
    var dropID = dl.attr("id");
    var text = $(this).html();
    var source = dl.prev();
    $("#" + dropID + " dt a").html(text);
    $("#" + dropID + " dd ul").hide();
    $("#country").html(getSelectedValue(dropID));
  });

  function getSelectedValue(dropID) {
    return $("#" + dropID).find("dt a span.value").html();
  }

});

function createDropDown() {
  var selects = $("select.dropdown_value");
  var idCounter = 1;
  selects.each(function() {
    var dropID = "dropdown_" + idCounter;
    var source = $(this);
    var selected = source.find("option[selected]");
    var options = $("option", source);
    source.after('<dl id="' + dropID + '" class="dropdown"></dl>');
    $("#" + dropID).append('<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>');
    $("#" + dropID).append('<dd><ul></ul></dd>');
    options.each(function() {
      $("#" + dropID + " dd ul").append('<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>');
    });
    idCounter++;
  });
}
2

You could create a hidden field and update its value which will then be received by php when the form is submitted. As far as country is concerned you could always use billing_country and shipping_country instead of just country.

3

I know, that’s the idea but what is the syntax / method for that, I am a PHP guy not jQuery LOL… what do I need to do to the javascript so it will create two different country values (sh_county and b_country) and then how exactly do i print those to the form fields?

4

Anyone?

I have the code working so that it displays the “value” of the coutry you selected in the span, but how do I read that into javascript?

And when I click the second box, for state or whatever, changes the country value, how do i seperate them, totally different functions for each droplist?

5
  1. Add a hidden field to your existing form and make sure it has a name as below:

<form name=“countryform” blah blah as you have it at the moment>

<input type=hidden name=“countrysel” value=“None”>

</form>

  1. In javascript when you have the country value

document.countryform.countrysel.value=getselected blah blah

As for seperating the forms the elements will all have to have different id’s
ie countrysel1 countrysel2 otherwise they are the same thing.

6

Do I make a new function?

function getCountry() {
document.regform.country.value=getSelectedValue();
}

and do I need to add something like onSubmit to the form?

7

Depends - if you want the user to click a submit button then no - just use a standard submit button or image. If you want the form to autosubmit when the value above is filled in then just add
document.regform.submit();
to the function.

8

Okay I got the multiple instances to work, now how do I get the values into the hidden form field? jQuery uses .html() instead of innerHTML right? What does the syntax look like to set the new value for the hidden field value=“”?

This function returns the value, how do i stuff it into the form now?

function getSelectedValue(id) {
return $(“#” + id).find(“dt a span.value”).html();
}