I have a web page and I want to do something with user input text. Normally, <input type="text" /> is used inside a <form> nesting and setting input without form attribute is not acceptable in html strict schema. I want to avoid <form>, but still want some text field to use with JavaScript.
I am seeking an example with an option for text input and alert input data on click of a button, with/without jQuery.
Using W3C's validator, this passes HTML 4.01 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<p><input type="text" value="hi"></p>
</body>
</html>
and this passes XHTML 1.0 Strict:
<!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">
<head>
<title>test</title>
</head>
<body>
<p><input type="text" value="hi" /></p>
</body>
</html>
The problem is that <input> is an inline tag and thus needs to be inside something that accepts such tags (<body> does not).
Having a closer look at the DTD, an input element is part of the inline (lets call it) group:
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
<!-- %inline; covers inline or "text-level" elements -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
So wherever inline is allowed, so is input. That means you don't need a form.
E.g. in a div:
<!ENTITY % flow "%block; | %inline;">
(...)
<!ELEMENT DIV - - (%flow;)* -- generic language/style container -->
But not as you mentioned in a comment, in the body:
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
(I think it goes without saying that block does not contain inline).
It's perfectly OK to have an input element without a form. Where does it say it's not allowed?
Related
This question already has answers here:
Set the value of an input field
(17 answers)
Closed 6 years ago.
This is a .php file and I have tried several things to make this work, but I am new to javascript. When I run this with the document.write enabled, it shows me that the onclick event for the button is working. But for whatever reason, I cannot find any information about how to write to an input text element within a form. Does anyone know how this should work? Do I have to put the button inside the form? Thanks.
<?php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function setValue() {
//document.write("122.0000");
document.getElementById("someid").innerHTML="222.0000";
}
</script>
<center>
<button onclick="setValue()">Write value</button><br>
<center><form action="something.php" method="post" id ="inputForm">
Value: <input type="text" id="someid" /><br>
<input type="submit" />
</form>
Change
document.getElementById("someid").innerHTML="222.0000";
to
document.getElementById("someid").value="222.0000";
This will set the value of the text input to 222.0000 instead of trying to change the innerHTML, which is the content between the opening and closing tags (non-existent for inputs).
I have a web page that generates HTML via JavaScript.
When validating using HTML validator 0.9.5.1 in Firefox 22, I get an error: 'document type does not allow element "span" here'
I am using this JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...<body>...
<script type='text/javascript'>
var someHtml = '<span>Hello world!</span>';
var e;
e = window.document.createElement('div');
e.innerHTML = someHtml;
window.document.body.appendChild(e);
</script>
Obviously the parser assumes that <span> is nested inside <script>
How should i rewrite the JavaScript to pass HTML validation? I would prefer a solution that does not require me to create HTML elements.
Note: The answers in Avoiding HTML-in-string / html() in a jQuery script do not help me since I know that the code works. I want to reformat to avoid validation errors.
the pre element is for preformatted text, not more HTML.
HTML Tidy's objection is that you are putting something that it believes you expect the browser to render as HTML, you need to scape the entities (replacing < and > with < and >) so that it is interpretted as text.
UPDATE IN RESPONSE TO COMMENT:
With an XHTML doctype, the document must be wellformed XML. So, you need CDATA marks inside your script tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hello world</title>
</head>
<body>
<script type='text/javascript'>
//<![CDATA[
var someHtml = "<div>Hello world!</div>";
var e;
e = window.document.createElement('div');
e.innerHTML = someHtml;
window.document.body.appendChild(e);
//]]>
</script>
</body>
</html>
You can't put <div> inside <pre>. <pre> can contain phrasing content only, where <div> is not.
Also you should wrap your script with <![CDATA[ ... ]]> section since doctype is XHTML.
Hello I came across a weird behavior with an onclick attribute regarding form submission.
Page on Server:
<!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">
<head lang="en-us" >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Return Form Example</title>
<script type="text/javascript">
function doSomething(){
alert("hey");
return false;
}
</script>
</head>
<body>
<form action="submit.php" method="post">
<input type="submit" onclick="return doSomething()" value="click me!">
</form>
</body>
</html>
In this example, running on my server, when I click the submit button I get an alert saying hey and I stay on the current page. However, I tried to set this same example up on jsfiddle and I get an 404 error meaning the form was submitted. I cannot figure out why this occurs.
Here is the jsfiddle where I am trying to replicate the behavior on my server.
jsfiddle:
http://jsfiddle.net/46XSv/
You want to check the option "no wrap - in <head>" which is "Do not wrap the Javascript code, place it in section".
Select "no wrap - in <head>" under "Framework and extensions"
In this page you'll find the description of each of the options around the bottom: http://doc.jsfiddle.net/basic/introduction.html.
Also its a good practice to include semicolon at the end of your return statement, like the following:
<input type="submit" onclick="return doSomething();" value="click me!">
You should use onsubmit on the <form> element instead of onclick on the <input> element. It will work correctly.
This is the source of my simple HTML page (save as .html file):
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function convert(){
var ele1 = document.getElementById("somewhere");
var replaced;
replaced = ele1.value;
replaced = replaced.replace(/&/ig, "&");
replaced = replaced.replace(/</ig, "<");
replaced = replaced.replace(/>/ig, ">");
replaced = replaced.replace(/'/ig, "'");
replaced = replaced.replace(/"/ig, """);
ele1.value = replaced;
}
</script>
</head>
<body>
<textarea cols="70" id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(250, 250, 250); border: 2px solid rgb(204, 204, 204);"></textarea><br />
<input onclick="convert();" type="button" value="Encode" />
</body>
</html>
What this page does is, any code put in the textarea is HTML-encoded/escaped when the "Encode" button is clicked — essentially all instances of &, <, >, ' and " in the input code are replaced with their respective HTML entities.
How do I modify the JavaScript code in the page, so that only the input code between <pre> and </pre> tags is modified as aforementioned?
EDIT: As I see it I wasn't clear. First you need to save the HTML code I gave above into a .html file and open it in a browser. Then you will see a textarea/textbox with an "Encode" button below it.
Any code put into the text area is escaped when the "Encode" button is pressed.
I want to modify the JavaScript code in the HTML code above, so that (for instance) if I put the following code in the textbox:
It's mine.
<pre>
<input onclick="convert();" type="button" value="Encode" />
</pre>
It's also mine.
and hit the "Encode" button, only the code between <pre> tags is escaped. I hope I am clear this time.
Hope I am clear, and can get some help. Thanks.
Insead of using:
var ele1 = document.getElementById("somewhere");
You could use:
var ele1 = document.getElementsByTagName("pre");
However this might return multiple elements since there could be multiple <pre> sections in your html.
But again, if your goal is to produce a safe output, escaping is not a preferred solution. Have a look at Markdown for example:
http://daringfireball.net/projects/markdown/basics
I'm not sure into what you're trying to convert. ele1.innerHTML parses the HTML exactly how it should to be parsed. Ie. < will be converted to <, which is valid HTML.
Edited
function convert(){
var txt=document.getElementById('somewhere');
txt.innerText=txt.innerHTML;
return;
}
Quotemarks and hipsals are valid html, but if you want have them replaced:
var txt=document.getElementById('somewhere');
var txti=txt.innerHTML;
txti=txti.replace(/\"/g, """);
txti=txti.replace(/\'/g, "'");
txt.innerText=txti;
I pass a string from one page to another page using AJAX method.This string is available in the data base.It retrieves string along with the whole client page script of the page from where i am retrieving the data.I want the string alone from the rest of the data using javascript.The string which i retrieve from the data base alone will be keep on changing
This is how it looks:
**live its live** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"> <head><title> Untitled Page </title>
I want to remove the whole paragraph except **live its live**.The problem is that the **live its live** text alone will be changed if it is updated in the data base
Can anybody pls help me sort out this problem....
demo
var str = '**live its live** <!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"> <head><title> Untitled Page </title><link href="App_Themes/Modern/default.css" type="text/css" rel="stylesheet" /></head> <body> <form name="form1" method="post" action="/Web/MessageDisplay.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGTa4056JeZHQioLQvNmbYjBQvHt8A==" /> </div> <div> </div> </form> </body> </html>';
alert(str.slice(0,str.indexOf('<!DOCTYPE')))
Your code must have a way to uniquely identify the live its live text to avoid loopholes. If you just slice the string using the content it may fail. Assuming that you used "**" as a wrapper to uniquely identify the text, an alternative to slicing the string or getting its substring is to use javascript's regular expression.
E.g.
var re = /\*\*.*\*\*/gi;
var str = '**live its live** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"> <head><title> Untitled Page </title>;';
alert(re.exec(str)[0]);
For more information on RegExp, see https://developer.mozilla.org/en/core_javascript_1.5_guide/regular_expressions