如何使用javascript顯示來自HTML文本框的輸入

Question

我想從html輸入字段中接收一個整數，然后運行一個顯示我剛剛提交的內容的javascript文件。

我想念什么？

HTML：

 <body>
        <![endif]-->
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script src="js/server_browse.js"></script>
        <p>Search the Database</p>
        <p>Enter the PO number:</p>

        <form id="PO" action="js/server_browse.js">
            PO:
            <input name="entry" type="number">
            <input type="submit">
        </form>

單獨的javascript文件：

function output() {
    var x = document.getElementsByTagName("PO");
    var y = Number(x.elements["entry"]);
    var g = y.toString();
    document.write(g);
}

我很清楚我只是想確保所有事情都正常完成，所以javascript很笨拙。

Answer 1

訪問元素

getElementsByTagName返回類似數組的元素列表，而不是單個元素
PO不是標簽名稱，標簽名稱是form
PO是id ，請使用getElementById

獲得價值

HTML元素對象不是該對象的值。 您需要訪問.value屬性

Answer 2

很快，我覺得我們應該談談代碼的上半部分。 實際上，只有在嘗試快速添加測試內容時才使用CDN。 甚至jQuery也會告訴您不要在生產環境中鏈接到他們的文件，因為您永遠不知道他們的服務器何時會停機或被請求淹沒。 包括您自己的jQuery副本-這就是您首先下載它的原因。 另外，避免document.write() ，您會因此更加喜歡自己。 如果您需要檢查某物的值但不想將其添加到文檔中，請使用console.log並檢查瀏覽器開發人員的控制台。

<!--<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 In production, it is NOT recommended to use this. 
<script>
  window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
</script>
   just include the local version of jQuery automatically. -->
<script src="js/vendor/jquery-1.12.0.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/server_browse.js"></script>

接下來的事實是，您包括了jQuery，但是從不使用它。 jQuery雖然是一個相當緊湊的庫，但它仍然是瀏覽器必須加載才能繼續運行的額外腳本。 如果您不打算使用它，請擺脫它。 如果您要使用它，那么請確保我們正確使用了它。

最后，您具有此輸出功能，據我所知，該功能未附加任何內容。 我沒有看到您指示瀏覽器在任何時候運行該功能的位置。

這是我將要針對的片段做的事情。

 $(function() { $('#PO :submit').on('click', function(e) { //Normally I would use $('#PO').on('submit'... //But the sandbox model doesn't allow for that to work correctly. So, we are using this. e.preventDefault(); var $this = $(this); //Notation I use to have the jQuery object and regular object of this event; var value = $this.siblings('[name="entry"]'); //If using this function from the form, this line would change to //var value = $this.find('[name="entry"]'); $('#results').html("Input value: " + value.val()); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="PO" action="js/server_browse.js"> PO: <input name="entry" type="number"> <input type="submit"> </form> <div id="results"></div>

沒有jQuery

如果您想獲得相同的結果但不使用jQuery（即使包含了它），也可以：

 window.addEventListener('load', function() { var element = document.getElementById('PO-submit'); //When not using a snippet, change to document.getElementById('PO'); element.addEventListener('click', function(e) { //change to element.addEventListener('submit',... e.preventDefault(); e.cancelBubble = true; var result_div = document.getElementById('results'); //Get the HTMLElement for the results ID element. var form_input = this.form.elements['entry']; //Change to this.elements['entry']; result_div.innerHTML = 'Results :' + form_input.value; }); });

 <form id="PO"> PO: <input name="entry" type="number"> <input id="PO-submit" type="submit"> </form> <div id="results"></div>

如何使用javascript顯示來自HTML文本框的輸入

問題描述

2 個解決方案

解決方案1
2

訪問元素

獲得價值

解決方案2
0 已采納 2016-12-22 21:30:02

沒有jQuery

如何使用javascript顯示來自HTML文本框的輸入

問題描述

2 個解決方案

解決方案1 2

訪問元素

獲得價值

解決方案2 0 已采納 2016-12-22 21:30:02

沒有jQuery

解決方案1
2

解決方案2
0 已采納 2016-12-22 21:30:02