CODEWITHSUNDEEP
javascripthtmlforms
Boris D
Boris D

Reputation: 1

Showing information in text fields with JavaScript

I have two text fields in a form and a submit button. When the user clicks on in it must show a box message, containing the information user has provided and the current time.

How can I do this? Keep in mind that I'm a beginner with JavaScript.

Upvotes: 0

Views: 107

Answers (3)

CSharpened
CSharpened

Reputation: 12574

You can include a javascript file in your solution/html file and add a function that employs document.getElementById('nameofyourtextbox').value to retrieve the value and then use an alert box to display the values provided and then add the date in.

This function can then be called on the onclick event of your button.

example:

function buttonClicked()
{
 var d = new Date();
 var date = d.getDate();
 var month = d.getMonth();
 var year = d.getFullYear();

 alert(document.getElementById('nameofyourtextbox') +", "+ document.getElementById   ('nameofyour2ndtextbox') + ", "+ date +"/"+ month +"/"+ year);
 }

Add the function to the onclick event of your button:

<......     onclick="buttonClicked();">

To add the .js file to your page:

<script type="text/javascript" src="nameofyourjsfile.js"></script>

The src attribute must be the path to where your .js file is stored.

Upvotes: 0

dseif
dseif

Reputation: 109

You could do something like the following ( if your elements have id's on them ):

document.getElementById( "buttonId" ).addEventListener( "click", function() {

  alert( document.getElementById( "formId" ).value + " " + new Date() );
}, false );

Upvotes: 1

mellamokb
mellamokb

Reputation: 56769

You mean something like this?

<form onsubmit="formMessage(this);">
    <p>First Name: <input name="firstname" id="firstname" /></p>
    <p>Last Name: <input name="lastname" id="lastname" /></p>
    <p><input type="submit" name="submit" value="Submit!" /></p>
</form>

function formMessage(frm)
{
    var fn = frm.firstname.value;
    var ln = frm.lastname.value;
    var dt = new Date();
    alert("You entered " + fn + " " + ln + " at " + dt + "!");
}

Demo: http://jsfiddle.net/EBKJ5/

Upvotes: 4

Related Questions