0

Estou tentando obter um valor de um input no sweetalert2 tentando seguir esse exemplo que está lá no site

const {value: password} = await Swal({
  title: 'Enter your password',
  input: 'password',
  inputPlaceholder: 'Enter your password',
  inputAttributes: {
    maxlength: 10,
    autocapitalize: 'off',
    autocorrect: 'off'
  }
})

if (password) {
  Swal('Entered password: ' + password)
}

Tentando usar na minha função, mas comigo mostra uma mensagem de erro

"Uncaught SyntaxError: await is only valid in async function"

Assim que estou tentando usar:

$('.btn').on('click', function(){
  perguntaConcluirCompra1()
})
function perguntaConcluirCompra1(){
        
            swal({
                title: 'Forma de pagamento',
                width:'500px',
                html: "Escolha a forma de pagamento que melhor de convém" +
                    "<br>" +
                    '<button type="button" role="button" tabindex="0" class="SwalBtn1 customSwalBtnD" id="d">' + 'Dinheiro' + '</button>' +
                    '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtnC" id="c">' + 'Cartão de Crédito' + '</button>'+
                    '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtnCancel" id="cancel">' + 'Fechar' + '</button>',
                showCancelButton: false,
                showConfirmButton: false,
                onBeforeOpen: () => {
                    const content = Swal.getContent()
                    const $ = content.querySelector.bind(content)
                    const dinheiro = $('#d')
                    const credito  = $('#c')
                    const cancel = $('#cancel')
                    dinheiro.addEventListener('click', () => {
                         const {value: password} = await Swal({
                                                    title: 'Enter your password',
                                                    input: 'password',
                                                    inputPlaceholder: 'Enter your password',
                                                    inputAttributes: {
                                                        maxlength: 10,
                                                        autocapitalize: 'off',
                                                        autocorrect: 'off'
                                                    }
                                                    })

                                                    if ( password ) {
                                                    Swal('Entered password: ' + password)
                                                    }
                    })
                    credito.addEventListener('click', () => {
                        console.log('Credito: '+id);
                    })
                    cancel.addEventListener('click', () => {
                        console.log('cancelar ');
                    })
                }
            });
        
    }
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.2/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.2/sweetalert2.all.js"></script>

<button class="btn">Botao</button>

Como faço para obter o valor desse input?

1 Resposta 1

1

Como o próprio erro diz:

"await só é válido em funções assíncronas"

Neste caso, basta adicionar async à função do evento click:

                                     ↓
dinheiro.addEventListener('click', async () => {...

Exemplo:

$('.btn').on('click', async function(){
  perguntaConcluirCompra1()
})
function perguntaConcluirCompra1(){
        
            swal({
                title: 'Forma de pagamento',
                width:'500px',
                html: "Escolha a forma de pagamento que melhor de convém" +
                    "<br>" +
                    '<button type="button" role="button" tabindex="0" class="SwalBtn1 customSwalBtnD" id="d">' + 'Dinheiro' + '</button>' +
                    '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtnC" id="c">' + 'Cartão de Crédito' + '</button>'+
                    '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtnCancel" id="cancel">' + 'Fechar' + '</button>',
                showCancelButton: false,
                showConfirmButton: false,
                onBeforeOpen: () => {
                    const content = Swal.getContent()
                    const $ = content.querySelector.bind(content)
                    const dinheiro = $('#d')
                    const credito  = $('#c')
                    const cancel = $('#cancel')
                    dinheiro.addEventListener('click', async () => {
                         const {value: password} = await Swal({
                                                    title: 'Enter your password',
                                                    input: 'password',
                                                    inputPlaceholder: 'Enter your password',
                                                    inputAttributes: {
                                                        maxlength: 10,
                                                        autocapitalize: 'off',
                                                        autocorrect: 'off'
                                                    }
                                                    })

                                                    if ( password ) {
                                                    Swal('Entered password: ' + password)
                                                    }
                    })
                    credito.addEventListener('click', () => {
                        console.log('Credito: '+id);
                    })
                    cancel.addEventListener('click', () => {
                        console.log('cancelar ');
                    })
                }
            });
        
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.2/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.2/sweetalert2.all.js"></script>

<button class="btn">Botao</button>

1
  • Muito obrigado! Ainda tenho dúvidas de onde colocar esse async Commented 14/12/2018 às 17:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .