I need to show a prompt box when user clicks on save button which asks for name and description from user`. i.e.
I need to have 2 text fields and 2 buttons ok and cancel respectively on prompt box.
How can I do this in JavaScript/jquery? I searched a lot but did not find satisfactory solution.
Edit :
prompt("Please enter your name","Harry Potter");
above thing allows me to show 1 text filed , can I have another one there?
Unfortunately, the built-in prompt is not customizable, you'll have to build your own. As an example I've made this one for you : http://jsfiddle.net/wared/tm95G/. Currently the alert displays a query string to pass as GET parameters, but you can modify the code to get an array instead, just replace serialize with serializeArray (doc : http://api.jquery.com/serializeArray/).
<form action="javascript:void(0)">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">Click here</a></p>
<div class="my-prompt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<label>
<span>Name :</span>
<input name="name" type="text" />
</label>
<label>
<span>Description :</span>
<textarea name="desc" rows="4"></textarea>
</label>
<div>
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</form>
body, textarea {
font: normal 12px Arial;
}
.my-prompt {
display: none;
position: absolute;
top: 20px;
left: 50%;
margin-left: -135px;
width: 250px;
background: white;
border: 1px solid #ccc;
padding: 10px;
}
.my-prompt label {
display: block;
padding-right: 6px;
}
.my-prompt label * {
display: block;
width: 100%;
}
.my-prompt span {
display: block;
margin: .5em 0;
}
.my-prompt input, .my-prompt textarea {
padding: 2px;
border: 1px solid #ccc;
}
.my-prompt div {
padding-top: 10px;
text-align: center;
}
$(function () {
$('a').click(function (e) {
e.preventDefault();
$('.my-prompt').show();
});
$('.my-prompt').find('button').click(function () {
var el = $(this),
box = el.closest('.my-prompt').hide();
if (!el.siblings().addBack().index(this)) {
alert(box.find('label :input').serialize());
}
});
});
Add a jquery UI dialog. You can set this to a div. The did can contain any number of elements you want. If you make the dialog modal, then the background is also disabled.
The easy way: use prompt and show it twice. If you want two inputs in one popup, this can't be done.
var fname = prompt("what's your first name?");
var lname = prompt("what's your last name?");
The correct way: hide the document behind a transparent div, then render the modal dialog on top of it. Add a click handler to a button inside the dialog.
<body>
..
<div id="popup">
<div id="popup-content">
</div>
</div>
</body>
...
var $popup = $("#popup")
var $popupContent = $("#popup-content")
...
if($popup.is(":visible")) throw "Can't handle two popups at once";
$fname = $("<input>");
$lname = $("<input>");
$submit = $("<input>", {type: "button"}).on("click", popupDone);
$popupContent.empty().append(
$("<p>").append("first name:", $fname),
$("<p>").append("last name:", $lname),
$submit
)
function popupDone(){
//handle the data:
console.log("your name is " + $fname.val() + " " + $lname.val())
}
...
#popup{
position: fixed;
top: 0; left: 0;
background: rgba(0, 0, 0, 0.5) /* some nice overlay */
}
#popup-content{
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
padding: 10px;
margin: 10px; /* some nice positioning */
}
You can't customize plain javascript prompts, but you can show one after another.
HTML:
<input id="myButton" type="button" value="Example only Javascript" />
Javascript:
function askNameAndDesc() {
var promptName = window.prompt("Name", "Richard");
var promptDesc = null;
if (promptName !== null) {
promptDesc = window.prompt("Description", "Desc");
}
if (promptName !== null && promptDesc !== null) {
alert('User pressed ok twice');
}
}
// Attach javascript function
document.getElementById('myButton').onclick = askNameAndDesc;
Another solution is to use JqueryUI dialog.
HTML:
<input id="myButtonUI" type="button" value="Example JqueryUI" />
<div id="dialogModal" title="Dialog Example">
<input id="nameValue" type="text" value="Name" />
<input id="nameOk" type="button" value="Ok" />
<input id="nameCancel" type="button" value="Cancel" />
<br />
<input id="descValue" type="text" value="Description" />
<input id="descOk" type="button" value="Ok" />
<input id="descCancel" type="button" value="Cancel" />
</div>
Javascript:
// Create JqueryUI Dialog
$("#dialogModal").dialog({
height: 140,
width: 400,
autoOpen: false
});
// Show dialog on button click
$("#myButtonUI").on('click', function () {
$("#dialogModal").dialog('open')
});
// Dialog buttons Click Events
$("#dialogModal").on('click', function (ev) {
$target = $(ev.target);
$me = $(this);
if ($target.is("input[type='button']")) {
$me.dialog('close');
alert('User pressed on ' + $target.get(0).id);
}
});
You can see the both examples running here: http://jsfiddle.net/gBRWy/1/
prompt, you'll have to show it twice