Special letters displaying as HTML entities in form - javascript

I'm trying to send information (name and email) from one form to another form on another page. The problem is that when the information is sent to the second form, any special letters (like å, ä, ö etc.) are displayed as HTML entities (ö becomes &ouml). I'm a beginner coder and did not build the form that sends the information myself, but I believe it's sent with jQuery. The form is validated, serialized and then decoded before it's sent to the other page. Code is below:
/*Form Submit*/
$('#button').click(function(){
if (validateForm()) {
var data = $("#form-signup").serialize();
var dataDecoded = decodeURI(data);
var regUrl = 'mypage.com/registration' + '&' + dataDecoded;
$("#link").attr("href", regUrl);
if (($('#checkBox').is(':checked'))) {
$('#checkBox').css('outline', 'none');
return true;
} else {
$('#checkBox').css('outline', '1px solid red');
$('#checkbox-message').next().addClass('checkbox-error');
$('#checkbox-message').next().text('Please Tick the Agree to Terms of Use');
return false;
}
}
});
In console all letters and special characters look alright, as well as in the URL on the second page. The URL becomes something like:
mypage.com/registration?&firstName=Björn&lastName=Björngård&email=bjorn%40mail.com.
But in the actual form the name displays like: Bj&amp';ouml';rn Bj&amp';ouml';rng&amp';aring';rd. (Without the ') . Email displays correct.
Any idea if the problem is with sending the information or receiving?
Thanks in advance!

Use the function :
unescape(Your_String_Here);
its a pure JavaScript function url decodes any value
see this
Update
Check this as well:
var parser = new DOMParser;
var dom = parser.parseFromString(your_string);
var decodedString = dom.body.textContent;
alert(decodedString);

Related

How to take input in a page using javascript and display the input in the html?

I am trying to make a simple web page, and I want to take input from the user and display the same in the web page, how should I write the Javascript code for the output? Currently it looks like this
var username = prompt("Your username")
var comment = prompt("Your comment")
println(username + comment)
You can use the document API (this API represents any web page loaded in the browser and serves as an end point into the web page's content, which is the DOM tree) for that and fetch one of the elements in your html file. then you can assign its innerText to the answers you got.
For example (using the getElementById)
var username = prompt("Your username");
var comment = prompt("Your comment");
document.getElementById("answer").innerText = username + ' ' + comment;
<div id="answer">
</div>
More about the document interface here
Not sure exactly what you're looking for but you can edit the HTML value using :
document.getElementbyId('id').innerHTML = '';

Prevent XSS attacks with string replace method in JavaScript

I am writing an application where the user can add messages, they are saved in the firebase, and displayed on the page. I am using the following method to protect html injection:
function testHtml(str){
return str.replace(/</g, '<').replace(/>/g, '>');
}
And I output the text as follows:
$("#save").click(function(){
let text = $("#text").val(); //user input
text = testHtml(text);
$("#resultDiv").append(text);
});
I want to know if this method is safe? Are there any workarounds? If so, which ones? I use this filtering method when displaying messages. Many thanks for considering my request.

How to validate Text Box to allow Specific URI?

i am developing application using Code-igniter.
I want to validate Text Box Using J Query Or JavaScript That only allowed to input following URL when user submit form.
http://
https://
ftp://
ftps://
file://
market://
linkedin://
fb://
geo:
maps://
Is there any way to do this ?
function is_url(str)
{
regexp = /^(?:(?:https?|ftps?|file?|market?|linkedin?|fb?|maps?):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
if (regexp.test(str))
{
return true;
}
else
{
return false;
}
}
Try using this regex in a function that checks validity of your input.
/^(http|https|ftp|ftps|file|market|linkedin|fb|maps|geo):\/\//g
But do the reverse logic:
if it matches then display error mesage and clear input.
If it not matches then your URL is fine
If you wanna prevent URLs anywhere in your input, remove the leading ^ in regex to match even if URL is not start of the string.
like: /(http|https|ftp|ftps|file|market|linkedin|fb|maps|geo):\/\//gm
Here is a crud version of entire solution:
fiddlejs
Main thing is URL validation:
$("#urlInput").focusout(function (){
var inputElement = $("#urlInput");
var regexp = /(http|https|ftp|ftps|file|market|linkedin|fb|maps|geo):\/\//gm;
if (regexp.test(inputElement.val())){
inputElement.val("");
alert("This is nto a valid URL")
}
});
It bound to the
<input id="urlInput" type="url">
You might wanna rework the error reporting in a more user friendly manner but that's another story.

Name Game Social Share

I am working on a Name Game type of Name Generator where you enter some fields and associated variables are pulled. I have the generator working and the share links working, however I can't get them to populate with the final 'sillyname' variable.
AKA When you click share, it has a generic message but I am trying to get it to dynamically enter the name into the tweet or facebook share text.
Any help on this would be awesome.
Here is the link for you to dig deeper.
http://codepen.io/drewlandon/pen/VLvpjq
I have this in the twitter/facebook share function:
var twitterWindow = window.open('https://twitter.com/intent/tweet?url=http://sweetleafmarijuana.com/&text=My Sweet and Fierce Name... &via=TheSweetestLeaf &hashtags=SweetFierceName', 'twitter-popup', 'height=350,width=600'); if(twitterWindow.focus) { twitterWindow.focus(); }
return false; } var facebookShare = document.querySelector('[data-js="facebook-share"]');
However I found this and feel like it needs to be something along these lines:
function twitterShare(){
var shareText='My funny pseudonym is '+accents_to_regulars(outputName)+', according to #...'
So i'm thinking i need something like this (but having trouble from there)
var twitterMessage = "My #SWEETFIERCENAME is " + hungryName + ", according to #thesweetestleaf's #SweetFierceName Name Generator";
var facebookMessage = "My name is " + hungryName + "";
You need to escape the text for the URL.
It works here: http://codepen.io/anon/pen/Kpdvqa
twitterShare.onclick = function(e) {
e.preventDefault();
var twitterWindow = window.open('https://twitter.com/intent/tweet?url=http://sweetleafmarijuana.com/&text='+encodeURIComponent(getSillyName())+'&via=TheSweetestLeaf &hashtags=SweetFierceName', 'twitter-popup', 'height=350,width=600');
if(twitterWindow.focus) { twitterWindow.focus(); }
return false;
}
The # character has special meaning in URLs.
As for the Facebook message, there is no way to pre-fill that anymore:
http://www.quora.com/With-Facebooks-share-link-is-there-a-way-to-prefill-the-text-to-be-posted
You will have to take a closer look at the FB Feed Dialog to see other options, like perhaps updating the caption property instead.

Trying to collect parameters from URL and submit into CRM with form

I have a multi page form.
Page One has a few fields that get passed into the second form, via GET method, and it auto fills the first four fields of the second part of the form.
Page two has a few more questions, and when you submit it, it submits into our CRM(vanillaSoft), and leads to a thank you page.
My current issue:
I want to be able to take an affiliate link, such as:
http://something.com/step-one.html?AFFILIATE_ID=#affid#&SUB_ID=#s1#
I need to dynamically populate the AFFILIATE_ID parameter with a unique transaction ID, and the SUB_ID with a unique ID as well.
I currently have two fields on my first page with hidden fields, ex:
<input type="hidden" name="SUB_ID">
<input type="hidden" name="AFFILIATE_ID">
But that isn't working. I need this date to be sent into the CRM I use.
Any advice?
Thanks!!!
Your current setup will work if you set your form submit method to GET. You probably have it set to POST.
Setting your form method to GET will put those hidden fields in the URL, like you are expecting.
On the last form, set that one to POST (to POST to the server).
You can grab the Query string with JavaScript, like this:
var getParamValue = (function() {
var params;
var resetParams = function() {
var query = window.location.search;
var regex = /[?&;](.+?)=([^&;]+)/g;
var match;
params = {};
if (query) {
while (match = regex.exec(query)) {
params[match[1]] = decodeURIComponent(match[2]);
}
}
};
window.addEventListener
&& window.addEventListener('popstate', resetParams);
resetParams();
return function(param) {
return params.hasOwnProperty(param) ? params[param] : null;
}
})();​
How can I get query string values in JavaScript?
You could also send both POST and GET methods. But POST can be done only on server side, where JavaScript is Client-side scripting language.
<form method="POST" action="form.php?a=1&b=2&c=3">
PHP -> Send both POST and GET in a form
How to read the post request parameters using javascript

Categories