Reactjs sweetalert2 put input above html

Question

I have a sweetalert popup that prompts the user to change their password. I have the main input field asking the user for their current password, then I have some html with input boxes asking the user to enter their new password twice. I'd like to have the input field above the html, however I can't figure out how to do it. Here is my code:

const MySwal = withReactContent(Swal)
    MySwal.fire({
      title: 'Change Password?',
      focusConfirm: true,
      input: 'password',
      inputPlaceholder: 'Enter your current password...',
        html:
          '<input id="newPassword1" type="password" placeholder="Enter your new password..." /><br />' +
          '<input id="newPassword2" type="password" placeholder="Confirm your new password..." />' ,
        type: 'warning',
        showCancelButton: true,
        cancelButtonColor: 'grey',
        confirmButtonText: 'Update!',
        allowOutsideClick: true,
        inputValidator: (value) => {
          if (!value) {
            return 'You need to write something!'
          }
        }
    })

Any ideas how I can do this?

What does that mean? "above the HTML"??? I don't understand what you're trying to say at all. — Matt Oestreich
– Matt Oestreich, Commented Aug 30, 2019 at 18:02
Sweetalert only allows you one input field, if you want more you have to add an html string manually. In the code snippet above there's an "html" field which is where I put the other two input boxes. The default is that the sweetalert input renders below the html. I'd like to set it up so the input goes above. Let me know if you have any thoughts. Thanks! — Djaenike
– Djaenike, Commented Aug 30, 2019 at 18:21
So you want the field that says "Enter your current password" to be on top of the 3 input fields? — Matt Oestreich
– Matt Oestreich, Commented Aug 30, 2019 at 18:33

Matt Oestreich · Accepted Answer · 2019-08-30 20:40:44Z

You can try something like this:

EDIT: I have updated my answer to also show how to handle 'light' validation...

Live Demo

import React, { useState } from 'react';
import { render } from 'react-dom';
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'

const MySwal = withReactContent(Swal);

let changePwSwal = {
  title: 'Change Password?',
  focusConfirm: false,
  html: `
    <input class="swal2-input" id="currentPassword" type="password" placeholder="Enter your current password..." /><br />
    <input class="swal2-input" id="newPassword1" type="password" placeholder="Enter your new password..." /><br />
    <input class="swal2-input" id="newPassword2" type="password" placeholder="Confirm your new password..." />
  `,
  type: 'warning',
  showCancelButton: true,
  cancelButtonColor: 'grey',
  confirmButtonText: 'Update!',
  allowOutsideClick: false,
  preConfirm: () => ({
    currentPassword: document.getElementById('currentPassword').value,
    newPassword1: document.getElementById('newPassword1').value,
    newPassword2: document.getElementById('newPassword2').value
  })
};

export default function App() {
  const [formdata, setformdata] = useState();

  const handleResetPassword = () => {
    const resetPw = async () => {
      const swalval = await MySwal.fire(changePwSwal);
      let v = swalval && swalval.value || swalval.dismiss;
      if (v && v.currentPassword && v.newPassword1 && v.newPassword2 || v === 'cancel') {
        if (v.newPassword1 !== v.newPassword2) {
          await MySwal.fire({ type: 'error', title: 'Passwords do not match!' });
          resetPw();
        } else if (v !== 'cancel') {
          setformdata(swalval);
        }
      } else {
        await MySwal.fire({ type: 'error', title: 'All fields are required!!' });
        resetPw();
      }
    }

    resetPw();
  }

  return (
    <div>
      <button onClick={handleResetPassword}>Reset Password</button>
      <pre>{JSON.stringify(formdata, null, 2)}</pre>
    </div>
  );
}

render(<App />, document.getElementById('root'));

No problem! I also added some more validation :) Should be good to go from here.

Collectives™ on Stack Overflow

Reactjs sweetalert2 put input above html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related