I have a text area on a simple website that I would like to check for specific text. The text that I would like to check for are html tags. It works when I put the tags right next to each other. I want to make sure that the text area has the tags but with any number of spaces or breaks. Thanks in advance!
Here is my full code:
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{
// see http://www.thesitewizard.com/archive/validation.shtml
// for an explanation of this script and how to use it on your
// own website
// ** START **
if (form.email.value == "<html><head></head><body></body></html>") {
var node = document.getElementById("grr");
node.innerHTML = "<p>" + "Correct!" + "</p>";
form.email.focus();
return false ;
}
// ** END **
return true ;
}
//-->
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return checkform(this);">
<textarea id="email" type="text" rows="5" columns="5"></textarea>
<input type="submit" value="submit">
</form>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<div id="grr">Text</div>
</body>
</html>
There's not many good ways to do this. Generally you should parse HTML in the browser and return the HTML string, as that would solve the issue for the most part, but you can't really insert an entire document with <html>, <head> tags and everything into another element, so you're probably left with a regex solution, something like this
function checkform(form) {
var div = document.createElement('div'),
email = document.getElementById('email');
if (email.value.replace(/\>\s+\</g, '><').trim() == "<html><head></head><body></body></html>") {
var node = document.getElementById("grr");
node.innerHTML = "<p>" + "Correct!" + "</p>";
email.focus();
return false;
}
return true;
}
FIDDLE
Related
So I have this working codeblock in my script to replace the decimal seperator from comma "," into period "." ,when editing a form. Because in this region the decimal seperator comma is normal I also want the values to be displayed like this 1,99€ so I reverted the working function. The selected fields should change on load. When the form gets submitted I will cange it back again. For this example I show you only one of the fields.
The value="1.5" gets loaded from the Magento-Backend the wrong way, which is another story:
I included onload:"function(event)"
and window.onload = function(); to show two my attempts to adress this function from jQuery: jQuery('form').on('change', '#price', function(event) I also need to know how to remove the .on('change' part. First time using Js und jQuery. I really tried everything.
<html>
<body onload="function(event)">
<form>
<input id="price" value="1.5">
</form>
</body>
</html>
<script>
window.onload = function();
jQuery('form').on('change', '#price', function(event) {
event.preventDefault();
if (jQuery('#price').val().includes('.')) {
var varwithpoint = jQuery('#price').val();
varwithcomma = varwithcomma.replace(",",".");
jQuery('#price').val(varwithpoint);
}
else {
console.log('no dot to replace');
}
});
</script>
There were a few parts of the code which didn't seem to be working as intended, so below is a basic example of code that will convert the "," to a "." if stored in the input "price", and check this after each change of the value;
function convert_price(){
var this_price = $("#price").val();
if (this_price.includes(',')) {
this_price = this_price.replace(",",".");
$('#price').val(this_price);
} else {
console.dir('no dot to replace');
}
}
convert_price();
$("#price").on("change",convert_price);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<body>
<form>
<input id="price" value="1,5">
</form>
</body>
</html>
I have called "init" the function that attaches the change event to the input file, I also changed the parameters passed to the on function
function init(){
var input = jQuery('#price');
input.on('change', function(event) {
event.preventDefault();
var valueInInput = input.val();
if (valueInInput.includes('.')) {
var varwithcomma = valueInInput.replace(",",".");
input.val(varwithcomma);
} else {
console.log('no dot to replace');
}
});
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body onload="init()">
<form>
<input id="price" value="1.5">
</form>
</body>
</html>
I'm trying to Convert special characters to HTML in jquery but am not getting any result in my website
<textarea id="Mpreditor"> <tr><td></td><td></td></tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td class="comment-form">
</textarea>
Jquery code
<script type="text/javascript">
window.onload=function(){
var html = $("#Mpreditor").html();
html = html.replace('<','<').replace('>','>').replace('"','"');
$("#Mpreditor").html(html);
}
</script>
Here in jsfiddle is working but in my website is not working
https://jsfiddle.net/codesoft/426njvsx/
Here is my code, please check this out.
var needToConvert = 'But I want to turn "<" and ">" into "<" and ">".';
var convert = function(convert){
return $("<span />", { html: convert }).text();
//return document.createElement("span").innerText;
};
alert(convert(needToConvert));
You code is working try this,
function convertthings(){
var convert = function(convert){
return $("<span />", { html: convert }).text();
//return document.createElement("span").innerText;
};
alert(convert(document.getElementById('Mpreditor').value));
}
</script>
</head>
<body>
<form action="" method="GET" onsubmit="convertthings()">
<textarea id="Mpreditor"> <tr><td></td><td></td></tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td class="comment-form">
</textarea>
<input type="submit" id="save_run" value="Run" />
</form>
I have a very simple HTML/JavaScript form that I am working on for coursework, I have got it to work however i would like it to validate the input as the user types (my validation appears below the text field) how can I achieve this? My code is as follows:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http:ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<meta charset=utf-8 />
<title>Email Validation</title>
</head>
<body>
<form onsubmit='validate(); return false;'>
<p>Enter an email address:</p>
<input id='email' placeholder="example#example.com" size="21">
<button type='submit' id='validate'>Submit</button>
</form>
<br />
<h2 id='result'></h2>
<script>
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
$("#result").text("");
var email = $("#email").val();
if (validateEmail(email)) {
$("#result").text(email + " is valid");
$("#result").css("color", "green");
} else {
$("#result").text(email + " is not valid");
$("#result").css("color", "red");
}
return false;
}
$("form").bind("submit", validate);
</script>
</body>
</html>
For methods not using jQuery, in case you're interested, there's another Stack Overflow question here: On Input Change Event.
There are many ways to do what you want listed there, but in this case you could do something like this:
var input = document.querySelector('input');
input.addEventListener('input', function()
{
// Check input.value for what you're looking for here
});
See the jsFiddle that Drew Noakes' made in that other page for an example.
But, since you're using jQuery, then Nicholas Kyriakides's suggestion is the way to go.
I'm trying to get the word wrapped line breaks from a textarea without having make any server calls. This answer gets me 90% of the way there. The problem is that the page is reloaded inside of the iframe each time the submit button is clicked. Here's the code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<script type="text/javascript">
function getURLParameter(qs, name) {
var pattern = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(pattern);
var res = regex.exec(qs);
if (res == null)
return "";
else
return res[1];
}
function getHardWrappedText() {
var frm_url = document.getElementById('frame').contentDocument.URL;
var text = unescape(getURLParameter(document.getElementById('frame').contentDocument.URL, 'text')).replace(/\+/g, ' ');
return text;
}
function onIFrameLoad() {
var text = getHardWrappedText();
console.log(text);
}
window.onload = function() {
console.log("loading")
};
</script>
<form name="form" method="get" target="frame">
<textarea id="text" name="text" cols=5 wrap="hard">a b c d e f</textarea>
<input type="submit">
</form>
<iframe id="frame" name="frame" onload="onIFrameLoad()" style="display:none;"></iframe>
</body>
</html>
Clicking on the submit button gives the output:
loading
a b c d e
f
Is there a way to prevent the iframe from reloading the page?
You have to return a false to the onsubmit event of the form.
<form name="form" method="get" target="frame" onsubmit="onIFrameLoad">
If it is based on some condition that you do not want to load
function onIFrameLoad() {
var text = getHardWrappedText();
console.log(text);
if(text.indexOf('\n')<0) return false;
}
Am just putting a random thing at text.indexOf('\n')<0, you can have anything that makes sense or always return false (which looks unlikely)
I have a text box that can allow the users to hit enter. When they hit enter I check the input and replace the carriage return with \n. However it still sends to my database a carriage return.
What could be wrong?
Here is the code:
var pp = comment.value;
alert(pp.replace(/\r?\n|\r/g, "\n"));
comment.value = pp.replace(/\r?\n|\r/g, "\n");
and in my database I still get carriage return character even though I am replacing it.
If you set an onsubmit handler on your form, you'll be able to change the contents of the textarea element before sending it. You can then use the replace method to change every \r to \n:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Replace carriage returns in textarea</title>
</head>
<body>
<form id="theForm">
<textarea id="theTextarea" name="txtarea" rows=10 cols=50></textarea>
<input type="submit" value="Send">
</form>
<script>
function replace_newlines() {
var textField = document.getElementById("theTextarea");
var textString = textField.value;
textField.value = textString.replace(/\r/g, "\n");
}
document.getElementById("theForm").onsubmit = replace_newlines;
</script>
</body>
</html>
Here is an example that does it in pure javascript, but it'd be much cleaner if you were using something like jquery.
<html>
<head>
</head>
<body>
<textarea id='txt'></textarea>
<script type='text/javascript'>
var txtarea = document.getElementById('txt');
txtarea.onkeypress = keyHandler;
function keyHandler(e){
if (document.all) { e = window.event; }
if (document.layers || e.which) { pressedKey = e.which; }
if (document.all) { pressedKey = e.keyCode; }
if(pressedKey == '13'){
txtarea.value = this.value + '\\n';
return false;
}
}
</script>
</body>
</html>