分享
为什么问答平台  ›  专栏  ›  技术社区  ›  Erixx

javascript函数更新HTML字段,然后删除它 - Javascript function updates html field then erases it

  •  -1
  • Erixx  · 技术社区  · 1 周前

    也许是个愚蠢的问题,但我不知道这种奇怪的javascript行为的根本原因:我的“提交按钮”调用了一个“javascript函数”,它 更新HTML字段(OK),然后删除它(NOK)! 为什么“demo”字段在执行后会被删除?是吗? (可能是有史以来最简单的stackoverflow问题之一!)

    <!DOCTYPE html>
    <html>
      <head></head>
    <body>
    
    <p id="demo"></p>
    
    <form>
      <button type="submit" value="Submit"
              onClick="launchSubmit()">Submit
      </button>
    </form>
    
    <script type="text/javascript">
        function launchSubmit(){
                document.getElementById("demo").innerHTML = "bla bla bla"; 
        }
    </script>
    
    </body>
    </html>
    
    4 回复  |  直到 1 周前
        1
  •  6
  •   ADyson    1 周前

    type="submit"

    type="button" <form></form> 还有标签。

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms

        2
  •  3
  •   JamesS    1 周前

    submit button 将保留屏幕上的值。

        3
  •  1
  •   shawn    1 周前

    return false onclick type=submit type=button 做一个普通的按钮。

    jQuery

    <!DOCTYPE html>
    <html>
      <head></head>
    <body>
    
    <p id="demo"></p>
    
    <form>
      <button type="submit" value="Submit"
              onClick="launchSubmit(); return false;">Submit
      </button>
    </form>
    
    <script type="text/javascript">
        function launchSubmit(){
                document.getElementById("demo").innerHTML = "bla bla bla"; 
        }
    </script>
    
    </body>
    </html>

    这个 查询 版本:

    <!DOCTYPE html>
    <html>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <head></head>
    <body>
    
    <p id="demo"></p>
    
    <form>
      <button id="the-button">Submit</button>
    </form>
    
    <script type="text/javascript">
        $('#the-button').on('click', function() {
            $('#demo').text('hello world');
            return false;
        });
    </script>
    
    </body>
    </html>
        4
  •  0
  •   Mosia Thabo    1 周前

    因为表单更新了该元素 id="demo 然后提交。为了使该元素保持不变,必须阻止表单提交。

    请注意:

    未提供操作时,HTML表单将始终提交事件。 当您不提交操作时,它将提交到同一页,更多 类似于重新加载,但在内存中有表单数据。

    所以这就是你解决问题的方法:

    function launchSubmit(event){
        event.preventDefault();
        document.getElementById("demo").innerHTML = "bla bla bla"; 
    }
    <p id="demo"></p>
    
    <form name="form">
      <button type="submit" value="Submit"
              onClick="launchSubmit(event)">Submit
      </button>
    </form>