Input the variable

Question

I’m making a simple shipping form. Basically: The user inserts the value to be downloaded, fills in the data and when clicking the confirm button, the result is displayed on the screen.

The problem is that I am unable to create this sending function, so that the code only runs when the user clicks to confirm. How to proceed?

Follows code:

<div class="form-group">
    <label class="col-md-4 control-label" for="textinput">Valor do saque</label>  
    <div class="col-md-2">
        <input id="textinput" name="textinput" value="" type="text" placeholder="R$ 00,00" class="form-control input-md" required="">
    </div>
</div>

Answer 1

As I understand it, you can do so:

With javascript

<button onclick="enviar()">Confirmar</button>

<script type="text/javascript">
    function enviar(){
        var valor = document.getElementById("textinput").value;
        alert(valor);

        return false;
    }
</script>

Or using jQuery:

<button id="confirmar">Confirmar</button>

<script type="text/javascript">
    $('body').on('click','#confirmar',function(){
        var valor = $('#textinput').val();
        alert(valor);

        return false;
    })
</script>

Answer 2

The behavior of the example below will be as follows:
  - By clicking the confirm button:
    - Display a warning with the value of the "value field";
    - Will present in the scope the value message of the field "value";
    - There will be no redirection in the page, because inside the attribute is inserted onsubmit exists beyond the "shown()" function, the "Return false" which for the Submit execution.

HTML:

<div class="form-group">
<form method="post" action="" onsubmit="mostrarDados(); return false;">
    <label class="col-md-4 control-label" for="valor">Valor do saque</label>
    <div class="col-md-2">
        <input id="valor" name="valor" type="text" placeholder="R$ 00,00" class="form-control input-md">
    </div>
    <input type="submit" name="confirmar" value="Confirmar">
</form>
<div class="col-md-12" id="resultado"></div>

JAVASCRIPT:

<script type="text/javascript">
function mostrarDados(){
    valor = document.getElementById("valor").value;

    // MOSTRARÁ O VALOR IMPRESSO NA TELA
    document.getElementById("resultado").innerHTML = "Valor: "+valor+"<br>";

    // MOSTRARÁ UM AVISO
    alert("Valor: "+valor);
}