How can I return the value of an Input Field when I click on a button?

Question

In my template I have an input field:

<input class="form-control input-sm" id="WCPO_Pesquisa" name="WCPO_Pesquisa" onchange="myFunction()" tabindex="2" type="text" value="">

A button:

<button type="button" id="btn1" class="btn btn-sm green-seagreen tooltips" data-container="body" data-placement="bottom" data-original-title="Executa a Pesquisa na Base de Dados" tabindex="3" > 
    <a class="textobranco semtextdecoration" href="{{ url_for('EW_MP_0060_reunioes.Busca_Registro_0060', WCodigoChaveP = 'myFunction()' ) }}" hreflang="pt-br"> 
        <i class="glyphicon glyphicon-zoom-in"></i> 
        Exec. 
    </a>
</button>

And a script:

<script>
function myFunction() {
    var x;

    //Get the value of input field with id="WCPO_Pesquisa"

    x = document.getElementById("WCPO_Pesquisa").value;

    document.getElementById("resultado").innerHTML = x;

    return x;
}
</script>

I need to return the value of the input field to my view when the user click the button but I don't know how.

The value must be assigned to the WCodigoChaveP to be passed as an argument to my view.

I added a:

<p id="resultado"> 

element to my form and then added:

document.getElementById("resultado").innerHTML = x; 

on the script just to test. Its working. Whatever I type in the input filed I see on the p element.

As you can see I'm new in all this.

Thanks for your help.

Answer 1

Simple concept of your question.

HTML

<input  id="WCPO_Pesquisa" type="text" value="" >
<button id="go">GO!</button>
<p id="resultado"></p>

JS

$("#go").click(function() {
    var x;
    x = document.getElementById("WCPO_Pesquisa").value;
    document.getElementById("resultado").innerHTML = x;
});

EDIT

DEMO 1 - using form tags