How to get input via a popup and place text in a variable via javascript/jquery

Question

I have a button on my page. When clicked a popup box should appear allowing the user to enter text. When OK/Submit is pressed, my jscript will then perform some functions using that inputted data. Very straightforward, but I just can't figure out how to do this.

Thanks!

Reinder Wit · Accepted Answer · 2012-07-06 14:12:48Z

40

in it's simplest form, you could use prompt(question, default): (taken from w3schools: http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt)

function myFunction(){
    var x;
    var name=prompt("Please enter your name","Harry Potter");
    if (name!=null){
       x="Hello " + name + "! How are you today?";
      alert(x);
   }
}

anything else would require lots of javascript & CSS to create layers with buttons and click events on those buttons

edited Jul 6, 2012 at 14:12

answered Jul 6, 2012 at 14:07

Reinder Wit

6,6551 gold badge29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Over a year ago

Awesome, works perfectly, but I was wondering if its possible to make this box bigger, like a squarish text input box?

Reinder Wit Over a year ago

nope, it's a browser specific window. Like i said, you'll have to use javascript/CSS to create boxes like that. there's probably libraries available to use for this, like jQuery UI jqueryui.com/demos/dialog

The Alpha · Accepted Answer · 2012-07-06 14:13:32Z

0

Paste this code inside your head tags between script tags

HTML

<button id="button">Get Text</button>

JS

window.onload=function()
{
    var el=document.getElementById('button');
    el.onclick=function(){
        var my_text=prompt('Enter text here');
        if(my_text) alert(my_text); // for example I've made an alert
    }
}

DEMO.

answered Jul 6, 2012 at 14:13

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Collectives™ on Stack Overflow

How to get input via a popup and place text in a variable via javascript/jquery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related