無法將事件附加到表單中的提交按鈕

在下一頁「https://www.capgemini.com/new-ways-to-accelerate-innovation」。有「展開」按鈕的多個部分，當您單擊展開按鈕時，表單會暴露。這裏的問題是我無法將點擊事件附加到「提交」按鈕。無法將事件附加到表單中的提交按鈕

我試過使用addeventlistner，但事件沒有得到分配。

我該怎麼做，請指教。

https://www.capgemini.com/new-ways-to-accelerate-innovation

展開按鈕是在下面的代碼。

<div class="exp_article-header-bg"> 
    <div class="exp_article-header-inner"> 
    <h2 class="exp_article-header-title">TechnoVision 2017</h2> 
    <div class="exp_article-header-author"></div> 
    <div class="exp_article-header-lead"> 
     <p> 
     TechnoVision 2017 gives you a framework to create a new digital story to solve problems and grasp new opportunities. Our 37 technology building blocks will help you to navigate the technology maze and give a clear direction to your business. 
     </p> 
    </div> 
    <div class="exp_article-header-expand"> 
     ** 
     <div class="exp_link exp_link--white exp_link--expand"> 
     <span class="exp_link-label">EXPAND</span>** 
     <span class="exp_button-arrow exp_button-arrow--down"></span> 
     </div> 
    </div> 
    </div> 
</div>

當您單擊上述展開按鈕時，表單會被暴露。提交按鈕的格式如下所示。

<form accept-charset="UTF-8" method="post" action="https://go.pardot.com/l/95412/2017-08-09/2tfbfg" class="form" id="pardot-form"> 
    <style type="text/css"> 
     form.form p label { 
     color: #000000; 
     } 
    </style> 

    <p class="form-field email pd-text required "> 
     <label class="field-label" for="95412_59459pi_95412_59459">Email Address</label> 
     <input type="text" name="95412_59459pi_95412_59459" id="95412_59459pi_95412_59459" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 95412, 59459, 44072473);"> 
    </p> 
    <div id="error_for_95412_59459pi_95412_59459" style="display:none"></div> 
    <p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;"> 
     <label for="pi_extra_field">Comments</label> 
     <input type="text" name="pi_extra_field" id="pi_extra_field"> 
    </p> 

    <!-- forces IE5-8 to correctly submit UTF8 content --> 
    <input name="_utf8" type="hidden" value="☃"> 

    <p class="submit"> 
     <input type="submit" accesskey="s" value="Submit Now"> 
    </p> 

    <script type="text/javascript"> 
     //<![CDATA[ 
     var anchors = document.getElementsByTagName("a"); 
     for (var i = 0; i < anchors.length; i++) { 
     var anchor = anchors[i]; 
     if (anchor.getAttribute("href") && !anchor.getAttribute("target")) { 
      anchor.target = "_top"; 
     } 
     } 
     //]]> 
    </script> 
    <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value=""> 
    </form>

來源

2017-08-13 Srijith Ramachandran

有CSS顯示：無;對於需要擴展的元素。當點擊展開時調用一個javascript函數，該函數檢查元素是否隱藏，如果隱藏，則更改CSS display：block ;.

檢查下面的工作代碼。

<body> 
<div class="exp_article-header-bg"> 
    <div class="exp_article-header-inner"> 
     <h2 class="exp_article-header-title">TechnoVision 2017</h2> 

     <div class="exp_article-header-author"></div> 
     <div class="exp_article-header-lead"><p>TechnoVision 2017 gives you a framework to create a new digital story to 
      solve problems and grasp new opportunities. Our 37 technology building blocks will help you to navigate the 
      technology maze and give a clear direction to your business.</p> 
     </div> 
     <div class="exp_article-header-expand"> 
      ** 
      <div class="exp_link exp_link--white exp_link--expand"> 
       <button onclick="myFunction()" class="exp_link-label">EXPAND</button> 
       ** 
       <span class="exp_button-arrow exp_button-arrow--down" id="expandDiv" 
         style="color: #000066; background-color: gainsboro;display: none;">I Got Expanded</span></div> 
     </div> 
    </div> 
</div> 
</body>

JavaScript函數： -

<script> 
function myFunction() { 
    var x = document.getElementById('expandDiv'); 
    if (x.style.display === 'none') { 
     x.style.display = 'block'; 
    } else { 
     x.style.display = 'none'; 
    } 
} 
</script>

上plnkr檢查：https://plnkr.co/edit/MWKYxmV6Jk2eId3Owt2u?p=preview

來源

2017-08-13 05:34:34

哪裏是烏拉圭回合的形式開放？如果你正在使用jQuery，只需定位表單ID並執行.submit（）

來源

2017-08-13 05:37:26

你將要使用'onsubmit'事件偵聽器，很可能是使用預防性的click事件。

document.querySelector("#submit-button").addEventListener("submit", function(event) { 
    //your stuff here 
    event.preventDefault(); 
}, false);

來源

2017-08-13 05:39:49 User2419686

嗨，我試過了，它不工作！ –

嘿，你可以在你添加事件監聽器的地方添加JavaScript嗎？它看起來不在你原來的文章中。我建立了一個jsfiddle https://jsfiddle.net/ts5ycgm4/，只需分叉它，我們就可以從那裏開始。 – User2419686

無法將事件附加到表單中的提交按鈕

回答

相關問題