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
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:form
-property of the button)name
Montant
within the form(e.g. viaelement.querySelector
)Simple demo(I've removed the irrelevant markup)