CODEWITHSUNDEEP
javascripthtmltextboxuser-input
Lee Jones
Lee Jones

Reputation: 1

Getting .value from textboxes

I'm trying to make a javascript collect data from user input, specifically textboxes and dropdown options, and produce user output. Any help would be greatly appreciated.

The javascript is supposed to collect the values in the first textbox, convert it to lowercase, and then see if it is a correct answer. If it is, it should then check if the user wants additional information on the movies they have acted in ("Yes"), or not ("No"). The actor's code in the database is meant to be displayed in the first paragraph, whilst the list of movies the actor has been in should be displayed in the second paragraph. With each movie being displayed on a separate line.

function gather()
{
  var name = document.getElementById("name").value;
  return name.toLowerCase();
  var info = document.getElementById("info").value;
  return info.toLowerCase();
  var code = document.getElementById("code").value;
  var titles = document.getElementById("titles").value;
  if (name = "patrick swayzee")
  {
    code = "Patrick Swayzee's code is ps01";
    if (info = "yes")
    {
      titles = "Film 1" + \n + "Film 2";
    }
    else
    {
      titles = "";
    }
  }
  else
  {
    code = "Request does not exist. Please enter another actor/actress's name."
  }
}
<html>

  <head>

    <title>Actor/Actress Database</title>
    <script src="act_req.js" type="text/javascript">
    </script>

  </head>

  <body>

    <table>
      <tr>
        <td><b>Name:</b></td>
        <td><b>Info:</b></td>
        <td></td>
      </tr><tr>
      <td><input type="text" id="name="></input></td>
    <td>
      <select id="info">
        <option value="No">No</option>
        <option value="Yes">Yes</option>
      </select>
    </td>
    <td><button onclick="gather()">Search</button></td>
    </tr>
  </table>
<p id="code"></p>
<p id="titles"></p>

</body>

</html>

Upvotes: 0

Views: 48

Answers (3)

mplungjan
mplungjan

Reputation: 177975

  1. give button a type or it will submit in some browsers <button type="button"
  2. no more code will be executed after a return
  3. You had a trailing = in the id="name="
  4. You assigned (=) instead of testing equality (== or ===)
  5. code and titles are tags, not fields. Tags do not have value

You may mean

window.onload=function() {
  document.getElementById("gather").onclick=function() {
    var name = document.getElementById("name").value.toLowerCase();
    var info = document.getElementById("info").value.toLowerCase();
    var code = document.getElementById("code");
    var titles = document.getElementById("titles");
    var codeString = "", titleString="";
    if (name == "patrick swayzee") {
      codeString = "Patrick Swayzee's code is ps01";
      titleString = (info == "yes")?"Film 1\nFilm 2":"";
    } else {
      codeString = "Request does not exist. Please enter another actor/actress's name."
    }
    code.innerHTML=codeString;
    titles.innerHTML=titleString;
  }
}
<table>
  <tr>
    <td><b>Name:</b></td>
    <td><b>Info:</b></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input type="text" id="name" value=""/></td>
    <td>
      <select id="info">
        <option value="No">No</option>
        <option value="Yes">Yes</option>
      </select>
    </td>
    <td>
      <button type="button" id="gather" >Search</button>
    </td>
  </tr>
</table>
<p id="code"></p>
<p id="titles"></p>

Upvotes: 0

Andy
Andy

Reputation: 63524

Right here's a full run down of all the things I found in your code that would stop it working (because I'm a little bored):

1)

return name.toLowerCase();
return info.toLowerCase();

This is not how return works. If you want to put the values into lowercase you can do:

var name = document.getElementById("name").value.toLowerCase();

2)

var code = document.getElementById("code").value;

Here you're trying to assign the the value of "code" to a variable. The problem with this is that you try to set the value of that variable later on in the code. What you meant to do was just capture the element itself in that variable:

var code = document.getElementById("code");

That's the same for the var titles line btw.

3) 

if (name = "patrick swayzee")

Here you're assigning name a value. You want to use === (strict equality is best).

Same for the if (info line too

4)

code = "Patrick Swayzee's code is ps01";

Where you are trying to assign something to our elements (see 2), you should now assign it to a property of that element. IE9+ and recent browsers use textContent, so this line should read:

code.textContent = "Patrick Swayzee's code is ps01";

Same in all the other places that's occurring.

5)

<td><input type="text" id="name=">

should be

<td><input type="text" id="name">

Notice the difference? One typo can break your code.

There's probably one or two things I've missed, but here's some working code - look it over. The other answerers will probably have caught the rest. Best of luck with your programming.

Upvotes: 1

mr_sudaca
mr_sudaca

Reputation: 1176

you're missing an extra = in the conditional:

if (info == "yes")

in fact, you should use === so jshint won't complain about it.

Upvotes: 1

Related Questions