JavaScript function that creates HTML form and returns user input

Question

I want to create a JavaScript function that will create an HTML form and return the input the user enters into the form. My stupid first attempt was something like this:

function getInput() {
    $('#somediv').html( "<input type='button' id='mybutton' name='Click Me'></input>" );
    $('#mybutton').click( function() { return "result"; } );
}

result = getInput();

alert( result );

(The actual situation is more complex, the user has to first enter some text and then choose between several different buttons, and the return value depends on the entered text and the chosen button, but I think those are peripheral issues so I left them out). If I run this as written, I'll get alert "undefined" where what I want is alert "result". Essentially I want the function not to return until it's explicitly told to do so. Is there any way to achieve this? If not, what's the simplest workaround that's similar in spirit to the above?

A very similar question was posed here: JavaScript pausing execution of function to wait for user input. I'm afraid I just couldn't understand the responses well enough to adapt them to my particular case. Perhaps someone could advise how to do so, or alternatively starting from scratch would be fine too.

You aren't actually returning anything from your `getInput()` function, your just creating some HTML and binding a function. — Jack, Nov 02 '12 at 02:17
Yes - I know - sorry if I was unclear, this is exactly my problem, the fn as written doesn't return anything because it returns right after doing the things you mentioned ... what I want is to make it NOT return UNTIL the button is clicked, in which case it WOULD return something meaningful. — baixiwei, Nov 02 '12 at 02:28

score 2 · Accepted Answer · answered Nov 02 '12 at 02:27

2

It is impossible to wait for user input in a form like that. You need to break it up in two parts to handle the asynchronous request.

function getInput(callback) {
    $('#somediv').html( "<input type='button' id='mybutton' name='Click Me'></input>" );
    $('#mybutton').click( function() { callback("result"); } );
}

function processInput (result) {
    alert(result);
}

getInput(processInput);

answered Nov 02 '12 at 02:27

epascarello

204,599
20
195
236

Thanks! I think I get it and this looks like exactly what I needed. – baixiwei Nov 02 '12 at 02:53

score 1 · Answer 2 · answered Nov 02 '12 at 02:41

I think what your looking for is event delegation, using event delegation you can bind your function to your #mybutton before your button is even added to your form.

For example using .on()

 $(document).on('click', '#mybutton', function() {
  //your code here
});

The basic idea behind event delegation is to take advantage of the fact that in JavaScript events bubble up, so what you do is bind the event to a higher element in the DOM and then check to see where it originating from, so long as the higher level exists at the time you bind the event your OK.

The poster is trying to get the input from the click like you would with prompt(). It has nothing to do with binding the event. — epascarello, Nov 02 '12 at 02:45

JavaScript function that creates HTML form and returns user input

2 Answers2