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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Location
    Ghana
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation HELP ME PLEASE!!! Nothing seems to be working.

    I'm in a beginners' HTML web programming class and we started just a few weeks ago. Anyways we're now on forms and my instructor gave us an assignment where we're supposed to create a form that will post it's results on a table below it. The fields are First name, Last name and a select field where the user can make a choice. It's meant to be some kind of voting page.
    Even though the page and form itself were a piece of cake I don't know anything about javascript and I've tried everything [wasted 5 out of my 7 day period with no improvement]. Please take a look at my code and see if you can help me out with a script.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <style type="text/css">
    body { background-image:url('Ghana black stars.gif'); ; width:750pt; 
    
    margin:0 auto;}
    p {font-size:12pt; font-family:Trebuchet MS;}
    form {font-size:12pt; color:blue; background-color:white}
    table { font-size:13pt; color:green; background-color:white}
      </style>
      <title>World Cup Vote
      </title>
      <script type="javascript">
    
    (function setup() {
      
    </script>
    
    </head>
    <body>
    <p style="background-color: orange;">
    Insert descriptive paragraph here
    </p>
    <div align="center">
    <p></p>
    <form style="width: 300px;" target="_self"
     name="Favorite Player" id="form" border="2"
     method="post" action="#results"><br>
      <label for="select">Select player</label>
      <select id="player">
      <option> </option>
      <option></option>
      <option 1="">p1</option>
      <option 2="">p2</option>
      <option 3="">p3</option>
      </select>
      <br>
      <br>
      <label for="firstname">First name:</label>
      <input id="firstname" type="text"><br>
      <br>
      <label for="lastname">Last name:</label>
      <input id="lastname" type="text"><br>
      <br>
      <input type="button" id="vote" value="Vote">
      <br>
      <br>
    </form>
    <br>
    <br>
    <p>
    <table id="results" align="center" border="2">
      <tbody>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Player</th>
        </tr>
      </tbody>
    </table>
    </p>
    </div>
    </body>
    </html>
    Last edited by VIPStephan; 06-03-2014 at 03:41 PM. Reason: added code BB tags

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    this:
    Code:
    <option 1="">p1</option>
    <option 2="">p2</option>
    <option 3="">p3</option>
    is bogus html, and while it may render, it will certainly not be doing you any favours.

    You should at least post what you have tried, even if it failed as it would show some effort (people here are very reluctant to do entire homework assignments).

    Generally speaking, your "vote" button should fire a function that will take the values input in the respective fields ( document.getElementById("firstname").value would get the first name, for example) and place them in the respective TD's in the table. TD's can have IDs as well, and their innerHTML can be set using document.getElementById("firstname2").innerHTML=somevariable

  • #3
    New to the CF scene
    Join Date
    Jun 2014
    Location
    Ghana
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sorry

    Quote Originally Posted by xelawho View Post
    this:
    Code:
    <option 1="">p1</option>
    <option 2="">p2</option>
    <option 3="">p3</option>
    is bogus html, and while it may render, it will certainly not be doing you any favours.

    You should at least post what you have tried, even if it failed as it would show some effort (people here are very reluctant to do entire homework assignments).

    Generally speaking, your "vote" button should fire a function that will take the values input in the respective fields ( document.getElementById("firstname").value would get the first name, for example) and place them in the respective TD's in the table. TD's can have IDs as well, and their innerHTML can be set using document.getElementById("firstname2").innerHTML=somevariable
    Sorry I think that part of the code was a mistake and if you think it'll help if I post the entire code the I'll do. I really am trying my best to figure this out. I'm a complete novice with javascript and right now I'm desperate for any help I can get.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <style type="text/css">
    body { background-image:url('Ghana black stars.gif'); ; width:750pt; margin:0 auto;}
    p {font-size:12pt; font-family:Trebuchet MS;}
    form {font-size:12pt; color:blue; background-color:white}
    table { font-size:13pt; color:green; background-color:white}
      </style>
      <title>World Cup Vote
      </title>
      <script type="JAVASCRIPT">
    (function setup() {
    "use strict";
    var fNameElem = document.getElementById("firstname");
    var lNameElem = document.getElementById("lastname");
    var playElem = document.getElementById("player");
    var tableElem = document.getElementById("results");
    document.getElementById("vote").addEventListener("click", function () {
    var newRow = tableElem.insertRow(-1);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode(lNameElem.value + ", " + fNameElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(1);
    newText = document.createTextNode(playElem.value);
    newCell.appendChild(newText);
    fNameElem.value = "";
    lNameElem.value = "";
    playElem.value = "";
    tableElem.value = "";
    });
    })();​
      </script>
    </head>
    <body>
    <p style="background-color: orange;">
    Insert descriptive paragraph here
    </p>
    <div align="center">
    <p></p>
    <form style="width: 300px;" target="_self"
     name="Favorite Player" id="form" border="2"
     method="post" action="#results"><br>
      <label for="select">Select player</label>
      <select id="player">
     <option></option>
    <option 1>Adam Kwarasey</option>
    <option 2>Robert Dabuo</option>
    <option 3>Daniel Adjei</option>
    <option 4>Ernest Sowah</option>
    <option 5>Samuel Inkoom</option>
    <option 6>Daniel Opare</option>
    <option 7>Harrison Afful</option>
    <option 8>Richard Kissi Boateng</option>
    <option 9>Masawudu Alhassan</option>
    <option 10>John Boye</option>
    <option 11>Lee Addy </option>
    <option 12>Daniel Addo</option>
    <option 13>Rashid Sumaila</option>
    <option 14>Jerry Akaminko</option>
    <option 15>Isaac Vorsah</option>
    <option 16>Anthony Annan</option>
    <option 17>Derek Boateng</option>
    <option 18>Emmanuel Agyemang Badu</option>
    <option 19>Rabiu Mohammed</option>
    <option 20>Richard Mpong</option>
    <option 21>Albert Adomah</option>
    <option 22>Christian Atsu</option>
    <option 23>Ishamel Yartey</option>
    <option 24>Sulley Muntari</option>
    <option 25>Kwadwo Asamoah</option>
    <option 26>Jordan Ayew</option>
    <option 27>Dominic Adiyiah</option>
    <option 28>Ben Acheampong</option>
    <option 29>Emmanuel Baffour</option>
    <option 30>Emmanuel Clottey </option>
      </select>
      <br>
      <br>
      <label for="firstname">First name:</label>
      <input id="firstname" type="text"><br>
      <br>
      <label for="lastname">Last name:</label>
      <input id="lastname" type="text"><br>
      <br>
      <input type="button" id="vote" value="Vote">
      <br>
      <br>
    </form>
    <br>
    <br>
    <p></p>
    <table id="results" align="center" border="2">
      <tbody>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Favorite Player</th>
        </tr>
      </tbody>
    </table>
    </div>
    </body>
    </html>
    I found the script for another form that's supposed to perform a similar function and I came up with this after making changes to it to work on my form instead unfortunately all it does is reset the fields.


  •  

    Tags for this Thread

    Posting Permissions

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