Quando precisamos enviar dados de um formulário em JavaScript, uma opção é usar a propriedade onsubmit do elemento de formulário. Essa propriedade permite definir uma função que será executada quando o formulário for enviado. Nessa função, podemos executar ações adicionais antes de enviar o formulário, como validar os dados do formulário ou redirecionar o usuário para outra página.
No código abaixo, vamos ver como redirecionar o usuário para uma página de busca após enviar um formulário de pesquisa de produtos:
<form action="<?= $url; ?>/produtos/busca/" method="get" onsubmit="document.location = '<?= $url; ?>/produtos/busca/' + document.getElementById('submit').value + '/'; return false;">
<input type="text" name="q" placeholder="Digite o nome do produto...">
<input type="submit" id="submit" value="Buscar">
</form>
Nesse exemplo, temos um formulário que envia dados para a URL <?= $url; ?>/produtos/busca/ usando o método GET. O atributo onsubmit é definido como uma string que contém JavaScript. Quando o formulário é enviado, essa string será interpretada como código JavaScript e executada.
A primeira ação que o código JavaScript realiza é redirecionar o usuário para a URL de busca de produtos, concatenando o valor do botão “Buscar” com a URL. Isso é feito usando document.location, que define a nova URL da página. O valor do botão “Buscar” é obtido com document.getElementById('submit').value, que retorna o valor do atributo value do botão com o ID “submit”.
Por fim, a função retorna false para cancelar o envio padrão do formulário. Isso garante que o código JavaScript seja executado antes do envio do formulário.
Com esse código, temos um formulário de pesquisa de produtos que redireciona o usuário para a página de resultados de busca após enviar o formulário. Esse é apenas um exemplo de como podemos usar o atributo onsubmit para executar ações adicionais antes de enviar um formulário em JavaScript. As possibilidades são muitas e variadas, dependendo das necessidades do seu projeto.