Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    JAVASCRIPT HELP NEEDED Info from a FORM TO a TABLE

    I am a newbe to web delevlopment.
    I have the following form:
    <form name="quantityconnect" method="get" action="http://www.doc.ic.ac.uk/~gu1/cgi-bin/formnew1.cgi ">

    Quantity:
    <select name="Quantity" size="1">
    <option value="1">...1...</option>
    <option value="2">...2...</option>
    <option value="3">...3...</option>
    <option value="4">...4...</option>
    <option value="5">...5...</option>
    <option value="6">...6...</option>
    </select>

    <input type="submit" value="Add to my basket">

    </form>

    What I want is for when the "Add to my basket" button is clicked, is for the value selected from the drop down box to be inputted into this table:

    <table id="shoppingcart border="1">
    <tr bgcolor="#ff0000">
    <th align="center"><b>Item</b></th>
    <th align="center"><b>Quantity</b></th>
    <th align="center"><b>Price</b></th>
    <th align="center"><b>Sum</b></th>
    </tr>
    <tr cellpadding="5">
    <td><p><img src="20questionsbasket.jpg" alt="20questions" title="20 Questions">20 Questions Electronic Mind Reader</p></td>
    <td>QUANTITY INSERTED HERE</td>
    <td>9.77</td>
    <td></td>
    </tr>
    <tr>
    </table>

    I have experimented many different ways unsuccessfully, and am now assuming i need to use some sort of javascript... Any1 have any code to help?

    Thanks
    Mike

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Try this (additional code in blue):-

    Code:
    <form name="quantityconnect" method="get" action="http://www.doc.ic.ac.uk/~gu1/cgi-bin/formnew1.cgi ">
    
    <script type = "text/javascript">
    function insertQty () {
    document.getElementById("q").innerHTML = document.quantityconnect.Quantity.value
    }
    </script>
    
    <select name="Quantity" size="1" onchange = "insertQty()">
    <option value = "None">Select</option>
    <option value="1">...1...</option>
    <option value="2">...2...</option>
    <option value="3">...3...</option>
    <option value="4">...4...</option>
    <option value="5">...5...</option>
    <option value="6">...6...</option>
    </select>
    
    <input type="submit" value="Add to my basket">
    
    </form>
    
    <table id="shoppingcart border="1">
    <tr bgcolor="#ff0000">
    <th align="center"><b>Item</b></th>
    <th align="center"><b>Quantity</b></th>
    <th align="center"><b>Price</b></th>
    <th align="center"><b>Sum</b></th>
    </tr>
    <tr cellpadding="5">
    <td><p><img src="20questionsbasket.jpg" alt="20questions" title="20 Questions">20 Questions Electronic Mind Reader</p></td>
    <td id = "q">QUANTITY INSERTED HERE</td>
    <td>9.77</td>
    <td></td>
    </tr>
    <tr>
    </table>

    He thought he saw a Rattlesnake
    That questioned him in Greek:
    He looked again, and found it was
    The Middle of Next Week.
    "The one thing I regret," he said,
    "Is that it cannot speak!"
    - Lewis Carroll

  • #3
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    So, is the form supposed to be submitting data to the table, or to the script referenced by 'http://www.doc.ic.ac.uk/~gu1/cgi-bin/formnew1.cgi'? Something's missing here. Please be more specific.

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bdl View Post
    So, is the form supposed to be submitting data to the table, or to the script referenced by 'http://www.doc.ic.ac.uk/~gu1/cgi-bin/formnew1.cgi'? Something's missing here. Please be more specific.
    Its meant to submit to the table. The address was there as an example from when i was trying things myself. Sorry.

    Philip, thankyou for the code, unfortionatly it doesnt seem to have worked. Any other ideas?

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by brodjah View Post
    Philip, thankyou for the code, unfortionatly it doesnt seem to have worked. Any other ideas?
    It works for me.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Why the submit button, if you're not uploading? Confusing.

    Code:
    function setQuantity(f)
    {
       var v, sel = f.elements.Quantity;
       var showEl = document.getElementById('showEl');
       if (v = sel.value)
          showEl.replaceChild(document.createTextNode(v), showEl.firstChild);
       else showEl.replaceChild(document.createTextNode('QUANTITY INSERTED HERE'), showEl.firstChild);
    }
    Code:
    Quantity:
    <select name="Quantity" size="1">
    <option value="">select quantity</option>
    <option value="1">...1...</option>
    <option value="2">...2...</option>
    <option value="3">...3...</option>
    <option value="4">...4...</option>
    <option value="5">...5...</option>
    <option value="6">...6...</option>
    </select>
    
    <input type="button" value="Add to my basket" onclick="setQuantity(this.form)">
    Code:
    <td id="showEl" width="220">QUANTITY INSERTED HERE</td>

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    I would have thought that sensibly the selected quantity should appear in the <td> as soon as the selection is made, and not onsubmit or when a button is clicked.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Good point.

    Code:
    <select name="Quantity" size="1" onchange="setQuantity(this.value)">
    Code:
    function setQuantity(val)
    {
       var showEl = document.getElementById('showEl');
       if (val)
          showEl.replaceChild(document.createTextNode(val), showEl.firstChild);
       else showEl.replaceChild(document.createTextNode('QUANTITY INSERTED HERE'), showEl.firstChild);
    }


  •  

    Posting Permissions

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