CODEWITHSUNDEEP
javascriptjqueryhtml
Nasi
Nasi

Reputation: 3

Form does not take in new values

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.

Upvotes: 0

Views: 55

Answers (4)

Stephen Mayeux
Stephen Mayeux

Reputation: 76

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/

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 8101

You can also get value using jquery very easily:

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

Upvotes: 0

Rayon
Rayon

Reputation: 36599

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!

Upvotes: 3

Ayo K
Ayo K

Reputation: 1774

Simply change to this:

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

.value returns the value of the input element

Upvotes: 0

Related Questions