CODEWITHSUNDEEP
javascript
John Adawan
John Adawan

Reputation: 14107

Javascript - Waiting for event before proceeding

I'm trying to create ONE javascript function that can do the following:

  1. onclick, a form popup in a floating div (this part is okay)
  2. the script then some how wait for data to be entered into the form before returning the value in the form.

You can say I'm trying to create my own version of javascript prompt.

The problem is how to do action #2?

Any help appreciated.

Upvotes: 2

Views: 3658

Answers (2)

Paolo Bergantino
Paolo Bergantino

Reputation: 488374

Any reason for the emphasis of ONE Javascript function?

function showModal() {
    var div = document.createElement('div');
    div.id = 'myprompt';
    div.innerHTML = '<form id="test" onsubmit="return handleModal();"><input type="text" name="first"></form>';
    document.body.appendChild(div);
}

function handleModal() {
    alert('Hello, ' + document.getElementById('test').first.value);
    return false;
}

showModal();

Check this out in action. Just type something and press enter. Styling would be done via CSS.

A big part of Javascript is events: do this when this happens. You shouldn't try to fight it.

As you can see, this gets hairy fast. You should look into the many, many, libraries and plugins that handle this very nicely. I personally recommend jQuery and Thickbox, jModal or Impromptu.

Upvotes: 0

Eugene Yokota
Eugene Yokota

Reputation: 95604

jQuery modal dialog boxes. See examples in SimpleModal.

Upvotes: 2

Related Questions