SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Send data from a <select> form to a fetched file.

    Hi master!, here my question.

    Hi have a menu (<select>) in a form, ok, everytime when the visitor select a menu optinon:

    1.- A onChange event call to JavaScript function (getData -, you can see the code of these function at the bottom of this post-)

    2.- The function fetch a php file (show_option_value.php) in my server and show the result of that file in the page without refresh.

    THE PROBLEM

    I need send the value of the <option> selected, but I don't know how can I send that value because when i sepecify the file to fetch, I don't know yet the option than the user will select.


    Next the codes:

    Menu:

    <select name="element" id="element" onChange="getData('show_option_value.php', 'targetDiv')">
    <option value="1">Element 1</option>
    <option value="2">Element 2</option>
    <option value="3">Element 3</option>
    <option value="4">Element 4</option>
    </select>
    File fetched code (show_option_value.php)
    <?
    echo "Value received: ".$_GET['element'];
    ?>
    Where I want show the result I put:
    <div id="targetDiv">
    The fetched data will go here.
    </div>
    As you can see, I don't have troubles to process the fetched file and show the results without refresh, my trouble is, I don't know how I send the value of the <option> selected.

    From now, Thanks for any help.

    JavaScript code to fetch the php file from the server.

    <script language = "javascript">
    var XMLHttpRequestObject = false;

    if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }

    function getData(dataSource, divID)
    {
    if(XMLHttpRequestObject) {
    var obj = document.getElementById(divID);
    XMLHttpRequestObject.open("GET", dataSource);

    XMLHttpRequestObject.onreadystatechange = function()
    {
    if (XMLHttpRequestObject.readyState == 4 &&
    XMLHttpRequestObject.status == 200) {
    obj.innerHTML = XMLHttpRequestObject.responseText;
    }
    }

    XMLHttpRequestObject.send(null);
    }
    }
    </script>

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SOLVED!!!

    Simply instead to call to a function using a onChange event I use a trougha onClick events on each <option> of the menu.


    <select name="element" id="element">
    <option value="1" onClick="getData('show_option_value.php?element=1', 'targetDiv')">Element 1</option>
    <option value="2" onClick="getData('show_option_value.php?element=2', 'targetDiv')">Element 2</option>
    <option value="3" onClick="getData('show_option_value.php?element=3', 'targetDiv')">Element 3</option>
    <option value="4" onClick="getData('show_option_value.php?element=4', 'targetDiv')">Element 4</option>
    </select>
    Sincerely.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It's a bad idea to pass variables from within the HTML itself. Instead, have the function itself get the information it needs.

    Code Javascript:
    function getData() {
    var dataSource = 'show_option_value.php?element=' + this.value;
    var divID = 'targetDiv';
    if(XMLHttpRequestObject) {
    // ...

    Now the HTML code can be simplified to the following

    Code HTML4Strict:
    <select name="element" id="element">
    <option value="1" onClick="getData()">Element 1</option>
    <option value="2" onClick="getData()">Element 2</option>
    <option value="3" onClick="getData()">Element 3</option>
    <option value="4" onClick="getData()">Element 4</option>
    </select>

    You can simplify it even further too, so there is no onclick attribute at all.

    Code HTML4Strict:
    <select name="element" id="element">
    <option value="1">Element 1</option>
    <option value="2">Element 2</option>
    <option value="3">Element 3</option>
    <option value="4">Element 4</option>
    </select>

    This is the better way to do it because it separates the content from the behaviour. At the end of the document you can then assign the getData() function to the option elements

    Code Javascript:
    // Get the element called 'element'
    var elementId = document.getElementById('element');
    var el;
    // Loop through each child
    for (var i = 0; i < elementId.childNodes.length; i++) {
        el = elementId.childNodes[i];
        if (el.nodeType === 1) {
            // If it's an element, and called 'option'
            if (el.nodeName.toLowerCase() === 'option') {
                // Attach the onclick event
                el.onclick = getData;
            }
        }
    }
    Last edited by paul_wilkins; Feb 9, 2008 at 22:16.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot pmw57, it works.

  5. #5
    SitePoint Wizard Hammer65's Avatar
    Join Date
    Nov 2004
    Location
    Lincoln Nebraska
    Posts
    1,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using an onclick handler for each option seems overly verbose. In fact the onclick would allow a user to initiate the script by clicking on the currently selected option, which would be pointless. An onchange handler is a much better solution. It's a simple matter to get the currently selected value, that occupies much fewer lines than writing an on click handler for each option, or looping through all options to attach handlers.
    Visit my blog
    PHP && Life
    for technology articles and musings.


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
  •