I can't retrieve the value typed in a text input using Javascript

Question

I have a problem, when i try to retrieve the value I have typed in the text input, and I try to print it in alert , it shows nothing, the variable is empty here is the code:
I have here the input textfield 'Montant', i would like to retrieve it using the onClick event on the button on the bottom

<form  name="formEspece" method="get" action="{{route('EffectuerPaiement')}}" >
<div class="modal-body">
    <p>Veuillez saisir le montant à payer pour cette échéance</p>
        <div class="form-group">
            <label for="exampleInputEmail1">Montant:</label>
            <input required type="number" id="idMontant1"class="form-control" placeholder="Saisissez un montant" name="Montant" >
        </div>
</div>

<div class="modal-footer">
    <input type="button" class="btn btn-primary" onclick='return test(document.getElementById("idMontant1").value,{{$paiement->montant-$totalPaiement}})' value="valider"/>
</div></form>

here is the script:

<script>function test(a,b){
window.alert('a= '+a+'b= '+b);}</script>

it shows nothing, notice that i am using Bootstrap, and LARAVEL

here is a more detailed code I retreive it from my own project:

@foreach($inscriptions as $inscription)
<?php
// some treatments
?>
<tr  class="{{$rowstyle}}">
    <td><img src="images/{{ $inscription->photo }}"></td>
    <td>{{ $inscription->cne }}</td>
    <td>{{ $inscription->nom }}</td>
    <td>{{ $inscription->prenom }}</td>
    <td>{{ $inscription->ville }}</td>
    <!-- the  button  who open the forms modal-->
    <td>
        <button class="btn btn-sm btn-primary btn-success" data-toggle="modal" data-target="{{"#smallModalEspece".$count}}">Espèce</button>
    </td>
    <td>
        <a class="btn btn-sm btn-danger" href="{{ route('retirer',[ 'cne' => $inscription->cne ]) }}"><i class="fa fa-trash-o"></i></a>
        <a href="{{ route('detailetudiant',[ 'id' => $inscription->id ]) }}" class="btn btn-sm btn-default">
            <i class="fa fa-info-circle"></i> Détails
        </a>
    </td>
</tr>

<!-- the modal who contains the form -->

<div id="{{"smallModalEspece".$count}}" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Paiement en espèce</h4>
                </div>
                <form  name="formEspece" method="get" action="{{route('EffectuerPaiement')}}" >
                    <div class="modal-body">
                        <h3>Le montant restant à payer pour l'étudiant {{\fc\etudiant::find($inscription->cne)->nom.' '.\fc\etudiant::find($inscription->cne)->prenom}} est : {{$paiement->montant-$totalPaiement}}</h3>
                        <p>Veuillez saisir le montant à payer pour cette écheance</p>
                            <div class="form-group">
                                <input type="hidden" name="MontantPaye" value="{{$paiement->montant-$totalPaiement}}"/>
                                <label for="exampleInputEmail1">Montant:</label>
                                <input required type="number" id="idMontant1"class="form-control" placeholder="Saisissez un montant" name="Montant" >
                            </div>
                    </div>

                    <div class="modal-footer">
                        <input type="hidden" name="_token" value=" {{ csrf_token() }} ">
                        <input type="hidden" name="idpaiment"  value="{{$paiement->idPaiement}}">
                        <input type="hidden" name="nbrEcheance"  value="{{$nbrE}}">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <input type="button" id="#buttonid" class="btn btn-primary" onclick='test(document.getElementById("idMontant1").value,{{$paiement->montant-$totalPaiement}})' value="valider"/>
                    </div>

                </form>
            </div>
        </div>
</div>
@endforeach

Answer 1

ID's must be unique, but you use the same ID idMontant1 for each number-input. (A browser may not guess which element you mean, he will always select the same input)

Possible solution: you may omit the ID, instead pass the button as argument to test() . Via the button you'll be able to find the desired input:

• find the form(it's the form-property of the button)
• find the input with the name Montant within the form(e.g. via element.querySelector)

Simple demo(I've removed the irrelevant markup)

function test(btn) {
  var val = btn.form.querySelector('input[name="Montant"]').value;
  alert(val);
}

<form>
  <input type="number" name="Montant" value="12" />
  <input type="button" onclick="return test(this)" value="valider" />
</form>
<form>
  <input type="number" name="Montant" value="34" />
  <input type="button" onclick="return test(this)" value="valider" />
</form>
<form>
  <input type="number" name="Montant" value="56" />
  <input type="button" onclick="return test(this)" value="valider" />
</form>
<form>
  <input type="number" name="Montant" value="78" />
  <input type="button" onclick="return test(this)" value="valider" />
</form>

Answer 2

add an id to the button and try this

<script>
    $("#buttonid").click(function(){
    var in = $("#idMontant1").val();
    window.alert(in);});
</script>

Answer 3

You can use the below script:

<script>
    function affich(montant){
        windows.alert('montant');
    }
</script>

Then in input you can do:

onclick="affich('montant')"