6

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.com) 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.com/t4t5/sweetalert

3 Answers 3

4

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

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

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

 swal.withForm({
    title: 'More complex 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' }
  })
2

I know this is old, but I'll answer the question for all the web searchers out there: You need to give an array as an argument, using 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.

0

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);   
});
6
  • I didn't explain very well, I want to implement a form, with three o four inputs. I saw the documentation and I know just one input is easy Jun 4, 2015 at 23:15
  • I don't believe that's possible without changing SweetAlert's code. Have you considered a generic modal? Jun 4, 2015 at 23:24
  • Umm, and in the generic modal, it would be possible that my class CSS injected from my framework work? Jun 4, 2015 at 23:27
  • I need more information. Are you using SharePoint? Or is there an OOCSS framework that you're using (e.g. Bootstrap)? Jun 4, 2015 at 23:31
  • 1
    Got it! I was confused because your question mentioned customizecss.com. Materialize does offer modals: materializecss.com/modals.html Jun 4, 2015 at 23:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.