html 页面完全加载后无法保留文本框值

Question

我正在尝试通过 javascript 以编程方式设置 html 页面中文本框的值。该值显示在文本框中，并在页面完全加载后消失。

注意：没有编写服务器端代码。

HTML 和 Javascript 代码：

function salutation(){
   document.getElementById('txt_salutation').value = 'Hi John';
}

   <!DOCTYPE html>
    <html>
    <head>
     <title>This is website title</title>
     <script type="text/javascript" src="sample.js"></script>
    </head>
    <body style="background-color:powderblue;">
     <form id="form1" name="form1">
      Name:<br>
      <input id='txt_salutation' type='text'><br>
     </form>
     <button id='btn_submit' form = "form1" type="Submit" value="Submit" onclick="salutation()">Submit</button>
    </body>

Answer 1

function salutation(){
     document.getElementById('txt_salutation').value = 'Hi John';
    }

<!DOCTYPE html>
    <html>
    <head>
     <title>This is website title</title>
     <script type="text/javascript" src="sample.js"></script>
    </head>
    <body style="background-color:powderblue;">
     <form id="form1" name="form1">
      Name:<br>
      <input id='txt_salutation' type='text'><br>
     </form>
     <button id='btn_submit'  type="Submit" value="Submit" onclick="salutation()">Submit</button>
    </body>

我已经从按钮中删除了属性 form=form1。提交表单制作新按钮。

Answer 2

这将使值显示在文本框中并且不会消失：

    function salutation() {
        event.preventDefault();
        document.getElementById('txt_salutation').value = 'Hi John';
        // send the data to server by ajax
    }

<!DOCTYPE html>
<html>
<head>
    <title>This is website title</title>
    <script type="text/javascript" src="sample.js"></script>
</head>
<body style="background-color:powderblue;">
    <form id="form1" name="form1">
        Name:<br>
        <input id='txt_salutation' type='text'><br>
    </form>
    <button id='btn_submit' form = "form1" type="Submit" value="Submit" onclick="salutation()">Submit</button>
</body>

Answer 3

在进一步阅读之前应考虑以下内容：

form attribute is not supported in any IE, and only with Chrome 10 + and Firefox 4+. See this HTML <button> form Attribute

当您 click 类型为 submit 的按钮时，会发生以下情况：

The form will be submitted to the server and the browser will redirect away to the current address of the browser and append as query string parameters the values of the input fields.

由于没有在表单上设置 action，浏览器重定向到同一页面。

并且由于它是重定向（不是回发），因此您在 javascript 中设置的值在重定向过程中会从输入框中丢失。

如果您单击 浏览器后退 按钮，您将在文本框中看到设置的值 'Hi John'。

如果您不确定届时用户会使用哪种浏览器，强烈建议使用所有浏览器都支持的功能

所以，您的代码没有任何问题。

html 页面完全加载后无法保留文本框值

Unable to retain the textbox value when the html page is completely loaded

html

javascript

client-side-scripting