I would like to implement a form inside of the sweet alert. I can put just one input inside, with title and body.

There is a way to customize the alert, docs says it, but is not allowed to load class css3 from my framework (customizecss) or from my style.css.

I'm trying to include a input inside of the alert, this way:

swal({
       title: "HTML <small>Title</small>!",
       text: "<input type='text'><label class='my-label'>Name</label>",
       html: true 
});

And it doesn't work, only show the label... why?

I wonder if there is some way to do it...

Thanks!

Sweet Alert ->

I would like to implement a form inside of the sweet alert. I can put just one input inside, with title and body.

There is a way to customize the alert, docs says it, but is not allowed to load class css3 from my framework (customizecss.) or from my style.css.

I'm trying to include a input inside of the alert, this way:

swal({
       title: "HTML <small>Title</small>!",
       text: "<input type='text'><label class='my-label'>Name</label>",
       html: true 
});

And it doesn't work, only show the label... why?

I wonder if there is some way to do it...

Thanks!

Sweet Alert -> https://github./t4t5/sweetalert

• javascript
• html
• forms
• css
• sweetalert

3 Answers 3

You can use this plugin in order to achive what you want:

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

It creates forms inside the modal in a syntax-fiendly manner:

 swal.withForm({
    title: 'More plex Swal-Forms example',
    text: 'This has different types of inputs',
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Get form data!',
    closeOnConfirm: true,
    formFields: [
      { id: 'name', placeholder: 'Name Field' },
      { id: 'nickname', placeholder: 'Add a cool nickname' },
      { id: 'password', type: 'password' },

      { name: 'sex', value: 'Male', type: 'radio' },
      { name: 'sex', value: 'Female', type: 'radio' },

      { name: 'skills', value: 'JS', type: 'checkbox' },
      { name: 'skills', value: 'Ruby', type: 'checkbox' },
      { name: 'skills', value: 'Java', type: 'checkbox' },

      { id: 'select',
        type: 'select',
        options: [
          {value: 'test1', text: 'test1'},
          {value: 'test2', text: 'test2'},
          {value: 'test3', text: 'test3'},
          {value: 'test4', text: 'test4'},
          {value: 'test5', text: 'test5'}
        ]}
    ]
  }, function (isConfirm) {
    // do whatever you want with the form data
    console.log(this.swalForm) // { name: 'user name', nickname: 'what the user sends' }
  })

I know this is old, but I'll answer the question for all the web searchers out there: You need to give an object as an argument, with an html property:

swal({
html: "<form action='verify.php' method='post'>
    <input id='user' type='email'>
    <input id='pass' type='password'>
    <input id='idno' type='number'>
    <submit>
</form>"});

Replace verify.php with whatever page you need the data in, and replace the string after html: with whatever HTML code you need.

The only downside is that people need to hit the submit-button on the form, and not SweetAlert's own button, although there might be a way to remove SweetAlert's own button too.

It looks like you can use a Sweet Alert with a type of 'input' (as opposed to 'error' or 'warning').

    $window.swal({title: 'Text Entry', text: 'Put some text here, please.', type: 'input'});

From the Github README: A prompt modal where the user's input is logged:

sweetAlert({
  title: "An input!",
  text: 'Write something interesting:',
  type: 'input',
  showCancelButton: true,
  closeOnConfirm: false,
  animation: "slide-from-top"
  }, function(inputValue){
    console.log("You wrote", inputValue);   
});