I have a jsp page with a link.
View
When the link is clicked PopUp.jsp opens in another window.
I would like to populate this window with values from the first jsp.
Example:
Parent.jsp
<input type="text" id="name"/>
<input type="text" id="city"/>
View
PopUp.jsp
<script>
function setThis(){
document.getElementById("pname").value=document.getElementById("name").value;
document.getElementById("pcity").value=document.getElementById("city").value;
}
</script>
<body onload="setThis();">
<input type="text" id="pname"/>
<input type="text" id="pcity"/>
</body>
I can't figure out why it doesn't work. Is there a problem with my code?
You can use window.open method and use the object returned by that to access the new window instance. The returned object can be used to access properties and methods of the new window provided it complies with Same origin policy security requirements.
Assuming you have jQuery loaded to your page (If not,you can use vanilla javascript to wire up your click event to your code. use onclick event)
$(function(){
$("#popUp").click(function(e){
e.preventDefault();
var url="url to the new page here";
var newWindow = window.open(url);
var pname="read from this page";
var pcity="read from this page";
newWindow.setThis(pname,pcity);
});
});
Update your setThis to accept these values
function setThis(pname,pcity)
{
.// do something
}
Related
I have a PHP page(main) and would like to call another PHP page(printpage) on mouse click. I need to pass a large text.
I do not want to pass it as a url parameter as it will be too big.
I guess I want to pass it as an ajax but I want to open the printpage so I can print it in the browser.
I started with this but the paramater will be too big
$('#MyModal .print').click(function() {
var run = "../js/print.php?ref="+ref;
win = window.open(run, '_blank');
win.focus();
});
I am familar with the ajax statement but have not used to open a new page.
You can use an invisible form with a target="_blank" and method="post" and submit it, thereby sending a POST request in a new window:
<form name="printForm" style="display: none;" action="../js/print.php" method="post" target="_blank">
<input type="hidden" name="ref">
</form>
$('#MyModal .print').click(function() {
document.forms.printForm.ref.value = ref
document.forms.printForm.submit()
})
Then you get the ref value in PHP as $_POST['ref']
I am new to html and javascript coding. So i have encountered a problem where i have to send a variable to a specific page and call that function out when needed.
function submit() {
firstname = document.getElementByName("firstname");
document.write(firstname);
}
<html>
<body>
<form>
<p>firstname: <input type="text" name="firstname" />
</p>
<input type="submit" onclick="submit()" />
</from>
</body>
</html>
now what should i do if i want to display the first name on a specific html page in javascript. For example, if i want to display the person name on third page then what should i do.
When you need to pass on an information from one page to another in the web, the general way you do is to use server side sessions. As I can see that there's no server side languages you are using, I believe you have only two options:
Using Query String Parameters (this works all the time).
Using Cookies (if the user has enabled it).
Using Local Storage (if your browser supports it).
For the first option, see How can I get query string values in JavaScript? For the second option, it's been answered a lot of times, so I'll leave the implementation with you: Set cookie and get cookie with JavaScript.
For the second one, you just need to use localStorage object this way:
function submit() {
var firstname = document.getElementByName("firstname");
document.getElementById("output").innerHTML = firstname;
if (!!window.localStorage) {
localStorage.setItem('firstname', firstname);
}
return false;
}
<form onsubmit="return submit();">
<p>firstname: <input type="text" name="firstname" /></p>
<input type="submit" onclick="return submit();" value="Save" />
</form>
<div id="output"></div>
I have also made some changes in your form submission method. And in your new page, you just need to use this code to get the item.
function getname() {
return localStorage.getItem('firstname');
}
There are multiple ways to resolve this issue but it is based upon your requirements. Are you going to third or any other page via a server navigation or is it client-side navigation. In any case you can use localstorage which is supported by almost all latest browser.
On first page you can do localStorage.setItem('firstName', 'Tom'); localstorage is globally available keyword.
On any other page then you can get the value by
var name = localStorage.getItem('firstName');
Other options you can look at cookies, querystring and session storage
when redirecting to next page, bind parameters in redirecting url like this,
window.location.href = "http://yoursite.com/page?data1=one&data2=two";
And fetch them from retreiving end like below,
var url_string = "http://yoursite.com/page?data1=one&data2=two";
var url = new URL(url_string);
var parameter_1 = url.searchParams.get("data1"); //returns "one"
var parameter_2 = url.searchParams.get("data2"); //returns "two"
I have a 'parent' page that is using the following bit of code to pull in a form from a different page on the same domain. There are reasons why I can't just place the form directly on the 'parent'.
<script type="text/javascript">
jQuery("#ai_temp_profile_edit").load(
"https://example.com/form/ #profile-edit-form",
function() {}
).hide().fadeIn(1000);
</script>
The form that is pulled in looks like this:
<form action="https://example.com/form/" method="post" id="profile-edit-form" class="standard-form base" target="hiddenFrame">
<label for="field_1">Name</label>
<input id="field_1" name="field_1" type="text" value="Joey-Jojo Jr. Shabadoo">
<input type="submit" name="profile-group-edit-submit" id="profile-group-edit-submit" value="Save Changes " />
<input type="hidden" name="field_ids" id="field_ids" value="1" />
<input type="hidden" id="_wpnonce" name="_wpnonce" value="a62f8d5fec" />
<input type="hidden" name="_wp_http_referer" value="/form/" />
</form>
When 'submit' is clicked, https://example.com/form/ is opened in a hidden iframe and the user name gets properly saved. This all works well.
I would like the user name on the currently loaded 'parent' page to update via jquery, so that the user has some immediate visual feedback that the name change has taken place.
My approach has been to try and take the value out of the 'field_1' input when 'submit' has been clicked, and pass that variable onto a div in the parent page with an id of 'display_name'.
$(document).ready(function(){
function nameUpdate(){
$("#profile-group-edit-submit").click(function () {
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
}
nameUpdate();
});
I've also tried adding window.parent.
before the the #display_name selector section and it didn't change anything.
I've used this approach on another button/div combo on the same page and it works, the difference is that that particular button is in an iframe, not loaded by jquery. So I'm guessing my problem is related to that fact.
I've googled around, but have run out of ideas of how to phrase my question, what to look for, etc...
Any help would be greatly appreciated. Thanks!
Edit: For clarity, the div w/ id #display_name won't update.
Use jquery to handle the form submission.
$(document).ready(function(){
$('#profile-edit-form').submit(function(){
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
});
EDIT:
Due to your loading the form dynamically you need to bind the submit function after the load. So...
$(document).ready(function () {
var formLoaded = function () {
$('#profile-edit-form').submit(function () {
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
};
$("#ai_temp_profile_edit").load(
"https://example.com/form/ #profile-edit-form",
formLoaded
).hide().fadeIn(1000);
});
If I am understanding it correctly, your problem is "display_name" field is not getting updated with the latest value.
If this is the problem then can you try below thing?
Instead of
$("#display_name").text(updateName);
try using-
$("#display_name").val(updateName);
As per the documentation on jQuery site Val() works well with form Elements whereas text won't.
More on Val() method- https://api.jquery.com/val/#val2
I want to open new window from existing form.When I am clicking on new window in form then new form should open with results of value entered,but new window form is opening with main page,not able to get text box value from parent form.
How to call textfield input value in popup window from parent window using javascript?
//currently I'm using following code:
<script type="text/javascript">
function pop_up5() {
var l_url=window.opener.document.getElementById("name").value;
window.open(l_url,'''','scrollbars=yes,resizable=no,width=550,height=400');
}
</script>
Assign window.open() to a variable so you can access it's elements.
<form>
<input type="textbox" id="txt" />
<input type="button" id="btn" value="Open window" />
</form>
<script>
document.getElementById('btn').onclick = function(){
var myWindow = window.open();
myWindow.document.body.innerHTML = document.getElementById('txt').value;
};
</script>
Suppose your text field's id is myTextField, whatever you named it. if it has no id, set a id for it. then, in the popup window, you can use JavaScript parent.document.getElementById('myTextField').value to get the value of the textfield.
I have a pop up window function where when a button is clicked the window does pop up. Now the pop up window does not display anything, for a test I want the pop up window to display the word "Session". But I don't know how to do this.
Am I supposed to write the word "Session" in another page and link to that page or is it possible to write the word "Session" on the same page and link it to that section of the page?
I want the latter to happen but I don't know how to do it.
Below is my code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/javascript">
function openSessionPopup (session) {
window.open(session,
'window',
'width=500,height=500,scrollbars=yes,status=no');
}
</script>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="openSessionPopup(this.href); return false" /></p>
</form>
</body>
Try something like this:
var win = window.open("about:blank", null, "width=400,height=300");
var doc = win.document;
doc.open("text/html");
doc.write("Session");
doc.close();
Try it on JSFiddle.
Alternatively, you can create a new page with the content you want and open that:
window.open("my-new-page.html", null, "width=400,height=300");
If you want to write the word session into the popup.. be sure to use " before and after since it's string... like this window.open("session", 'window', ...
" or ' will do the job either way.
Your popup typically displays another page when it appears. It is this other page that will have the content you want displayed.
This code would never work. When you pass in this.href, the this refers to the input element on which you've clicked. Input elements do not have an 'href' attribute, so you're passing in an undefined value.
You can pass the href as the argument for the "session" parameter. You see this works by putting this code into a file called "question.html" and testing out the button.
Replace the href with the page you want to display.
onClick="openSessionPopup('question.html'); return false"
First parameter in windows.open function is URL. So when you passed an empty value it opened the window with url about:blank (empty page).
If you want open url http://example.com/ in popup window you must use your function as:
openSessionPopup('http://example.com/');