HTML Forms with JavaScript

Question

3.00/5 (1 vote)

See more:

Javascript

XHTML

WebForms

, +

How can I get response from an XHTML form to a JavaScript file. This JavaScript is internal!
Thanks!

Posted 20-Oct-11 5:46am

Chiranthaka Sampath

Add a Solution

Comments

Sergey Alexandrovich Kryukov 20-Oct-11 12:00pm

What does it mean: "to a JavaScript file"? "JavaScript is internal"? Does "internal" mean "embedded in HTML"? -- which does not matter.
--SA

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)

Sergey Alexandrovich Kryukov · Accepted Answer · 2011-10-20T07:23:00

The question is very inaccurate (please see my comment to it above), so don't blame me if I answer wrong question.

I assumed that you simply need to process form data by some JavaScript code embedded in XHTML. I also assumed you use client-side JavaScript as server-side JavaScript is not used often these days. Indeed, there could be some problems (please see below). First thing to understand: if you need just client-side JavaScript processing, you don't need form, which is also needed to send HTTP request to the server. You actually don't even need a server for development, not even a local server, no servers at all anywhere. You can deploy the result of your development to a server machine later, when and if this is needed.

So, if my assumptions are correct, read the above code sample. Basically, this is all you need to know:

XML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>JavaScript in XHTML sample</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript"><![CDATA[
			function submitHandler() {
				var div = document.getElementById("placeholder");
				var checkbox = document.getElementById("checkbox");
				var textarea = document.getElementById("textarea");
				var text =  document.getElementById("text");
				var select =  document.getElementById("select");
				div.innerHTML = "<br/><hr/>" + 
					"Check box checked: <b>" + checkbox.checked + "</b><br />" +
					"Text area value: <b>" + textarea.value + "</b><br />" +
					"Text box value: <b>" + text.value + "</b><br />" +
					"Selected make: <b>" + select.value + "</b><br />";
			}
		]]></script>
	</head>
<body>

<div>
<input type="checkbox" id="checkbox"/>Check box<br/>
<textarea placeholder="Type some message here..." id="textarea" /><br/>
<input type="text" placeholder="Type one line..." id="text" /><br/>
<select id="select">
  <option value="Volvo">Volvo</option>
  <option value="Toyota">Toyota</option>
  <option value="Honda" selected="true">Honda</option>
  <option value="Nissan">Nissan</option>
  <option value="Saab">Saab</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Audi">Audi</option>
</select><br/>
<button onclick="javascript:submitHandler()" accesskey="S"><u>S</u>ubmit</button>
</div>

<div id="placeholder" />

</body>
</html>

Pay attention: Unlike "plain" HTML, XHTML requires CDATA section to sandwich JavaScript code, to prevent XML parsing of it. "Plain" HTML would rather need  (comment) brackets. Also, XML is case-sensitive, and XHTML attributes are all low-case. These differences creates problems in attempt to process HTML code as XHTML — it may be failed or render the code defunct.

—SA