Question

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

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

HTML和Javascript代码：

＆＃13;

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

＆＃13;

   <!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>

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

Answer 2

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 3

在进一步阅读之前应该考虑以下事项：

任何IE都不支持
form属性，仅限Chrome 10 +和Firefox 4+。见HTML <button> form Attribute

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

表单将提交给服务器，浏览器将重定向到浏览器的当前地址，并作为查询字符串参数附加输入字段的值。

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

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

如果您点击浏览器返回按钮，您会在文本框中看到设置值'Hi John'。

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

因此，您的代码没有任何问题。

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

3 个答案: