JavaScript Function That Accepts External HTML Form Date.

Question

4.00/5 (1 vote)

See more:

I have a JavaScript file and a HTML file. This html file contains a form. What I want is to create a JavaScript function that accepts the data from the HTML pages' textboxes and assign those to the JS function(). Remember that this JS function is in a different JS file. So how can I do that. I already used JavaScript global variables. So can someone help meto solve this matter?

Thanks & regards,
Chiranthaka

Posted 17-Jul-14 1:23am

Chiranthaka Sampath

Add a Solution

Comments

AnvilRanger 17-Jul-14 8:25am

What exactly are you trying to accomplish? Just at the reference to your js in the html document and then bind your function to some event. You can then pass any data you need to as parameters to the function.

Chiranthaka Sampath 17-Jul-14 11:54am

By referencing the JS file in the HTML file does it acts by directionally?

AnvilRanger 17-Jul-14 13:06pm

What do you mean "by directionally"? When you add the js reference to the HTML document that is the link. You are able to call the js functions from the elements in the HTML document and you have access to the HTML elements in js.

Chiranthaka Sampath 17-Jul-14 13:18pm

If I enter the data to the form then show be how to pass them to the external JS files' variables.

Chiranthaka Sampath 17-Jul-14 13:53pm

This is my HTML Page with the form.

FirstPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="ExternalJS.js"></script>
<title>First Page</title>
</head>
<body>

<form name="textform" action="" method="get">

Text One: <input type="text" id="textone" name="textone" />
<input type="submit" value="Submit" önClick=getVar();false />

</form>

</body>
</html>

This is the external JavaScript File.

//var strTextOne = document.getElementById("textone").value;
var strTextOne = document.textform.textone.value;

function getVar(){

alert(strTextOne);

}

I want to pass the data entered to the HTML textbox to the JavaScript Function() in the external JavaScript File. Now I think you can understand what you need.

AnvilRanger 17-Jul-14 14:25pm

Look at this link. I cleaned up your code.

http://jsfiddle.net/JZ8xk/

Chiranthaka Sampath 17-Jul-14 22:33pm

The only problem I was facing the values from the form to the JS file is not passing. Now however your code is working at the 'Fiddle' but not in the real scenario. How it can be?

Chiranthaka Sampath 18-Jul-14 0:45am

Ok I found the solution & it's below.

The HTML Page With The Form
<pre lang="HTML">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>First Page</title>
<script type="text/javascript" src="Externaljs.js"></script>
<body>

<form method="post" action="">
Text One: <input type="text" id="textone" />
<input type="submit" value="Submit" önclick="getVar();return false" />
</form>
</body>
</html>

</pre>

The External JavaScript File

<pre lang="Javascript">

function getVar(){
var strTextOne = document.getElementById("textone").value;
alert(strTextOne)
}

</pre>

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chiranthaka Sampath · Accepted Answer · 2014-07-17T18:45:00

Solution 3

Ok I found the solution & it's below.

The HTML Page With The Form

<title>First Page

Text One:

The External JavaScript File

function getVar(){
var strTextOne = document.getElementById("textone").value;
alert(strTextOne)
}

Posted 17-Jul-14 18:45pm

Chiranthaka Sampath