Input field unable to edit or made changes in sweet alert

swal({
                title: "Confirm details?",
                text:'<input type="text" id="datetimepicker" class="form-control">',
                type: "warning",
                customClass: 'swal-custom-width',
                html:true,
                showCancelButton: true,
                confirmButtonClass: "btn-success",
                confirmButtonText: "Confirm",
                cancelButtonText: "Cancel",
                closeOnConfirm: false,
                closeOnCancel: false,
                showLoaderOnConfirm: true
            },

The input field will not display until I am applying css on it to display.

display : initial

Then, the sweet alert box display the text field but not allow to edit or make changes.

What's wrong with this?

ralphmorris

8 years ago

Level 7

I think for Sweet alert you need to create the inputs in a slightly different way.

Example:

swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    },
  },
});

See here: https://sweetalert.js.org/docs/

Daniel1836

5 years ago

Level 6

I'll revive this thread because I'm having a similar issue. How come I'm unable to type in my input boxes in sweet alert? It is not focusable.

Here is my code:

 swal({
            title: "Update Score",

            showCancelButton: true,
     
            html:true,

            text: '<input id="input1" type="text" placeholder="Home" style="display:block !important;"><br><input id="input2" type="text" placeholder="Away" style="display:block !important;">',

            preConfirm:function(){
                in1= $('#input1').val();
                in2= $('#input2').val();

                console.log(in1,in2) // use user input value freely
            }
        },

Please or to participate in this conversation.