How to add textarea tag as input element in sweet alert using jQuery
7
I don't understand how to add a textarea type
in sweet alert.
Similar to type: "input"
$('#saveBtn).click(function(){
swal({
title: "Enter your Name!",
text: "your name:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something" },
function(inputValue){
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
});
This works fine. But if I use type: "textarea" instead of type: "input"
This gives error like this:
sweetalert.min.js:1 Uncaught ReferenceError: logStr is not defined
Thanks for help.
javascript jquery html css3 sweetalert
edited Jun 13 '16 at 13:43
Pranav C Balan
84.8k1386114
asked Jun 13 '16 at 13:23
Prafull PolPrafull Pol
4515
add a comment |
7
I don't understand how to add a textarea type
in sweet alert.
Similar to type: "input"
$('#saveBtn).click(function(){
swal({
title: "Enter your Name!",
text: "your name:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something" },
function(inputValue){
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
});
This works fine. But if I use type: "textarea" instead of type: "input"
This gives error like this:
sweetalert.min.js:1 Uncaught ReferenceError: logStr is not defined
Thanks for help.
javascript jquery html css3 sweetalert
edited Jun 13 '16 at 13:43
Pranav C Balan
84.8k1386114
asked Jun 13 '16 at 13:23
Prafull PolPrafull Pol
4515
Show what you've coded...
– Guruprasad Rao
Jun 13 '16 at 13:24
$('#saveBtn,#createNewBtn').click(function(){ swal({ title: "Enter your Name!", text: "your name:", type: "input", showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: true, animation: "slide-from-top", inputPlaceholder: "Write something" }, function(inputValue){ if (inputValue === false) return false; if (inputValue === "") { swal.showInputError("You need to write something!"); return false } swal("Nice!", "You wrote: " + inputValue, "success"); }); });
– Prafull Pol
Jun 13 '16 at 13:32
@Guruprasad. Could you please tell me where i am doing mistake
– Prafull Pol
Jun 13 '16 at 13:39
add a comment |
7
7
7
3
I don't understand how to add a textarea type
in sweet alert.
Similar to type: "input"
$('#saveBtn).click(function(){
swal({
title: "Enter your Name!",
text: "your name:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something" },
function(inputValue){
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
});
This works fine. But if I use type: "textarea" instead of type: "input"
This gives error like this:
sweetalert.min.js:1 Uncaught ReferenceError: logStr is not defined
Thanks for help.
javascript jquery html css3 sweetalert
edited Jun 13 '16 at 13:43
Pranav C Balan
84.8k1386114
asked Jun 13 '16 at 13:23
Prafull PolPrafull Pol
4515
I don't understand how to add a textarea type
in sweet alert.
Similar to type: "input"
$('#saveBtn).click(function(){
swal({
title: "Enter your Name!",
text: "your name:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something" },
function(inputValue){
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
});
This works fine. But if I use type: "textarea" instead of type: "input"
This gives error like this:
sweetalert.min.js:1 Uncaught ReferenceError: logStr is not defined
Thanks for help.
javascript jquery html css3 sweetalert
javascript jquery html css3 sweetalert
edited Jun 13 '16 at 13:43
Pranav C Balan
84.8k1386114
asked Jun 13 '16 at 13:23
Prafull PolPrafull Pol
4515
edited Jun 13 '16 at 13:43
Pranav C Balan
84.8k1386114
asked Jun 13 '16 at 13:23
Prafull PolPrafull Pol
4515
edited Jun 13 '16 at 13:43
Pranav C Balan
84.8k1386114
edited Jun 13 '16 at 13:43
Pranav C Balan
84.8k1386114
edited Jun 13 '16 at 13:43
Pranav C Balan
84.8k1386114
84.8k1386114
asked Jun 13 '16 at 13:23
Prafull PolPrafull Pol
4515
asked Jun 13 '16 at 13:23
Prafull PolPrafull Pol
4515
asked Jun 13 '16 at 13:23
Prafull PolPrafull Pol
4515
4515
Show what you've coded...
– Guruprasad Rao
Jun 13 '16 at 13:24
$('#saveBtn,#createNewBtn').click(function(){ swal({ title: "Enter your Name!", text: "your name:", type: "input", showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: true, animation: "slide-from-top", inputPlaceholder: "Write something" }, function(inputValue){ if (inputValue === false) return false; if (inputValue === "") { swal.showInputError("You need to write something!"); return false } swal("Nice!", "You wrote: " + inputValue, "success"); }); });
– Prafull Pol
Jun 13 '16 at 13:32
@Guruprasad. Could you please tell me where i am doing mistake
– Prafull Pol
Jun 13 '16 at 13:39
add a comment |
Show what you've coded...
– Guruprasad Rao
Jun 13 '16 at 13:24
$('#saveBtn,#createNewBtn').click(function(){ swal({ title: "Enter your Name!", text: "your name:", type: "input", showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: true, animation: "slide-from-top", inputPlaceholder: "Write something" }, function(inputValue){ if (inputValue === false) return false; if (inputValue === "") { swal.showInputError("You need to write something!"); return false } swal("Nice!", "You wrote: " + inputValue, "success"); }); });
– Prafull Pol
Jun 13 '16 at 13:32
@Guruprasad. Could you please tell me where i am doing mistake
– Prafull Pol
Jun 13 '16 at 13:39
Show what you've coded...
– Guruprasad Rao
Jun 13 '16 at 13:24
Show what you've coded...
– Guruprasad Rao
Jun 13 '16 at 13:24
$('#saveBtn,#createNewBtn').click(function(){ swal({ title: "Enter your Name!", text: "your name:", type: "input", showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: true, animation: "slide-from-top", inputPlaceholder: "Write something" }, function(inputValue){ if (inputValue === false) return false; if (inputValue === "") { swal.showInputError("You need to write something!"); return false } swal("Nice!", "You wrote: " + inputValue, "success"); }); });
– Prafull Pol
Jun 13 '16 at 13:32
$('#saveBtn,#createNewBtn').click(function(){ swal({ title: "Enter your Name!", text: "your name:", type: "input", showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: true, animation: "slide-from-top", inputPlaceholder: "Write something" }, function(inputValue){ if (inputValue === false) return false; if (inputValue === "") { swal.showInputError("You need to write something!"); return false } swal("Nice!", "You wrote: " + inputValue, "success"); }); });
– Prafull Pol
Jun 13 '16 at 13:32
@Guruprasad. Could you please tell me where i am doing mistake
– Prafull Pol
Jun 13 '16 at 13:39
@Guruprasad. Could you please tell me where i am doing mistake
– Prafull Pol
Jun 13 '16 at 13:39
add a comment |
3 Answers
3
active
oldest
votes
10
You can't use textarea as type since the sweetalert not support that.
The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function.(Taken from here)
Instead you can use html markup with text option by setting html option true. But in this way you can't get value inside the textarea as callback variable. For that give an id to the textarea and get value using that.
swal({
title: "Enter your Name!",
text: "<textarea id='text'></textarea>",
// --------------^-- define html element with id
html: true,
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function(inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
// get value using textarea id
var val = document.getElementById('text').value;
swal("Nice!", "You wrote: " + val, "success");
});<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>answered Jun 13 '16 at 13:38
Pranav C BalanPranav C Balan
84.8k1386114
add a comment |
6
The original SweetAlert plugin is currently unsupported and you probably won't see textarea functionality in it. I created SweetAlert2 which has the textarea functionlaity:
swal({
title: 'Input something',
input: 'textarea'
}).then(function(result) {
if (result.value) {
swal(result.value)
}
})<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>Textarea example in SweetAlert2 documentation ↗
The transition from SweetAlert to SweetAlert2 is easy, here's the migration guide.
answered Jun 13 '16 at 16:47
Limon MonteLimon Monte
25.9k26112151
add a comment |
1
If you are using sweetalert2 or want to use sweetalert2, you can include these:
function openSwal(){
swal({
title: "Are you sure you want write somethin' in text area?",
input: "textarea",
inputPlaceholder: "Enter somethinn",
showCancelButton: true,
cancelButtonText: 'Cancel',
confirmButtonText: "Submit ",
inputValidator: function(value) { // validates your input
return new Promise(function(resolve, reject) {
if (value != '' && value != null) {
// document.getElementById('closeComment').value = value; // assign this to other elements in your form
swal("Success!", "You comment: " + value, "success");
// call other functions or do an AJAX call or sumbit your form
}
else {
reject('Please enter a valid text');
}
});
}
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.js"></script>
<button id="something" onclick="openSwal();">Open Sweet Alert</button>You can write textarea instead of text
answered Nov 13 '18 at 20:57
nikhilmethnikhilmeth
327
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f37790965%2fhow-to-add-textarea-tag-as-input-element-in-sweet-alert-using-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
10
You can't use textarea as type since the sweetalert not support that.
The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function.(Taken from here)
Instead you can use html markup with text option by setting html option true. But in this way you can't get value inside the textarea as callback variable. For that give an id to the textarea and get value using that.
swal({
title: "Enter your Name!",
text: "<textarea id='text'></textarea>",
// --------------^-- define html element with id
html: true,
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function(inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
// get value using textarea id
var val = document.getElementById('text').value;
swal("Nice!", "You wrote: " + val, "success");
});<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>answered Jun 13 '16 at 13:38
Pranav C BalanPranav C Balan
84.8k1386114
add a comment |
10
You can't use textarea as type since the sweetalert not support that.
The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function.(Taken from here)
Instead you can use html markup with text option by setting html option true. But in this way you can't get value inside the textarea as callback variable. For that give an id to the textarea and get value using that.
swal({
title: "Enter your Name!",
text: "<textarea id='text'></textarea>",
// --------------^-- define html element with id
html: true,
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function(inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
// get value using textarea id
var val = document.getElementById('text').value;
swal("Nice!", "You wrote: " + val, "success");
});<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>answered Jun 13 '16 at 13:38
Pranav C BalanPranav C Balan
84.8k1386114
add a comment |
10
10
10
You can't use textarea as type since the sweetalert not support that.
The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function.(Taken from here)
Instead you can use html markup with text option by setting html option true. But in this way you can't get value inside the textarea as callback variable. For that give an id to the textarea and get value using that.
swal({
title: "Enter your Name!",
text: "<textarea id='text'></textarea>",
// --------------^-- define html element with id
html: true,
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function(inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
// get value using textarea id
var val = document.getElementById('text').value;
swal("Nice!", "You wrote: " + val, "success");
});<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>answered Jun 13 '16 at 13:38
Pranav C BalanPranav C Balan
84.8k1386114
You can't use textarea as type since the sweetalert not support that.
The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function.(Taken from here)
Instead you can use html markup with text option by setting html option true. But in this way you can't get value inside the textarea as callback variable. For that give an id to the textarea and get value using that.
swal({
title: "Enter your Name!",
text: "<textarea id='text'></textarea>",
// --------------^-- define html element with id
html: true,
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function(inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
// get value using textarea id
var val = document.getElementById('text').value;
swal("Nice!", "You wrote: " + val, "success");
});<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>swal({
title: "Enter your Name!",
text: "<textarea id='text'></textarea>",
// --------------^-- define html element with id
html: true,
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function(inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
// get value using textarea id
var val = document.getElementById('text').value;
swal("Nice!", "You wrote: " + val, "success");
});<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>swal({
title: "Enter your Name!",
text: "<textarea id='text'></textarea>",
// --------------^-- define html element with id
html: true,
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function(inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
// get value using textarea id
var val = document.getElementById('text').value;
swal("Nice!", "You wrote: " + val, "success");
});<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>answered Jun 13 '16 at 13:38
Pranav C BalanPranav C Balan
84.8k1386114
edited Jun 13 '16 at 13:58
answered Jun 13 '16 at 13:38
Pranav C BalanPranav C Balan
84.8k1386114
answered Jun 13 '16 at 13:38
Pranav C BalanPranav C Balan
84.8k1386114
answered Jun 13 '16 at 13:38
Pranav C BalanPranav C Balan
84.8k1386114
84.8k1386114
add a comment |
add a comment |
6
The original SweetAlert plugin is currently unsupported and you probably won't see textarea functionality in it. I created SweetAlert2 which has the textarea functionlaity:
swal({
title: 'Input something',
input: 'textarea'
}).then(function(result) {
if (result.value) {
swal(result.value)
}
})<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>Textarea example in SweetAlert2 documentation ↗
The transition from SweetAlert to SweetAlert2 is easy, here's the migration guide.
answered Jun 13 '16 at 16:47
Limon MonteLimon Monte
25.9k26112151
add a comment |
6
The original SweetAlert plugin is currently unsupported and you probably won't see textarea functionality in it. I created SweetAlert2 which has the textarea functionlaity:
swal({
title: 'Input something',
input: 'textarea'
}).then(function(result) {
if (result.value) {
swal(result.value)
}
})<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>Textarea example in SweetAlert2 documentation ↗
The transition from SweetAlert to SweetAlert2 is easy, here's the migration guide.
answered Jun 13 '16 at 16:47
Limon MonteLimon Monte
25.9k26112151
add a comment |
6
6
6
The original SweetAlert plugin is currently unsupported and you probably won't see textarea functionality in it. I created SweetAlert2 which has the textarea functionlaity:
swal({
title: 'Input something',
input: 'textarea'
}).then(function(result) {
if (result.value) {
swal(result.value)
}
})<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>Textarea example in SweetAlert2 documentation ↗
The transition from SweetAlert to SweetAlert2 is easy, here's the migration guide.
answered Jun 13 '16 at 16:47
Limon MonteLimon Monte
25.9k26112151
The original SweetAlert plugin is currently unsupported and you probably won't see textarea functionality in it. I created SweetAlert2 which has the textarea functionlaity:
swal({
title: 'Input something',
input: 'textarea'
}).then(function(result) {
if (result.value) {
swal(result.value)
}
})<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>Textarea example in SweetAlert2 documentation ↗
The transition from SweetAlert to SweetAlert2 is easy, here's the migration guide.
swal({
title: 'Input something',
input: 'textarea'
}).then(function(result) {
if (result.value) {
swal(result.value)
}
})<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>swal({
title: 'Input something',
input: 'textarea'
}).then(function(result) {
if (result.value) {
swal(result.value)
}
})<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>answered Jun 13 '16 at 16:47
Limon MonteLimon Monte
25.9k26112151
edited Nov 13 '18 at 13:30
answered Jun 13 '16 at 16:47
Limon MonteLimon Monte
25.9k26112151
answered Jun 13 '16 at 16:47
Limon MonteLimon Monte
25.9k26112151
answered Jun 13 '16 at 16:47
Limon MonteLimon Monte
25.9k26112151
25.9k26112151
add a comment |
add a comment |
1
If you are using sweetalert2 or want to use sweetalert2, you can include these:
function openSwal(){
swal({
title: "Are you sure you want write somethin' in text area?",
input: "textarea",
inputPlaceholder: "Enter somethinn",
showCancelButton: true,
cancelButtonText: 'Cancel',
confirmButtonText: "Submit ",
inputValidator: function(value) { // validates your input
return new Promise(function(resolve, reject) {
if (value != '' && value != null) {
// document.getElementById('closeComment').value = value; // assign this to other elements in your form
swal("Success!", "You comment: " + value, "success");
// call other functions or do an AJAX call or sumbit your form
}
else {
reject('Please enter a valid text');
}
});
}
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.js"></script>
<button id="something" onclick="openSwal();">Open Sweet Alert</button>You can write textarea instead of text
answered Nov 13 '18 at 20:57
nikhilmethnikhilmeth
327
add a comment |
1
If you are using sweetalert2 or want to use sweetalert2, you can include these:
function openSwal(){
swal({
title: "Are you sure you want write somethin' in text area?",
input: "textarea",
inputPlaceholder: "Enter somethinn",
showCancelButton: true,
cancelButtonText: 'Cancel',
confirmButtonText: "Submit ",
inputValidator: function(value) { // validates your input
return new Promise(function(resolve, reject) {
if (value != '' && value != null) {
// document.getElementById('closeComment').value = value; // assign this to other elements in your form
swal("Success!", "You comment: " + value, "success");
// call other functions or do an AJAX call or sumbit your form
}
else {
reject('Please enter a valid text');
}
});
}
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.js"></script>
<button id="something" onclick="openSwal();">Open Sweet Alert</button>You can write textarea instead of text
answered Nov 13 '18 at 20:57
nikhilmethnikhilmeth
327
add a comment |
1
1
1
If you are using sweetalert2 or want to use sweetalert2, you can include these:
function openSwal(){
swal({
title: "Are you sure you want write somethin' in text area?",
input: "textarea",
inputPlaceholder: "Enter somethinn",
showCancelButton: true,
cancelButtonText: 'Cancel',
confirmButtonText: "Submit ",
inputValidator: function(value) { // validates your input
return new Promise(function(resolve, reject) {
if (value != '' && value != null) {
// document.getElementById('closeComment').value = value; // assign this to other elements in your form
swal("Success!", "You comment: " + value, "success");
// call other functions or do an AJAX call or sumbit your form
}
else {
reject('Please enter a valid text');
}
});
}
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.js"></script>
<button id="something" onclick="openSwal();">Open Sweet Alert</button>You can write textarea instead of text
answered Nov 13 '18 at 20:57
nikhilmethnikhilmeth
327
If you are using sweetalert2 or want to use sweetalert2, you can include these:
function openSwal(){
swal({
title: "Are you sure you want write somethin' in text area?",
input: "textarea",
inputPlaceholder: "Enter somethinn",
showCancelButton: true,
cancelButtonText: 'Cancel',
confirmButtonText: "Submit ",
inputValidator: function(value) { // validates your input
return new Promise(function(resolve, reject) {
if (value != '' && value != null) {
// document.getElementById('closeComment').value = value; // assign this to other elements in your form
swal("Success!", "You comment: " + value, "success");
// call other functions or do an AJAX call or sumbit your form
}
else {
reject('Please enter a valid text');
}
});
}
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.js"></script>
<button id="something" onclick="openSwal();">Open Sweet Alert</button>You can write textarea instead of text
function openSwal(){
swal({
title: "Are you sure you want write somethin' in text area?",
input: "textarea",
inputPlaceholder: "Enter somethinn",
showCancelButton: true,
cancelButtonText: 'Cancel',
confirmButtonText: "Submit ",
inputValidator: function(value) { // validates your input
return new Promise(function(resolve, reject) {
if (value != '' && value != null) {
// document.getElementById('closeComment').value = value; // assign this to other elements in your form
swal("Success!", "You comment: " + value, "success");
// call other functions or do an AJAX call or sumbit your form
}
else {
reject('Please enter a valid text');
}
});
}
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.js"></script>
<button id="something" onclick="openSwal();">Open Sweet Alert</button>function openSwal(){
swal({
title: "Are you sure you want write somethin' in text area?",
input: "textarea",
inputPlaceholder: "Enter somethinn",
showCancelButton: true,
cancelButtonText: 'Cancel',
confirmButtonText: "Submit ",
inputValidator: function(value) { // validates your input
return new Promise(function(resolve, reject) {
if (value != '' && value != null) {
// document.getElementById('closeComment').value = value; // assign this to other elements in your form
swal("Success!", "You comment: " + value, "success");
// call other functions or do an AJAX call or sumbit your form
}
else {
reject('Please enter a valid text');
}
});
}
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.js"></script>
<button id="something" onclick="openSwal();">Open Sweet Alert</button>answered Nov 13 '18 at 20:57
nikhilmethnikhilmeth
327
answered Nov 13 '18 at 20:57
nikhilmethnikhilmeth
327
answered Nov 13 '18 at 20:57
nikhilmethnikhilmeth
327
answered Nov 13 '18 at 20:57
nikhilmethnikhilmeth
327
327
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f37790965%2fhow-to-add-textarea-tag-as-input-element-in-sweet-alert-using-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Show what you've coded...
– Guruprasad Rao
Jun 13 '16 at 13:24
$('#saveBtn,#createNewBtn').click(function(){ swal({ title: "Enter your Name!", text: "your name:", type: "input", showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: true, animation: "slide-from-top", inputPlaceholder: "Write something" }, function(inputValue){ if (inputValue === false) return false; if (inputValue === "") { swal.showInputError("You need to write something!"); return false } swal("Nice!", "You wrote: " + inputValue, "success"); }); });
– Prafull Pol
Jun 13 '16 at 13:32
@Guruprasad. Could you please tell me where i am doing mistake
– Prafull Pol
Jun 13 '16 at 13:39