我无法使用 Javascript 检索在文本输入中键入的值

Question

我有一个问题，当我尝试检索我在文本输入中键入的值，并尝试在警报中打印它时，它什么也没显示，变量为空这是代码：
我这里有输入文本字段 'Montant'，我想使用底部按钮上的 onClick 事件检索它

<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>

这是脚本：

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

它什么也没显示，请注意我使用的是 Bootstrap，而 LARAVEL

这是我从我自己的项目中检索到的更详细的代码：

@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 并试试这个

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

Answer 2

您可以使用以下脚本：

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

然后在输入中你可以这样做：

onclick="affich('montant')"

Answer 3

ID 必须是唯一的，但您对每个数字输入使用相同的 ID idMontant1。（浏览器可能猜不出你指的是哪个元素，他总是select相同的输入）

可能的解决方案：您可以省略 ID，而是将按钮作为参数传递给 test() 。通过按钮，您将能够找到所需的输入：

找到表格（就是按钮的form-属性）
在表单中查找带有 name Montant 的输入（例如通过 element.querySelector）

简单演示（我删除了不相关的标记）

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>

我无法使用 Javascript 检索在文本输入中键入的值

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

javascript

onclick

twitter-bootstrap