第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

我希望我的按鈕在字段填滿后調(diào)用我的模式

我希望我的按鈕在字段填滿后調(diào)用我的模式

繁花不似錦 2022-09-29 16:50:56
我需要一些幫助，以便在這些字段填滿后才能找到調(diào)用我的模態(tài)的更簡(jiǎn)單方法：<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@email.com" class="form-control" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" id="contact:email">                                        </div>                                </div>到目前為止，我的按鈕正在三叉模式與未填充的字段，我知道我需要一些javascript代碼，作為一個(gè)沒有任何經(jīng)驗(yàn)的初學(xué)者，我正在掙扎。
查看完整描述

1 回答

?
藍(lán)山帝景

TA貢獻(xiàn)1843條經(jīng)驗(yàn) 獲得超7個(gè)贊

您可以向窗體中的每個(gè)元素和模式觸發(fā)器按鈕添加事件偵聽器，并循環(huán)遍歷所有輸入以顯示模式（如果它們都具有非空值）。您還需要從模式觸發(fā)器按鈕中刪除該屬性，并且僅以編程方式打開模式。這將導(dǎo)致模式在用戶單擊離開他們填寫的最后一個(gè)輸入時(shí)打開。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/popper.js@1.16.0/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@email.com" 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/popper.js@1.16.0/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@email.com" 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>


查看完整回答
反對(duì) 回復(fù) 2022-09-29
  • 1 回答
  • 0 關(guān)注
  • 117 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)