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>
Related
I have a pretty simple need here.
I want to have a text area, that is populated with a line of ID's - each id will be on a new line.
How can I generate a URL from that?
12345
09876
Once submitted should generate to be https://xx.com/12345&09876
I have been using this Form value creates a URL and have changed it to text area, but cant get each line break to be changed to the '&' in the url string.
Any help would be amazing!
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('page').value;
window.location = "https://google.com/" + page;
}
</script>
<textarea name="textarea" style="width:250px;height:150px;" id="page"></textarea>
<input type="submit" value="submit" onclick="goToPage();" />
You can split by \n to get the characters in each line and join by &, then remove the last character:
var url = txt.value.split("\n").join("&").slice(0, -1);
console.log(url);
<textarea id="txt">
12345
09876
</textarea>
In the case of a form:
txt.addEventListener('input', function(){
form.action = txt.value.split("\n").join("&").slice(0, -1);
console.log(form.action);
})
<textarea id="txt">
12345
09876
</textarea>
<form id="form">
<button>Submit</button>
</form>
In your particular case:
<textarea name="textarea" style="width:250px;height:150px;" id="page"></textarea>
<input type="submit" value="submit" onclick="goToPage();" />
<script type="text/javascript">
function goToPage() {
var page = document.getElementById("page").value.split("\n").join("&");
alert(page);
window.location = "https://google.com/" + page;
}
</script>
You can replace text in a string using the JavaScript replace function, as follows:
var newString = oldString.replace(/(\r\n|\r|\n)/g, '&');
This line takes the string variable oldString (which should contain the data with all of the linebreaks) and changes all of the linebreaks to ampersands. It uses something called a Regular Expression to find all of the line breaks.
So for your HTML:
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('page').value;
window.location = "https://google.com/" + page.replace(/(\r\n|\r|\n)/g, '&');
}
</script>
<textarea name="textarea" style="width:250px;height:150px;" id="page"></textarea>
<input type="submit" value="submit" onclick="goToPage();" />
try splitting your text area by \n by doing so:
var split_text = your_text_area.split("\n"); // Replace your_text_area
The string which will be passed in the text area will be splitted by \n (newline) and every line will be inserted in the split_text variable, which is an array.
Then, you can generate a URL from the array like this:
var url = '';
for(let i = 0; i < split_text.length; i++)
{
url += split_text[i];
if((i+1) != split_text.length) // <-- Not the most optimized way to do it
{
url += "&";
}
}
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 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
I'm trying to accomplish the following...if it's asking too much in a single question then some simple steps on what events to use will still help.
There are 2 blank textareas sitting next to eachother - Input and Output. Between them are two inputs Before and After. I want to type or paste a list of words into Input separated by line break, for example:
melons
peaches
apples
And then use the Before and After inputs to add in a word/phrase/symbol before and after each keyword. So if I type 'buy' in before and 'today' in after, the Output text area will display:
buy melons today
buy peaches today
buy apples today
I'd like to accomplish this without having any page refreshing. We can assume the form elements are named as follows:
<textarea id="input"></textarea>
<input type="text" id="before" />
<input type="text" id="after" />
<textarea id="output"></textarea>
I've been try to at least get the Input text to display in Output using this code, but that's not even working:
$(document).ready(function(){
$('#input').keyup(function(e){
$('#output').html($(this).val());
});
});
Any guidance would be awesome!
a compact one:
$("#input,#before,#after").on("keyup", function () {
$("#output").val(
$.map($("#input").val().split("\n"), function (n, i) {
return $("#before").val() + " "+ n + " " + $("#after").val();
}).join("\n"));
});
example
This would do the trick:
function update_output(){
//Split input by newline
var input_words = $('#input').val().split('\n');
var output_lines = new Array();
//Iterate over each keyword and prepend and append values
$.each(input_words, function(i, word){
output_lines.push($('#before').val()+' '+word+' '+$('#after').val());
});
//Display output in textarea
$('#output').val(output_lines.join('\n'));
}
You just need to choose when you want to update the output textarea, maybe bind it so it updates every time the #input or #before and #after changes:
$('#input,#before,#after').on('change',update_output);
Alright, I can help you to get started. My answer is not complete, but you can have a very good idea from here. Note I wrote this code to be easy to understand and I am not using sophisticated approaches on purpose.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$("#input").keypress(function(key){
if(key.which == 13) {
refreshData();
}
});
});
function refreshData() {
var beforeVal = $("#before").val();
var inputLines = $("#input").val().split(/\r\n|\r|\n/g);
var desiredOutputVal = "";
for(var i=0; i<inputLines.length; i++) {
desiredOutputVal += beforeVal + inputLines[i] + "\n";
}
$("#output").val(desiredOutputVal);
}
</script>
</head>
<body>
<form>
<textarea id="input"></textarea>
<input type="text" id="before" />
<input type="text" id="after" />
<textarea id="output"></textarea>
</form>
</body></html>
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)