getting user input to set new window parameters

Question

I am trying to let the user set the height width and color for a new pop up window here is some example code of what i have been trying

<input type = "button" value = "Open New Window" 
                onclick = "NewWin = window.open('','NewWin',
                    'toolbar=no,status=no,width=200,height=document.getElementsByName('height')[0].value');" />

i have also tried setting height to a variable and saying height height=heightVar and that didnt work. Is there a bit of syntax that im using wrong?

joggienl · Accepted Answer · 2014-11-21 20:23:40Z

You will have to separate the javascript from the markup. That's a common best practice for developing in HTML/Javascript. I've put an example in jsfiddle:

HTML:

<h1>New Window properties</h1>

<div>
    <label for="windowWidth">Width:</label><br />
    <input id="windowWidth" type="number" value="200" />
</div>

<div>
    <label for="windowHeight">Height:</label><br />
    <input id="windowHeight" type="number" value="200" />
</div>

<div>
    <input id="newWindow" type="button" value="Open New Window" />
</div>

Javascript:

var newWindowButton,  // Reference to the button we can click on
    newWindowWidth,   // We can provide a width for the new window, defaults to 200 px
    newWindowHeight;  // We can provide a height for the new window, defaults to 200 px

newWindowButton = document.getElementById('newWindow');
newWindowButton.onclick = function () {
    var newWindowUrl,
        newWindowName,
        newWindowOptions;

    newWindowWidth = document.getElementById('windowWidth').value;
    newWindowHeight = document.getElementById('windowHeight').value;
    newWindowUrl = '';
    newWindowName = 'NewWin';    
    newWindowOptions = 'toolbar=no,status=no,width='+newWindowWidth+',height='+newWindowHeight;    

    window.open(newWindowUrl, newWindowName, newWindowOptions);
};

http://jsfiddle.net/yg9jeyza/2/

Md Ashaduzzaman · Accepted Answer · 2014-11-21 20:08:24Z

0

Concatenate the user input value with the height and width property of the new window. Try this way,

HTML :

Height : <input type="text" id="height" /><br/>
Width : <input type="text" id="width" />

<input type="button" id="newWindow" value="New Window" />

javaScript :

newWindow.onclick = function(){
    window.open("http://www.google.com/", "A", "height="+ document.getElementById("height").value + "," + "width=" + document.getElementById("width").value);
};

Or, jQuery :

$("#newWindow").on("click", function(){
    window.open("http://www.google.com/", "A", "height="+ $('#height').val() + "," + "width=" + $("#width").val());
});

jsFiddle

answered Nov 21, 2014 at 20:08

Md Ashaduzzaman

4,0462 gold badges20 silver badges34 bronze badges

Comments

Md Ashaduzzaman · Accepted Answer · 2014-11-21 20:26:56Z

0

<input id="height" type="number" />
<input type="button" value="Open New Window" onclick="openNewWindow()" />

<script type="text/javascript">
      openNewWindow = function () {
      var height = document.getElementById('height').value;
      window.open('','newWin','toolbar=no,status=no,width=200,height=' + height);
  }
</script>

If you don't use jQuery, you don't need to use index in getElementById

edited Nov 21, 2014 at 20:26

Md Ashaduzzaman

4,0462 gold badges20 silver badges34 bronze badges

answered Nov 21, 2014 at 20:08

user5454381

3 Comments

johanvdv Over a year ago

so i tried this and it doesnt work <button onclick="myFunction()">Try it</button> <script> function myFunction() { var heightVar = 500; var myWindow = window.open("", "", "width=200, height=heightVar"); } </script> whats wrong with this?

Md Ashaduzzaman Over a year ago

"width=200, height=heightVar" won't work, try "height=" + heightVar instead. as that will concatenate the value. Earlier will treat heightVar as a string.

user5454381 Over a year ago

Thanks for the correction! @AshadShanto I didn't noticed that

Collectives™ on Stack Overflow

getting user input to set new window parameters

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related