Javascript iniciar paragrafo ao enviar formulario

[herbertbahia]

ao enviar um formulario quero executar esse paragrafo que cria um modal

<p><a href="#ex1" rel="modal:open">Open Modal</a></p>

depende ter que enviar o formulario para aparecer o resultado no modal

 

[Rui Guilherme]

Não tenho certeza se entendi kkkkk

A pessoa vai preencher um form, após preencher esse form essa pessoa vai enviar os dados (submit) e após o POST ter sido feito é para mostrar os dados usados na tela do usuário em uma model? Se for isso acredito que seja legal você usar o SweetAlert2

 

Swal.mixin({
  input: 'text',
  confirmButtonText: 'Proximo →',
  cancelButtonText: "Cancelar",
  showCancelButton: true,
  progressSteps: ['1', '2', '3']
}).queue([
  {
    title: 'Questão 1',
    text: 'Qual é o seu nome?'
  },
  {
    title: 'Questão 2',
    text: 'Qual é o nome do seu cachorro?'
  },
  {
    title: 'Questão 2',
    text: 'Qual é o nome do seu gato?'
  },
]).then((result) => {
  // Você pode usar o preConfirm(Veja nas docs do SweetAlert) para fazer enviar... 
  // ...o form antes de apresentar as respostas, ou meter um fetch/axios aqui e dentro do then colocar o Swal mostrando os dados
  if (result.value) {
    const answers = result.value
    Swal.fire({
      title: 'Perfeito!',
      html: `
        Suas respostas:
        <p>
          Seu nome: ${answers[0]}
          <br/>
          Nome do seu cachorro: ${answers[1]}
          <br/>
          Nome do seu gato: ${answers[2]}
        </p>
      `,
      confirmButtonText: 'Confirmar!'
    })
    //Você também pode colocar um then aqui e fazer um POST após a confirmação dos dados pelo usuario :D 
  }
})

Segue CodePen: https://codepen.io/ruiguilherme/pen/WNoMPdZ

 

Link para o SweetAlert2: https://sweetalert2.github.io/

[Rui Guilherme]

Editei o código com um exemplo fazendo uma request(usando o fetch, mas é possível fazer usando o axios) e mostrando o dado posteriormente
(Link do CodePen é o mesmo: https://codepen.io/ruiguilherme/pen/WNoMPdZ)

Swal.fire({
  title: 'Entre com o seu nome do GitHub',
  input: 'text',
  inputAttributes: {
    autocapitalize: 'off'
  },
  showCancelButton: true,
  confirmButtonText: 'Continuar',
  showLoaderOnConfirm: true,
  preConfirm: (login) => {
    const data = fetch(`//api.github.com/users/${login}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(response.statusText)
        }
        return response.json()
      })
      .catch(error => {
        Swal.showValidationMessage(
          `Request failed: ${error}`
        )
      })
    // Data é opcional, você pode passar apenas o login caso queira mostrar apenas o form... 
    return {data, login}
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  const { data, login } = result.value
  //Isso é gambiarra? kkkkkk
  Promise.all([data]).then((values) => {
    const resultPromise = values[0]
    console.log(resultPromise) //Resultado do get caso queira trabalhar com o response da request
  })
  //Nesse fire é onde mostra a model com os dados, é possível fazer uma table dentro do Swal, veja nas docs sobre "html".
  Swal.fire({
    text: `Você entrou com ${login}`,
  })
})