CODEWITHSUNDEEP
htmlbuttontextfield
darkchampionz
darkchampionz

Reputation: 1234

HTML - Button on click display value of textfield

I use a textfield with code:

<input type = "text" size = "2" maxlength = "2" name = "myname">

and a button with:

<button type = "button" onclick = "alert('Clicked!')">Print</button>

Now, as I click on it, a message/alert pops saying Clicked!. How can I make it just display whatever value was on the textfield instead? Ty

Upvotes: 1

Views: 6659

Answers (2)

Rushi Ayyappa
Rushi Ayyappa

Reputation: 2848

if you are doing this to print a person's name or something using PHP then it should be like this: add this in your body of html: 

<form name="form1" action="registration.php" method="POST"   onsubmit="myFunction()" >
 <input type="text" name="name" id="name">
 <input type="submit" value="submit">
</form>

you can validate this field using javascript on submit as:(write this in head tag of html)

 <script>
  var name=document.getElementById("name").value;
  myFunction()
    {
     if(name!="")
      {
     return true;
       }
        else
         {
   //show alert.
     return false;
        }
        }
          </script>

In PHP you can print the name user entered in the text by(reg.php):

<?php
   $name=$_POST['name'];//it is the name of the control field
   echo $name;
 ?>

Upvotes: 1

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

Try this solution:

<input type="text" id="test" size="2" maxlength="2" name="myname">
<button type="button" onclick="alert(document.getElementById('test').value);">Print</button>

A working example you can find here: http://jsfiddle.net/sebastianbrosch/x8zzvd5s/

Explanation
You have to add a id to your textfield (here test). On the alert() you can get the value of the textfield with document.getElementById('test').value.

Upvotes: 2

Related Questions