I have a web app with a calendar page where users can select days.
I want the selected days to be posted to the server which will then render the next page based on the days.
In order to do this, I need the calendar I created to be treated as a form. How do I do something like this. I initially was using an AJAX request since I could store the selected days info in an array, but the issue is that an AJAX request does not load a new page.
Your input is greatly appreciated!
var url = "https://example.com/methd";
var date = document.getElementById("calendar");
var keyName = "dates";
date.addEventListener("change", function(e) {
var form = document.createElement("form");
form.setAttribute("method", "POST");
form.setAttribute("action", url);
var inputField = document.createElement('input');
inputField.setAttribute("type", "hidden");
inputField.setAttribute("name", keyName);
inputField.setAttribute("value", this.value);
form.appendChild(inputfield);
document.body.appendChild(form);
form.submit();
});
<input type="date" id="calendar" />
reference
Related
I have a form created dynamically with one input:
var myForm = document.createElement('form');
myForm.setAttribute('id', 'formDynamically');
myForm.method = 'POST';
myForm.action = 'myAction';
var myInput = document.createElement('input');
myInput.type = 'text';
myInput.name = 'textDescription';
myInput.value = $('#myTextField').text();
myForm.appendChild(myInput);
document.body.appendChild(myForm);
myForm.submit();
My problem is:
If the user types a text with accentuation, in the server the letters arrive strange
Exemple:
'fiancé'. in the server side i recived ---> 'fiancé'
obs: I can't change anything in server side.
obs²: I tried it with Jquery Ajax and works fine, the problem really is with my form (i can't use ajax, i must do it with form submit).
Any help is welcome !
Try this :
myForm.acceptCharset = "UTF-8";
Documentation
I recently installed a script that creates a Google __utmz cookie for my site visitors, and it sets all of the fields. Below is a look at it.
<script>
function get_campaign_info()
{
var utma = get_utm_value(document.cookie, '__utma=', ';');
var utmb = get_utm_value(document.cookie, '__utmb=', ';');
var utmc = get_utm_value(document.cookie, '__utmc=', ';');
var utmz = get_utm_value(document.cookie, '__utmz=', ';');
source = get_utm_value(utmz, 'utmcsr=', '|');
medium = get_utm_value(utmz, 'utmcmd=', '|');
term = get_utm_value(utmz, 'utmctr=', '|');
content = get_utm_value(utmz, 'utmcct=', '|');
campaign = get_utm_value(utmz, 'utmccn=', '|');
gclid = get_utm_value(utmz, 'utmgclid=', '|');
session_count = get_session_count(utma);
pageview_count = get_pageview_count(utmb, utmc);
if (gclid !="-") {
source = 'google';
medium = 'cpc';
}
}
</script>
Looking through my cookies I can see that it is being created. For example heres a bit of it:
"47664550.1486736628.2.2.utmcsr=website.com|utmccn=(referral)"
I have another script which is cleaning it all up and posting it to my console.
The issue that I am finding is that I can't figure out how to push those fields, like Campaign Medium, to hidden form fields on my site. Below is a look at how my typical Marketo form creates hidden fields with user data.
MktoForms2.whenReady(function(form){
ga(function(){
form.addHiddenFields({
GA_User_ID__c : ga.getByName('gtm1').get('userId')
});
});
Does anyone have an idea of how I can push medium, session, etc. to hidden fields? Thanks for any advice or just for reading! If it helps, the page I've been running tests on is powerreviews.com/form-test
For Marketo forms you should use the Marketo Form API. Go to this page and scroll down to the hidden field example.
In case the URL changes, here is the example code:
MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057, function (form) {
// Set values for the hidden fields, "userIsAwesome" and "enrollDate"
// Note that these fields were configured in the form editor as hidden fields already
form.vals({"userIsAwesome":"true", "enrollDate":"2014-01-01"});
});
I currently have a form with some JavaScript functions and localstorage.
I'm trying to get that when a user types a value into a textbox, the search bar changes the URL from "mysite.com" to "mysite.com/%userinput%". Then that user can send that link to someone else and that person will then see what the original user saw.
This will change the URL after input.
As I understand from your question and comments, you don't want to load the URL, just change it, so try this fiddle: http://jsfiddle.net/GrP6U/2/show/
The code behind is:
JavaScript
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
theForm.onsubmit = function(e) {
var myurl = "http://jsfiddle.net/GrP6U/2/show/?input=" + encodeURIComponent(theInput.value);
window.history.pushState('', "Title", myurl);
return false;
}
HTML
<form id="theForm">
<input id='subj'/>
<input type='submit'/>
</form>
<html>
<head>
<script>
function open_win()
{
window.open("http://localhost:8080/login","mywindow")
}
</script>
</head>
<body>
<input type="button" value="Open Window" onclick="open_win()">
</body>
</html>
Hi ,
On click of a button , i am opening a new website (My web site )
I have two text fields ( One Text Field and another Password Field) , i am trying to send this values to the other opened window .
But its not working as I want.
I have tried the following ways
1. window.open("http://localhost:8080/login?cid='username'&pwd='password'","mywindow")
2. window.open("http://localhost:8080/login","mywindow")
mywindow.getElementById('cid').value='MyUsername'
mywindow.getElementById('pwd').value='mypassword'
Could anybody please help me if this is possible or not ??
Sorry for the incomplete details , its a Post request .
if you want to pass POST variables, you have to use a HTML Form:
<form action="http://localhost:8080/login" method="POST" target="_blank">
<input type="text" name="cid" />
<input type="password" name="pwd" />
<input type="submit" value="open" />
</form>
or:
if you want to pass GET variables in an URL, write them without single-quotes:
http://yourdomain.com/login?cid=username&pwd=password
here's how to create the string above with javascrpt variables:
myu = document.getElementById('cid').value;
myp = document.getElementById('pwd').value;
window.open("http://localhost:8080/login?cid="+ myu +"&pwd="+ myp ,"MyTargetWindowName");
in the document with that url, you have to read the GET parameters. if it's in php, use:
$_GET['username']
be aware: to transmit passwords that way is a big security leak!
Please find this example code, You could use hidden form with POST to send data to that your URL like below:
function open_win()
{
var ChatWindow_Height = 650;
var ChatWindow_Width = 570;
window.open("Live Chat", "chat", "height=" + ChatWindow_Height + ", width = " + ChatWindow_Width);
//Hidden Form
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "http://localhost:8080/login");
form.setAttribute("target", "chat");
//Hidden Field
var hiddenField1 = document.createElement("input");
var hiddenField2 = document.createElement("input");
//Login ID
hiddenField1.setAttribute("type", "hidden");
hiddenField1.setAttribute("id", "login");
hiddenField1.setAttribute("name", "login");
hiddenField1.setAttribute("value", "PreethiJain005");
//Password
hiddenField2.setAttribute("type", "hidden");
hiddenField2.setAttribute("id", "pass");
hiddenField2.setAttribute("name", "pass");
hiddenField2.setAttribute("value", "Pass#word$");
form.appendChild(hiddenField1);
form.appendChild(hiddenField2);
document.body.appendChild(form);
form.submit();
}
To concatenate strings, use the + operator.
To insert data into a URI, encode it for URIs.
Bad:
var url = "http://localhost:8080/login?cid='username'&pwd='password'"
Good:
var url_safe_username = encodeURIComponent(username);
var url_safe_password = encodeURIComponent(password);
var url = "http://localhost:8080/login?cid=" + url_safe_username + "&pwd=" + url_safe_password;
The server will have to process the query string to make use of the data. You can't assign to arbitrary form fields.
… but don't trigger new windows or pass credentials in the URI (where they are exposed to over the shoulder attacks and may be logged).
You can use this but there remains a security issue
<script type="text/javascript">
function fnc1()
{
var a=window.location.href;
username="p";
password=1234;
window.open(a+'?username='+username+'&password='+password,"");
}
</script>
<input type="button" onclick="fnc1()" />
<input type="text" id="atext" />
You can try this instead
var myu = document.getElementById('myu').value;
var myp = document.getElementById('myp').value;
window.opener.location.href='myurl.php?myu='+ myu +'&myp='+ myp;
Note: Do not use this method to pass sensitive information like username, password.
I found this method very useful, I hope this will be helpful for many users too.
// --> screen 1:
var url = 'screen_2_url';
var id = 'some_ID';
window.open(url + '?id=' + id);
This will open the Screen 2 tab. There you can get the passed values like this:
// --> screen 2:
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const id = urlParams.get('id');
I agree that passing username and password as parameters is a bad idea, no matter how you do it.
However, if it's same site, you could use sessionStorage, like so:
sessionStorage.setItem('username', username)
sessionStorage.setItem('password', password)
window.open("http://localhost:8080/login","mywindow")
And then in the opened window:
var username = sessionStorage.getItem('username')
var password = sessionStorage.getItem('password')
// if you no longer need them:
sessionStorage.removeItem('username')
sessionStorage.removeItem('password')
I am creating dynamic form in JavaScript. I want to send the data's from JavaScript to servlet. I dont use any submit Button in my Form.Using button only i want to send the data's. Anyone help me please.
This is my code:
var myform=document.createElement("form");
myform.setAttribute("id", "myform");
var tname=document.createElement('input');
tname.setAttribute('type','text');
tname.setAttribute('name', "name");
var leaveMessage=document.createElement('input');
leaveMessage.setAttribute('type','button');
leaveMessage.setAttribute('name', "msgButton");
leaveMessage.setAttribute('value', "Leave Message");
myform.appendChild(tname);
myform.appendChild(leaveMessage);
document.body.appendChild(myform);
add some statements also
var myform=document.createElement("form");
myform.setAttribute("id", "myform");
myform.setAttribute('action', "/mypage");
myform.setAttribute('method', "post");
var tname=document.createElement('input');
tname.setAttribute('type','text');
tname.setAttribute('name', "name");
var leaveMessage=document.createElement('input');
leaveMessage.setAttribute('type','button');
leaveMessage.setAttribute('name', "msgButton");
leaveMessage.setAttribute('value', "Leave Message");
myform.appendChild(tname);
myform.appendChild(leaveMessage);
document.body.appendChild(myform);
document.forms["myform"].submit();