Input text in sweetAlert

Question

I'm using a custom version of sweetalert to ask my user for an input. I have managed to make the everything work but there is an strange behavior, In order to be able to input a text in the input box you have to click screen first:

swal({
    title: "Aggiornamento profilo",
    text: '<br /><form method="post" id="taxcode-update" name="taxcodeUpdate"><input id="admin-tax-code" minlength="3" class="form-control wedding-input-text wizard-input-pad" type="text" name="taxCode" placeholder="Codice fiscale"></form>',
    type: "warning",
    showCancelButton: false,
    confirmButtonText: "Aggiorna il mio profilo",
    closeOnConfirm: false
}, function () {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

Working example: https://jsfiddle.net/fvkppx06/

score 44 · Accepted Answer · edited Apr 09 '21 at 09:27

44

swal({
  title: "An input!",
  text: "Write something interesting:",
  type: "input",
  showCancelButton: true,
  closeOnConfirm: false,
  animation: "slide-from-top",
  inputPlaceholder: "Write something"
},
function(inputValue){
  if (inputValue === null) return false;
  
  if (inputValue === "") {
    swal.showInputError("You need to write something!");
    return false
  }
  
  swal("Nice!", "You wrote: " + inputValue, "success");
});

edited Apr 09 '21 at 09:27

Community

1
1

answered Nov 06 '15 at 08:20

Jai Chauhan

4,035
3
36
62

Because you are using an older version of sweet alert. I was having the same and get resolved by updating the sweet alert library from here. https://lipis.github.io/bootstrap-sweetalert/ – Mukesh Salaria Nov 05 '18 at 09:59

score 21 · Answer 2 · answered Apr 29 '19 at 10:51

Use Sweetalert2. There are numerous examples for input prompts to be found here, all of them using modern async/await constructs. If you want it the old way, try this:

Swal.fire({
    title: "An input!",
    text: "Write something interesting:",
    input: 'text',
    showCancelButton: true        
}).then((result) => {
    if (result.value) {
        console.log("Result: " + result.value);
    }
});

score 5 · Answer 3 · answered Apr 28 '15 at 13:25

5

JSFiddle

Give the input the autofocus tag.

text: '<br /><form method="post" id="taxcode-update" name="taxcodeUpdate">'
    + '<input id="admin-tax-code" autofocus minlength="3" class="form-control wedding-input-text wizard-input-pad" type="text" name="taxCode" placeholder="Codice fiscale">'
    + '</form>',

answered Apr 28 '15 at 13:25

Albzi

15,431
6
46
63

This solution will work only the first time you call the modal, take a look on this modification I made to demonstrate that https://jsfiddle.net/fvkppx06/2/ any ideas? – DomingoSL Apr 28 '15 at 13:34
I don't know, sorry! Although the newest version of [Sweet Alert](http://t4t5.github.io/sweetalert/) allows a `type:input`, which may work better? @DomingoSL – Albzi Apr 28 '15 at 13:53

score 2 · Answer 4 · answered Oct 12 '18 at 14:12

2

The variable used is 'name'

 const {value: name} = await swal({
  title: 'Input your name',
  input: 'text',
  inputPlaceholder: 'Enter here'
})

if (name) {
  swal('Entered name: ' + name)
}

answered Oct 12 '18 at 14:12

Mikeys4u

1,494
18
26

An updated version is here https://www.codehaven.co.uk/jquery/jquery-ajax/sweet-alert-text-input-and-save-to-a-database/ – Mikeys4u Oct 30 '20 at 11:00

score 1 · Answer 5 · edited Aug 31 '19 at 06:49

Just test this

swal.withForm({
   title: 'Cool example',
   text: 'Any text that you consider useful for the form',
   showCancelButton: true,
   confirmButtonColor: '#DD6B55',
   confirmButtonText: 'Get form data!',
   closeOnConfirm: true,
   formFields: [
       { id: 'name', placeholder:'Name Field' },
       { id: 'nickname', placeholder:'Add a cool nickname' }
   ], function(isConfirm) {
   // do whatever you want with the form data
   console.log(this.swalForm); // { name: 'user name', nickname: 'what the user sends' }
})

https://github.com/taromero/swal-forms

score 0 · Answer 6 · edited Aug 21 '19 at 08:05

0

Use this :

Swal.fire({
title: "An input!",
text: "Write something interesting:",
input: 'text',
showCancelButton: true ,
confirmButtonColor: 'green'
}).then((result) => {
if (result.value) {
    Swal.fire('Result:'+result.value);
}});

edited Aug 21 '19 at 08:05

Mohammad Reza Shahrestani

1,119
3
17
28

answered Aug 21 '19 at 07:39

Sasi

1

Nauhl Valdez · Answer 7 · 2023-02-13T17:36:13.953

SweetAlert have a div with tabIndex="-1" this was my problem so, If you go to inspect and it shows tabIndex="-1" inside de "first div" (it should be there), you can get the HTMLELEMENT using the next line:

let div = document.getElementsByClassName("fade modal-lg modal show");

Then verify if there's content:

console.log(div, "div");

Once you get there, here's what works for me:

for (let i = 0; i < div.length; i++) {
      console.log(div[i], "div");
      console.log(div[i].setAttribute("tabIndex", ""), "div");
    }

const tabIndex = () => {
    let div = document.getElementsByClassName("fade modal-lg modal show");
    console.log(div, "div");
    for (let i = 0; i < div.length; i++) {
      console.log(div[i].setAttribute("tabIndex", ""), "div");
    }
  }

  const addOption = () => {

    tabIndex() //Call my function where I have my tabIndex (div value)


    Swal.fire({
      title: 'title',
      //html: `<input type="text" id="login" class="swal2-input" placeholder="Username" tabIndex="">`,
      input: 'text',
      inputValue: inputAdd,
      inputAttributes: {
        autocapitalize: 'off'
      },
      showCancelButton: true,
      confirmButtonText: 'Save',

    })

I hope this could help :D (I was 4 hours searching for this)

Input text in sweetAlert

7 Answers7