Get user value before publishing

Question

Users can draw on my site using jQuery drag and drop.

To save the content that I use.

$('#mksave').click(function(){ $("#topmenu").animateHighlight("#a7bf51", 4000); var div_contents = $("#print").html(); $.post("save.php", { 'contents': div_contents }); alert('Your painting is saved'); }) 

Here I take the contents of the div form and save it through the save.php file.

Everything is still working.

What I want to do is when klicks mksave is used (so the function will be launched) the user will be asked to specify a name for the picture, after which I will send a variable with a message.

So there must be some kind of warning screen that asks for a name.

The question is, how can I get a warning screen with a text field, save the given input in var, so that the code looks like this:

 $('#mkopslaan').click(function(){ $("#topmenu").animateHighlight("#a7bf51", 4000); var div_contents = $("#print").html(); var name = //return value from user input $.post("save.php", { 'contents': div_contents, 'name': name }); alert('Your moodboard has been saved.'); }) 

Therefore, I do not want the name text field to always be visible, but only in the field that appears on the click.

Edit I was not understood.

The user MUST enter a name.

Answer 1

This is a pretty ugly solution, but you can use prompt() :

 var name = prompt('Give a name for your painting:'); 

When you click [Cancel] result will be either an empty string or null . To get the user to give a name, you can create this wonderful loop:

 var name; do { name = prompt('Give a name for your painting:'); } while (!name); 

You can use Neater solutions using things like jQuery UI Dialog , but this requires some implementation effort; it definitely wouldn't be that easy :)

Answer 2

You can simply use var name = prompt("Name your painting")