亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

我希望我的按鈕在字段填滿后調用我的模式

我希望我的按鈕在字段填滿后調用我的模式

繁花不似錦 2022-09-29 16:50:56
我需要一些幫助，以便在這些字段填滿后才能找到調用我的模態的更簡單方法：<form action="" id="myForm">                                <fieldset>                                    <input type="hidden" name="action" value="contact_send" />                                    <div class="row">                                        <div class="col-md-4">                                            <label for="contact:name">Full Name *</label>                                            <input required type="text" value="" placeholder="Full name" class="form-control" name="fullname" id="contact:name">                                        </div>                                        <div class="col-md-4">                                            <label for="contact:compagny">Compagny Name *</label>                                            <input required type="text" value="" placeholder="Compagny Name" class="form-control" name="compagny" id="contact:compagny">                                        </div>                                        <div class="col-md-4">                                            <label for="contact:email">Email</label>                                            <input required type="email" value="" placeholder="[email protected]" class="form-control" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" id="contact:email">                                        </div>                                </div>到目前為止，我的按鈕正在三叉模式與未填充的字段，我知道我需要一些javascript代碼，作為一個沒有任何經驗的初學者，我正在掙扎。
查看完整描述

1 回答

?
藍山帝景

TA貢獻1843條經驗 獲得超7個贊

您可以向窗體中的每個元素和模式觸發器按鈕添加事件偵聽器，并循環遍歷所有輸入以顯示模式（如果它們都具有非空值）。您還需要從模式觸發器按鈕中刪除該屬性，并且僅以編程方式打開模式。這將導致模式在用戶單擊離開他們填寫的最后一個輸入時打開。blurinputdata-target

const form = document.querySelector("#myForm");

const inputs = [...form.querySelectorAll("input")];

const modalTrigger = document.querySelector("button[type=submit]");

inputs.forEach(input=>{

    input.addEventListener("blur", openModalIfAllFilled);

});

function openModalIfAllFilled(){

    const allFilled = inputs.every(a=>a.value.trim());

  if(allFilled){

    $('#exampleModal').modal('show');

  }

}

modalTrigger.addEventListener("click", openModalIfAllFilled);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<form action="" id="myForm">

                                <fieldset>

                                    <input type="hidden" name="action" value="contact_send" />


                                    <div class="row">

                                        <div class="col-md-4">

                                            <label for="contact:name">Full Name *</label>

                                            <input required type="text" value="" placeholder="Full name" class="form-control" name="fullname" id="contact:name">

                                        </div>

                                        <div class="col-md-4">

                                            <label for="contact:compagny">Compagny Name *</label>

                                            <input required type="text" value="" placeholder="Compagny Name" class="form-control" name="compagny" id="contact:compagny">

                                        </div>

                                        <div class="col-md-4">

                                            <label for="contact:email">Email</label>

                                            <input required type="email" value="" placeholder="[email protected]" class="form-control" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" id="contact:email">

                                        </div>

                                </div>

                                <div class="row">

                                        <div class="col-md-6">

                                            <label for="contact:phone">Phone *</label>

                                            <input type="tel" value="" class="form-control input-phone" placeholder="999 999-9999" name="phone" id="contact:phone" pattern="[0-9]{3} [0-9]{3}-[0-9]{4}" maxlength="12" onkeydown="return event.keyCode !== 69">

                                        </div>

                                        </div>

                                        </fieldset>

                            </form>

                            <!-- Button trigger modal -->

                                <div class="row">

                                    <div class="col-md-12">

                                        <button type="submit" class="btn btn-primary active"><i class="fa fa-check"></i> SEND MESSAGE</button>

                                    </div>

                                </div>

                                <!-- Modal -->

                                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

                                    <div class="modal-dialog" role="document">

                                    <div class="modal-content">

                                        <div class="modal-header">

                                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                                            <span aria-hidden="true">&times;</span>

                                        </button>

                                        </div>

                                        <div class="modal-body">

                                        ...

                                        </div>

                                        <div class="modal-footer">

                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                                        </div>

                                    </div>

                                    </div>

                                     </div>

這也可以用jQuery編寫，以獲得更好的瀏覽器支持。

$("#myForm input").blur(openModalIfAllFilled);

$("button[type=submit]").click(openModalIfAllFilled);

function openModalIfAllFilled(){

    var notAllFilled = $('#myForm input').is(function(index, element){

    return !element.value.trim();

  });

  if(!notAllFilled){

    $('#exampleModal').modal('show');

  }

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<form action="" id="myForm">

                                <fieldset>

                                    <input type="hidden" name="action" value="contact_send" />


                                    <div class="row">

                                        <div class="col-md-4">

                                            <label for="contact:name">Full Name *</label>

                                            <input required type="text" value="" placeholder="Full name" class="form-control" name="fullname" id="contact:name">

                                        </div>

                                        <div class="col-md-4">

                                            <label for="contact:compagny">Compagny Name *</label>

                                            <input required type="text" value="" placeholder="Compagny Name" class="form-control" name="compagny" id="contact:compagny">

                                        </div>

                                        <div class="col-md-4">

                                            <label for="contact:email">Email</label>

                                            <input required type="email" value="" placeholder="[email protected]" class="form-control" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" id="contact:email">

                                        </div>

                                </div>

                                <div class="row">

                                        <div class="col-md-6">

                                            <label for="contact:phone">Phone *</label>

                                            <input type="tel" value="" class="form-control input-phone" placeholder="999 999-9999" name="phone" id="contact:phone" pattern="[0-9]{3} [0-9]{3}-[0-9]{4}" maxlength="12" onkeydown="return event.keyCode !== 69">

                                        </div>

                                        </div>

                                        </fieldset>

                            </form>

                            <!-- Button trigger modal -->

                                <div class="row">

                                    <div class="col-md-12">

                                        <button type="submit" class="btn btn-primary active"><i class="fa fa-check"></i> SEND MESSAGE</button>

                                    </div>

                                </div>

                                <!-- Modal -->

                                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

                                    <div class="modal-dialog" role="document">

                                    <div class="modal-content">

                                        <div class="modal-header">

                                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                                            <span aria-hidden="true">&times;</span>

                                        </button>

                                        </div>

                                        <div class="modal-body">

                                        ...

                                        </div>

                                        <div class="modal-footer">

                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                                        </div>

                                    </div>

                                    </div>

                                     </div>


查看完整回答
反對 回復 2022-09-29
  • 1 回答
  • 0 關注
  • 122 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號