Question

我有一个问题，当我尝试检索我在文本输入中输入的值时，我尝试在警报中打印它，它什么也没显示，变量是空的这是代码：
我在这里输入文本字段＆＃39; Montant＆＃39;，我想使用底部按钮上的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。（浏览器可能无法猜出你指的是哪个元素，他总是会选择相同的输入）

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

找到表单（它是form - 按钮的属性）
在表单中找到name Montant的输入（例如，通过element.querySelector）

简单演示（我已删除无关标记）

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: