I would like to update a text field within a webform with a variable from the url query string using javascript.
I do not have access to target the form id or name, only the field id and name
Example url: www.xyz.com?name=Chris
Example form code:
<form method="post">
<input type="text" name="Name" id="Name">
<input type="submit" value="Submit">
</form>
Appreciate the help
Regards,
Chris
Use the following function to get the value from the URL.
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Then use the following code to update the input with the value.
document.getElementsByName('Name').value = getParameterByName('name');
update
if you want to run the code when the page loads, just add the code to the bottom of the page in a script tag! The script will run after the page loads and would change the value on the input using the query string.
You can get & extract the query string in JavaScript using the following Lines.
var qrStr = window.location.search;
qrStr = qrStr.split("?")[1].split("=")[1];
to pass value....
function PassValue()
{
var paramVal = "Hello ";
window.open("Default.aspx?id=" + paramVal);
}
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick="PassValue();" onclick="Button1_Click" />
Related
I have a question text field. When I click on it display:none for h3 appears and for input tag dissappears. Then I can clear field and enter new name.
<td style="width:92%;">
<h3 id="question_text_1846" onclick="return onClickQuestion(1846,'text');">test name</h3>
<input type="text" id="question_text_input_1846" onkeypress="return OnKeyPress(event, 1846,'text');" name="question_text_input_1846" onblur="return onBlurQuestion(1846,'text');" placeholder="Question Text" value="test" class="form-control myInput" style="display:none;" />
<script type="text/javascript">
$("#question_text_1846").html(unescape($("#question_text_1846").html()));
</script>
</td>
The question is how to set new name(clear field and sendkeys) through selenium and may be javascript manipulations. I tried to use several methods , but it doesn't work.
element = driver.findElement(By.xpath("//h3[#id='question_text_"+ExtractQuestionTextInputID()+"']"));
actions = new Actions(driver);
actions.moveToElement(element);
actions.perform();
element.click();
element = driver.findElement(By.xpath("//input[#id='question_text_input_"+ExtractQuestionTextInputID()+"']"));
element.clear();
element.sendKeys("test_question_one");
And also with js
String qtid = "question_text_" + ExtractQuestionTextInputID();
String qtiid = "question_text_input_" + ExtractQuestionTextInputID();
js.executeScript("document.getElementById("+qtid+").setAttribute('style', 'display: none;')");
js.executeScript("document.getElementById("+qtiid+").setAttribute('style', '')");
This is the method for extracting id from tag attribute
public String ExtractQuestionTextInputID(){
String question_text_input_id = driver.findElement(By.xpath("//input[#value='New Question']")).getAttribute("id");
Pattern p = Pattern.compile("\\d+");
Matcher m = p.matcher(question_text_input_id);
String mid = new String();
while(m.find()) {
//System.out.println(m.group());
mid = m.group();
}
return mid;
}
I'm not sure if I understand it correctly but did you try setting attribute 'value' of the input to an empty string?
We have two form tools for lead capture at my org and I'm trying to create a spreadsheet which uses the same formula to create the UTM parameter links to track our marketing campaigns with Google Analytics.
Example formula
=SUBSTITUTE(IF(LEFT(G4,1)="[","--",CONCATENATE(G4,IF(ISERROR(FIND("?",G4,1))=TRUE,CONCATENATE("?"),CONCATENATE("&")),IF(C4="","","estate="),IF(C4="","",C4),IF(A4="","","&utm_campaign="),IF(A4="","",A4),"&utm_medium=",H4,"&utm_source=",D4,IF(E4<>"-",CONCATENATE("&utm_content=",E4),),IF(E4<>"-",CONCATENATE("",$F$2),)))," ","%20")
On our Pardot pages I've applied the details outlined in https://jennamolby.com/how-to-use-utm-parameters-to-capture-lead-source-in-pardot/ and have these hidden fields populating correctly.
My trouble is with the FormAssembly form. I can change the above formula to include the FormAssembly ID's, ie tfa_199 replaces utm_medium and this works fine but then I would need my spreadsheet users to know which form tool is being used on that landing page. Is there a way to apply the same formula to both form tools and then using JavaScript populate the values for these hidden fields?
I've tried switching the Pardot JavaScript with the FormAssembly labels to no luck.
Sample link
https://www.tfaforms.com/4757457/?tfa_98=Test%20Estate%20X999&tfa_197=Fonzi&tfa_199=social&tfa_200=Facebook&tfa_198=Feed
// Parse the URL
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
// Give the URL parameters variable names
var source = getParameterByName('utm_source');
var medium = getParameterByName('utm_medium');
var campaign = getParameterByName('utm_campaign');
var term = getParameterByName('utm_term');
var content = getParameterByName('utm_content');
var estate = getParameterByName('estate');
// Put the variable names into the hidden fields in the form"
document.querySelector("tfa_200 input").value = source;
document.querySelector("tfa_199 input").value = medium;
document.querySelector("tfa_197 input").value = campaign;
document.querySelector("tfa_201 input").value = term;
document.querySelector("tfa_201 input").value = content;
document.querySelector("tfa_196 input").value = estate;
</script>
The ideal result is regardless of whether the form is a Pardot or FormAssembly the hidden fields populate the same using the same formula.
Have you tried this:
https://stackblitz.com/edit/js-hgrwkn
If your input fields have Ids:
<input type="text" id="utm_source" name="tfa_200"/>
and your hidden fields:
<input type="hidden" id="tfa_200" name="utm_source"/>
then:
<script>
document.getElementById('tfa_200').value =
document.getElementById('utm_source').name;
</script>
Then document.getElementById('tfa_200').name will contain utm_source.
I have two html forms and I am posting input data from one html form to another html form.I want to retrieve values of variables that was posted using form 1 on the form 2.
<form name ="form1" id ="form1" method ="post" action = "form2.html>
<input id ="sendToForm2" type ="hidden" value ="send this to form2"/>
</form>
My question is how to get the value of the hidden variable sendToForm2 on form 2 once it is posted from form 1 to form 2 using javascript.
You can't use POST method because with a plain HTML page you do not have HTTP headers but HTML page code itself and URL (with query string).
What you can do is to use GET instead of POST then parse query string to extract them:
<form name ="form1" id ="form1" method ="GET" action = "form2.html>
<input id ="sendToForm2" type ="hidden" value ="send this to form2"/>
</form>
Then in your form2.html you can use this function (from this post on SO) to parse query string:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Now (let me use jQuery) you can access them with this:
<form ...>
<input id ="sentFromForm1" type ="hidden" value =""/>
</form>
</script>
$("#sentFromForm1").val(getParameterByName("sendToForm2"));
</script>
<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 want to access Javascript variables in JSP code. How can I do that?
JavaScript variable is on client side, JSP variables is on server side, so you can't access javascript variables in JSP. But you can store needed data in hidden fields, set its value in client and get it on server over GET or POST.
Client side:
<script type="text/javascript">
var el = document.getElementById("data");
el.value = "Needed_value";
</script>
<form action="./Your_JSP.jsp" method="POST">
<input id="data" type="hidden" value="" />
<input type="submit" />
</form>
server side:
<%
if (request.getParameter("data") != null) { %>
Your value: <%=request.getParameter("data")%>
<%
}
%>
I came across the same issue. I wanted to fetch couple of data in jsp. What I did is, in javascript function I concatenated the data in one variable with delimiter and passed that variable in parameter like this.
function myname()
{
var fname = "FirstName";
var lname = "LastName";
var fullname = fname+","+lname;
document.location.href = "demopage.jsp?name="+fullname;
}
And then in jsp page, we can fetch the full name as,
<c:set var="varname" value='<%= request.getParameter("name") %>' />
Now we can split the first name and last name using delimiter ','.
function call()
{
var name="xyz";
window.location.replace=("a.jsp?m="+name);
}
String name=request.getParameter("name");
if(name!=null){
out.println(name);
}