CODEWITHSUNDEEP
javascripthtml
harraz syah
harraz syah

Reputation: 45

window.alert() not displaying the input

im still new to html and learning it. right now my problem is that it wont display my input and i believe i done the code quite correctly but i could be wrong. im not sure whats wrong with it. thank you in advance!

<html>
<head>
    <title>OVERSEAS VISITATION</title>
    
     <style>
        
        table, th, td {
           border: 1px solid black;
        }
     </style>
</head>
<body>
<form>
    <table>
        <tr>
            <th colspan="2">
            v. oversea visit
            </th>
        </tr>
        <tr>
            <td>
                <b> Student activities (overseas))</b> Max RM6000 :
            </td>
             <td>
                 <input type="text" name="visit">
             </td>
        </tr>
    </table>
    <br><br>
    <input type="Submit" value="Submit" onsubmit="printOutput()">
</form>
<script> 
        
        function printOutput(){
            var rm = document.getElementByName('visit');
            window.alert("RM :"+visit);
        }
</script>
</body>
</html>

Upvotes: 0

Views: 93

Answers (3)

Mamun
Mamun

Reputation: 68933

There are some issues in you code:

  1. Since the type of the button is submit, the form is submitting and you are losing the current page.
  2. getElementByName is not correct, you are missing s, should be getElementsByName. And it returns collection, you have to use the proper index. Though, I prefer using querySelector(). Also, you have to take the value from the element.
  3. You are not using the value of rm to show in the alert, instead you are using visit that causes an error.

Try the following way:

<html>
  <head>
    <title>OVERSEAS VISITATION</title>    
     <style>        
        table, th, td {
           border: 1px solid black;
        }
     </style>
  </head>
  <body>
  <form>
      <table>
          <tr>
              <th colspan="2">
              v. oversea visit
              </th>
          </tr>
          <tr>
              <td>
                  <b> Student activities (overseas))</b> Max RM6000 :
              </td>
               <td>
                   <input type="text" name="visit">
               </td>
          </tr>
      </table>
      <br><br>
      <input type="button" value="Submit" onclick="printOutput()">
  </form>
  <script>         
    function printOutput(){
      var rm = document.querySelector('[name=visit]').value;
      window.alert("RM :"+rm);
    }
  </script>
  </body>
</html>

Upvotes: 3

M. Rashid
M. Rashid

Reputation: 16

Change input type submit to button and in the javascript use value

Upvotes: 0

SaloniMishra
SaloniMishra

Reputation: 194

Corrected code:

<form onsubmit="printOutput()">
    <table>
        <tr>
            <th colspan="2">
                v. oversea visit
            </th>
        </tr>
        <tr>
            <td>
                <b> Student activities (overseas))</b> Max RM6000 :
            </td>
            <td>
                <input type="text" name="visit">
            </td>
        </tr>
    </table>
    <br><br>
    <input type="Submit" value="Submit">
</form>
<script>

    function printOutput(){
        var rm = document.getElementsByName('visit');
        window.alert("RM :"+ rm[0].value);
    }
</script>

Three things that you had to fix in your code :

  1. onsubmit method is defined on the form, not on the submit input.
  2. getElementByName is not a function, the function is getElementsByName which returns an array of all elements with the searched name property.
  3. You must find the .value of the input to get the value entered in the input.

Upvotes: 1

Related Questions