how to pass value to pop up window using javascript function? - javascript

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.

Related

Clicking submit button opens print preview

When clicking the submit button, within Chrome, the print preview window is opened just as it would if you pushed CTRL + P. I'm absolutely baffled. Also, nothing gets printed to the console even when text is entered into the 'myinput' input field.
html
<div class="subscribeform">
<input class="myinput">
<input placeholder="Enter Email">
<button class="subscribesubmit1" type='submit'>
Submit
</button>
</div>
javascript
<script type="text/javascript">
$('.subscribesubmit1').click(function() {
var myinput = $('.myinput').val();
print(myinput)
});
</script>
Thanks for your help
Try this:
$('.subscribesubmit1').click(function() {
var myinput = $('.myinput').val();
console.log(myinput);
});
The print() method prints the contents of the current window.
And if you are new to javascript id suggest that you don't jump straight to jquery

Open a url in new and same tab again and again

I'm unable to find the answer.
How can I use window.open to open a link in a new tab?
Repeated calling should reload that same tab and not open a new one.
I've a button when clicked should load an url. Repeated click should reload in the same tab/window.
You need to pass a name as the second parameter to window.open
As long as the tab with that name has not been closed, it will be reused.
You can try this
window.open('http://www.example.com','mywindow');
JSFiddle : https://jsfiddle.net/p26c2atz/
In plain JS
<form>
<input type="button" id="openWindow" value="Open Window" onclick="newTab()">
</form>
<script>
function newTab() {
var form = document.createElement("form");
form.method = "GET";
form.action = "http://www.example.com";
form.target = "newWin";
document.body.appendChild(form);
form.submit();
}
</script>
You can see it in action in https://jsfiddle.net/jprbj21u/
Other way will be:
<form>
<input type="button" id="openWindow" value="Open Window" onclick="window.open('http://www.example.com','newWin')">
</form>
The link will open in a tab named "newWin". As long as you open the same window any new URL will load on it.
Here you can do change target after focusout. I tested and its work.
Link
<script type="text/javascript">
$('a').focusout(function(e) {
$(this).attr('target','_self');
});
</script>
window.open(url,'someconstant',"width=600,height=700")
Here on click-event, there will be a new window opened with the instance named 'someconstant', when you do a click again, the window will be opened again overwriting the previous window as your instance is same!.
Hope this helped.! Happy Coding!

populate values from parent window in pop up using javascript

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
}

Creating a popup with values from a form JavaScript

I am trying to open a new window with values received from textfield with id "name";
<form name="myForm">
<input type="text" id="name">
</form>
<button onclick="openWindow();">Open</button>
And this is the javascript:
function openWindow() {
newWindow = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
newWindow.document.write("<h1>"+document.myForm.name.value+"</h1>");
}
It does it ok, but why does it empty the form values?
And how can i center this new window? Maybe height=window.height()/2 ?
disable the onclick event, it's submitting the form.
Add this to the form tag, then at the bottom of the function return false.
onsubmit="return openWindow();">
It works fine on my end, tried your code. Dont forget to write something inside the input box, before you click the button. if it doesn't work
Try this instead:
newWindow.document.write("<h1>"+document.getElementById('name').value+"</h1>");

Handling popup window with javascript

I have the base page which has a button for "Add Link", upon click you get a popup window. The popup window has a form field to enter the link. Once the link is entered, I would like to refresh the base page - the base page should no more be "Add Link" but changed to the hyperlink entered in the popup window.
I am new to Javascript and html. I have by far managed to create a button on the base page and on click displays a popup window with form field for the link. However I am unable to refresh the base page with the new link.
Below is my code:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add Link</button>
<p id="demo"></p>
<script>
function myFunction()
{
prompt("Please Enter the Link");
}
</script>
</body>
</html>
What the following will do is every time the button is hit, the prompt is shown, and once that prompt closes the script will add a new <a href=value>New Link</a> tag to the demo div.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add Link</button>
// This needs to be a 'div' so it can have elements inside it.
<div id="demo"></div>
<script>
var demo = document.getElementById('demo');
function myFunction()
{
// Stores the value from the prompt() in the variable 'value'
var value = prompt("Please Enter the Link");
var link = document.createElement('a'); // Create an <a> tag
link.setAttribute('href', value); // Set the link's URL to the value.
link.innerHTML = "New Link"; // Set the link's display text.
demo.appendChild(link); // Add the link to the demo div.
}
</script>
</body>
</html>
Hopefully the comments explain how it works, if not just ask here :)
Try this:
<button onclick="myFunction()">Add Link</button>
<p id="demo"></p>
<script>
function myFunction()
{
var url = prompt("Please Enter the Link");
window.location = url;
}
</script>
http://jsfiddle.net/douglasloyo/rtghQ/
the only value that is acceptable in js fiddle is going to be http://jsfiddle.net/
Cheers
You'll need some way to store the link on the server; refreshing the page will cause everything to be re-executed, and you can't really dynamically alter the html file from itself. Something like django with a postgresql database is pretty easy to set up, but that's beyond the scope of your question.
That said, if you're okay with having the link not survive when the page is refreshed, you can use a text area instead of a prompt. Here's an example if you have jQuery:
<head>
<script>
$(function() {
$("#addLink").click(function() {
var linkStr = document.getElementById("linkInput").value;
$("#linkArea").html("Your link");
});
})
</script>
</head>
<span id="linkArea">
<input id="addLink" type="submit" value="Add Link: ">
<input id="linkInput" type="text" value="(enter link)">
</span>
Here's a jsfiddle to try it out:
http://jsfiddle.net/tRcUp/
Oh, and generally you should put scripts in the head tag.

Categories

Resources