Redirecting users through a form

Question

I need to create a page html simple, with only one form field type="number". When the user clicks it is redirected to a url www.exemplo.com/o_que_ele_digitou_no_formulario

Purpose of this page: We are organizing an event and we want the congressman to arrive at this page, type in your Cpf, click the button and be redirected to a www.exemplo.com/Cpf page. This destination page is password protected and contains the participant’s data.

Answer 1

This is an example 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>

Answer 2

The solution goes through simple javascript. Just put a function at the click of the button. Here is 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);

Answer 3

$(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>
<input type="number" id="cpf"/>
<input type="button" id="redirecionar" value="Validar"/>