I need to create a simple html page, with only one form field type="number" . When the user clicks he is redirected to a url www.example.com/o_que_ele_digitou_no_formular
Page Purpose: We are organizing an event and want the congressman to arrive on this page, type your cpf, click the button, and be redirected to a page www.example.com/cpf. This landing page is password protected and contains participant data.
This is an example of a form that redirects to the url when it is submitted. (In the StackOverflow executable it will not redirect)
var baseUrl = 'http://www.exemplo.com.br';
var form = document.querySelector('#congressistaForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
window.location.href = [baseUrl, form.cpf.value].join('/');
});<form id="congressistaForm" name="congressistaForm">
<input type="number" name="cpf" />
<button>
Entrar
</button>
</form>The solution goes through simple javascript. Just put a function at the click of the button. Here's an option without jQuery:
var link = "http://www.exemplo.com.br/"+document.getElementById('input_cpf').value;
window.location.href = link;
// ou uma variante com o mesmo efeito
window.location.assign(link);
And one with jQuery:
$("#botao_link").on('click', function(){
var link = "http://www.exemplo.com.br/"+$('#input_cpf').val();
$(window.document.location).attr('href',link);
});
If you want the client to open a new window, you can use:
window.open(link);
$(document).ready(function(){
$("#redirecionar").click(function(){
var url = "http://www.exemplo.com.br/"+ $("#cpf").val();
$(location).attr("href", url);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="number" id="cpf"/>
<input type="button" id="redirecionar" value="Validar"/>