Form does not take in new values

Question

HTML

<form action="./Login.php" method="post" onsubmit="return checkInput();">
<table width="300" border="1">
<tbody>
<tr>
<th> UserName: </th>
<td><input class="box" type="text" value="" name="uname" id="uname"></td>
</tr>
<tr>
<th>Password: </td>
<td><input class="box" type="password" value="" name="pword" id="uname"></td>
</tr>
</tbody>
</table>
<input type="hidden" id="infoDis" value=""/>
<input type="submit" value="Log-in" name="login">
<input type="submit" value="Reset" name="reset">
</form>

JS

function checkInput()
{

    var v1 = document.getElementsByName("uname");
    var v2 = document.getElementsByName("pword");

    var uname = v1[0].getAttribute("value");
    var pword = v2[0].getAttribute("value");

    if (uname == "" || pword == "") 
    {
        if(uname == "" && pword != "")
        {
            alert("Error: Username is Empty. Please Enter Username.");
        }
        else if(pword == "" && uname != "")
        {
            alert("Error: Password is Empty. Please Enter Password");
        }
        else
        {
            alert("Error: Username And Password is Empty. Please Enter Username and Password");
        }

        location.reload();
         return false;
    }

    return true;
}

Hi guys. I am new to html/js. I having a small issue where when i enter new values into the textbox. It does not being captured by the javascript. In turn, after a few debugging i found that the javascript is always taking the value in the html tag. Hence, even if value is entered in the first try or in the retry phase, the javascript takes the value in the html "" tag. Please Help Thx.

Replace `.getAttribute("value")` by `.value`. You should get the data stored in DOM structure, not HTML attribute — Ahs N, Apr 21 '16 at 07:31
I believe ".value" can only be used in "document.getElementByID"?. If i am using ".getElementsByName".. i am not able to use ".value".. So should i change to "getElementbyID" or is there a way if i use "getElementsByName"? Thx for the reply — Nasi, Apr 21 '16 at 07:39

score 3 · Answer 1 · edited May 23 '17 at 12:23

Because you are reading values using getAttribute

"getAttribute() returns the value of a specified attribute on the element"

Use Element.value to read the value property of the InputElement

Whenever value of the Element is changed, property of the Element is being updated not the attribute

function checkInput() {
  var v1 = document.getElementsByName("uname");
  var v2 = document.getElementsByName("pword");
  var uname = v1[0].value;
  var pword = v2[0].value;
  if (uname == "" || pword == "") {
    if (uname == "" && pword != "") {
      alert("Error: Username is Empty. Please Enter Username.");
    } else if (pword == "" && uname != "") {
      alert("Error: Password is Empty. Please Enter Password");
    } else {
      alert("Error: Username And Password is Empty. Please Enter Username and Password");
    }
    location.reload();
    return false;
  }
  return true;
}

<form action="./Login.php" method="post" onsubmit="return checkInput();">
  <table width="300" border="1">
    <tbody>
      <tr>
        <th>UserName:</th>
        <td>
          <input class="box" type="text" value="" name="uname" id="uname">
        </td>
      </tr>
      <tr>
        <th>Password:</th>
        <td>
          <input class="box" type="password" value="" name="pword" id="uname">
        </td>
      </tr>
    </tbody>
  </table>
  <input type="hidden" id="infoDis" value="" />
  <input type="submit" value="Log-in" name="login">
  <input type="submit" value="Reset" name="reset">
</form>

Note: Refer .prop() vs .attr() question to gain more understanding!

score 0 · Answer 2 · answered Apr 21 '16 at 07:32

0

Simply change to this:

var uname = v1[0].value;
var pword = v2[0].value;

.value returns the value of the input element

answered Apr 21 '16 at 07:32

Ayo K

1,719
2
22
34

score 0 · Answer 3 · answered Apr 21 '16 at 07:37

0

You can also get value using jquery very easily:

var uname = $("input[name=uname]").val();
var pword = $("input[name=pword]").val();

answered Apr 21 '16 at 07:37

Dhara Parmar

8,021
1
16
27

Stephen Mayeux · Accepted Answer · 2016-04-21T13:16:05.880

0

jQuery to the resuce!

Some people love it, and others hate it. I wouldn't rely on it as your sole frontend library, but if you need to do simple DOM manipulation/interaction, then jQuery is usually a good solution. Grabbing the data stored from a form element is simple in jQuery.

$(document).ready(function() {
  $('.button').on('click', function() {
    var text = $('#some_element).val();
    $('#another_element').append(text);
  });
});

The API docs have easy examples. http://api.jquery.com/val/

edited Apr 21 '16 at 13:16

answered Apr 21 '16 at 07:39

Stephen Mayeux

76
6

__data stored in an element's value attribute__ ? Totally __Invalid__... It reads the property of the `input` element not the attribute.. refer [this](http://james.padolsey.com/jquery/#v=1.11.2&fn=jQuery.fn.val) – Rayon Apr 21 '16 at 08:18

Form does not take in new values

4 Answers4