SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    zipcode script issue

    var state = getState(txtZip.value)
    for(var i = 0; i < optionBox.options.length; i++)
    if(optionBox.options[i].value == state)
    return optionBox.options[i].selected = true;
    for(var i = 0; i < optionBox.options.length; i++)
    if(optionBox.options[i].value == "XX")
    return optionBox.options[i].selected = true;


    I am looking into using this very cool script, but I have 1 small issue... I need to use any other tag other than the value. I am using the value for PHP and need to have a 2 char value here... but I have a full value going to PHP. Would it be possible for me to have the script read the id ?

    If you have any suggestions on how I can make this work, that would be fantastic!

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going to ask the obvious question here - sorry -

    At what point does PHP come into play in the script? I see some javascript code that sets a select list's option based on a getState function.

    Can you give some more detail?

    It's also helpful to wrap your code in either html or code BB tags - it preserves formatting and helps for copy/paste.
    var me = null;

  3. #3
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am submitting the value to a php mail script. The mail script takes the value and sends it to me. Thats why I want to keep the full value.

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. I'm not 100% clear what you're trying to do - or what the script is trying to do -- but I'll do my best:

    Let's say you have this:
    HTML Code:
    <select id="states" name="states">
      <option value="MI">Michigan</option>
      <option value="CA">California</option>
    </select>
    In the current state, the PHP processing script receives "MI" or "CA" depending on what the user chooses.

    What you need is another part of that selected item to *also* be posted to the PHP script for some other nefarious purpose, right?

    So, using the same example, you could modify your form to something like this:
    HTML Code:
    <select id="states" name="states">
      <option value="MI">Michigan</option>
      <option value="CA">California</option>
    </select>
    <input type="hidden" id="full_state" name="full_state" value="" />
    In javascript, you could do something like this::
    Code:
    function setStateValue(elem) {
      document.getElementById("full_state").value = elem[elem.selectedIndex].text;
    }
    window.onload = function() {
      document.getElementById("states").onchange = function() {
        setStateValue(this);
      };
    };
    Then whenever the user selects a state, the 2-digit code is passed to PHP from the <select> element, and the full_state name is passed to PHP from the hidden form field.

    This is just an idea - based on what you've posted. Hope it helps.
    var me = null;

  5. #5
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK that sounds interesting. What I have now is..

    <select id="states" name="states">
    <option value="Michigan">Michigan</option>
    <option value="California">California</option>
    </select>

    if michigan is selected, the value Michigan is sent to PHP, turned into a var and then sent in my e-mail from PHP.

    The Java script code was written to use a 2 digit state value..like this.

    <select id="states" name="states">
    <option value="MI">Michigan</option>
    <option value="CA">California</option>
    </select>

    I want to modify the javascript so that I can keep my full name values but still let the script work as intended. That is why I was thinking may I could have javascript pull from the id tag(or name or anything else) like this, instead of the value tag.

    <select id="states" name="states">
    <option id="MI" value="Michigan">Michigan</option>
    <option id="CA" value="California">California</option>
    </select>

  6. #6
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can access the id property of the option using .id:
    Code:
    alert(document.getElementById("states").options[0].id); //'MI'
    var me = null;

  7. #7
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK here is what i've got...

    function setState(txtZip, optionBox) {
    if(txtZip.value.length != 5 || isNaN(txtZip.value / 4)) {
    optionBox.options[0].selected = true;
    alert("Please enter a 5 digit, numeric value");
    return;
    }
    var state = getState(txtZip.value);
    for(var i = 0; i < optionBox.options.length; i++)
    if(optionBox.options[i].value == state)
    return optionBox.options[i].selected = true;
    for(var i = 0; i < optionBox.options.length; i++)
    if(optionBox.options[i].value == "XX")
    return optionBox.options[i].selected = true;
    }

    zip<input type="text" name="zip" size=5 maxlength=5 onChange="setState(this, state)">
    State<select tabindex="3" name="state" size="1" id="state" onChange="zip.select(); zip.focus();" >
    <option selected="selected" value="5">Select State</option>
    <option value="Alabama">Alabama</option>

    This works great when I am only using the 2 digit abbreviation. I just want to be able to call that 2 digit abbreviation from a different tag then the value. If I can change the javascript to look on another tag.. it would be perfect..

  8. #8
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by justuspost View Post
    If I can change the javascript to look on another tag.. it would be perfect..
    What's stopping you? do you need to know specific syntax for how to access the form elements or are you looking for suggestions on where to store the values?

    Also, please try wrapping your code snippets with '['code']' '['/code']' tags (with square brackets) so they get formatted for easier viewing.
    var me = null;

  9. #9
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry about that...

    Yea so I do need to know how to change it from looking for the name to looking for the ID. I am not sure how to work that into this code.

  10. #10
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please post a working url so I can see the whole example in action - then I can probably help further.
    var me = null;

  11. #11
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  12. #12
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I see what you're trying to do. It appears as if you have a hard-coded string that you're parsing through to determine the 2-digit state code for a given zip code. From there, the script 'selects' the correct state from the select box.

    At the same time, you're trying to get the full state name into your PHP script - but you want to use javascript to accomplish it.

    I would argue that you should use a server-side script - but I digress. One way to achieve your goal is to have a 'state' javascript object, which you could then use to populate a hidden form field:
    Code:
    var states = {
      'MI':'Michigan',
      'CA':'California',
      'TX':'Texas'
    };
    In the 'setState' function you're currently using to set the select box to the proper option, you can use the states object to fill in the hidden field:
    Code:
    function setState(txtZip, optionBox) {
        if(txtZip.value.length != 5 || isNaN(txtZip.value / 4)) {
            optionBox.options[0].selected = true;
            alert("Please enter a 5 digit, numeric value");
            return;
        }
    	var state = getState(txtZip.value);
        for(var i = 0; i < optionBox.options.length; i++)
            if(optionBox.options[i].value == state) {
                //HERE'S THE ADDITION
                document.getElementById('hiddenField').value = states[state];
                return optionBox.options[i].selected = true;
            }
        for(var i = 0; i < optionBox.options.length; i++)
            if(optionBox.options[i].value == "XX")
                return optionBox.options[i].selected = true;
    }
    Then you just have to make sure you have the hidden form field somewhere between your opening and closing form tags to ensure PHP receives the value.

    HTH
    var me = null;

  13. #13
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK well I put the code together and the rest of the code seems allergic to it... If I have the var list or the code you added in the existing code.. it doesn't work. I want the full name to go to PHP, but the 2 digit name= is what javascript is using to assign the value. Should the js object/var list be in the other script in a particular order? Maybe I'm just not putting it together correctly.


    Code:
     
    var state = getState(txtZip.value);
        for(var i = 0; i < optionBox.options.length; i++)
            if(optionBox.options[i].value == state){
                document.getElementById('hiddenField').value = states[state];
                return optionBox.options[i].selected = true;
    		}
    with the list like this:
    [code]
    var states = {
    'AK':'Alaska',
    'AL':'Alabama',
    'AR':'Arkansas',
    'AS':'American Samoa',
    'AZ':'Arizona',
    'CA':'California',
    'CO':'Colorada',
    'CT':'Conneticut',
    'DC':'District of Colombia',
    'DE':'Delaware',
    'FL':'Florida',
    'FM':'Federated States',
    'GA':'Georgia',
    'GU':'Guam',
    'HI':'Hawaii',
    'IA':'Iowa',
    'ID':'Idaho',
    'IL':'Illinois',
    'IN':'Indiana',
    'KS':'Kansas',
    'KY':'Kentucky',
    'LA':'Louisiana',
    'MA':'Massachusetts',
    'MD':'Maryland',
    'ME':'Maine',
    'MI':'Michigan',
    'MN':'Minnesota',
    'MO':'Missouri',
    'MS':'Mississippi',
    'MT':'Montana',
    'NC':'North Carolina',
    'ND':'North Dakota',
    'NE':'Nebraska',
    'NH':'New Hampshire',
    'NJ':'New Jersey',
    'NM':'New Mexico',
    'NV':'Nevada',
    'NY':'New York',
    'OH':'Ohio',
    'OK':'Oklahoma',
    'OR':'Oregon',
    'PA':'Pennsylvania',
    'PR':'Puerto Rico',
    'RI':'Rhode Island',
    'SC':'South Carolina',
    'SD':'South Dakota',
    'TN':'Tennessee',
    'TX':'Texas',
    'UT':'Utah',
    'VI':'Virgin Islands',
    'VT':'Vermont',
    'VA':'Virginia',
    'WA':'Washington',
    'WI':'Wisconsin',
    'WV':'West Virginia',
    'WY':'Wyoming',
    'XX':'Other...',
    };
    [/code

  14. #14
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is happening when the code runs? I didn't see this in the URL you provided earlier to help you troubleshoot.
    var me = null;

  15. #15
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    basically nothing happens. The zip no longer sets the value of the dropdown to the state.

    Justus

  16. #16
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alrighty - this is getting difficult to help with. Have you heard of firebug? It's a super-amazing plugin for firefox that will do wonders to help with javascript development.

    I recommend you load up firebug and run your code to see what kind of error messages you get - that should help. Keep posting your findings and I'll keep helping the best I can.
    var me = null;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •