首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用.innerHTML重新加载后将表单ID的输出值保留在页面上

使用.innerHTML重新加载后,表单ID的输出值不会保留在页面上。innerHTML是一个属性,用于获取或设置指定元素的HTML内容。当使用innerHTML重新加载页面时,页面会被重新渲染,原有的内容会被替换掉。

要保留表单ID的输出值在页面上,可以使用其他方法来实现,例如使用JavaScript来处理表单提交和重新加载的逻辑。以下是一个示例代码:

代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
  <title>保留表单ID的输出值</title>
</head>
<body>
  <form id="myForm">
    <input type="text" id="inputField" value="">
    <button type="button" onclick="submitForm()">提交</button>
  </form>

  <div id="output"></div>

  <script>
    function submitForm() {
      var inputField = document.getElementById("inputField");
      var outputDiv = document.getElementById("output");
      var value = inputField.value;

      // 处理表单提交逻辑,例如发送到服务器进行处理

      // 更新输出值
      outputDiv.innerHTML = "表单ID的输出值:" + value;
    }
  </script>
</body>
</html>

在上述示例中,我们通过JavaScript获取表单输入框的值,并在点击提交按钮时更新输出值。这样即使重新加载页面,输出值也会被保留在页面上。

请注意,以上示例仅为演示目的,实际应用中可能需要根据具体需求进行适当的修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一个简单粗暴前后端分离方案

后端专注做业务逻辑,不想在后端做页面渲染事情,只向前端提供数据接口。于是协商打算前后端完全分离,页面上所有数据都通过ajax向后端取,页面渲染事情完全由前端来做。...之前也有看过淘宝团队实践,利用nodejs做一个中间层,处理页面渲染、路由控制、SEO等事情,前后端分界线进行了重新定义。...搜索、尝试了多种方法,最终方案定为:用document.write()编译结果写到页面,这样标签能够正常加载。...另外想说一点就是页面的缓存,异步加载内容可以存在localStorage中,也可以放在页面上进行显隐控制,这样用户在频繁切换视图时候无需再次请求,回到上一步时候之前填好表单数据也不会消失,体验会非常好...传统由后端渲染页面,url中参数会发送到服务端,服务端接收可以再渲染到页面上供js使用

1.5K10

javaScript常见document对象

) //获得指定ID对象 document.getElementsByName(Name) //获得指定Name对象 document.body.appendChild(oTag) ———...号部分 documeny.location.reload() //刷新网页 document.location.reload(URL) //打开新网页 document.location.assign...img /标签与之对应就可以显示 ———————————————————————- forms集合(页面中表单) a)通过集合引用 document.forms //对应页面上form标签...只有ie支持此属性,因此也用来判断浏览器种类*/ 图层对象4个属性 document.getElementById(”ID”).innerText //动态输出文本 document.getElementById...(”ID”).innerHTML //动态输出HTML document.getElementById(”ID”).outerText //同innerText document.getElementById

87051

Js面试题__附答案

===被称为严格等式运算符,当两个操作数具有相同而没有任何类型转换时,该运算符返回true。 12、说明如何使用JavaScript提交表单?...要使用JavaScript提交表单,请使用 document.form [0] .submit(); 13、元素样式/类如何改变?...'”旧内容仍然会被html替换;整个innerHTML内容被重新解析并构建成元素,因此它速度要慢得多;innerHTML不提供验证,因此我们可能会在文档中插入有效和破坏性HTML并将其中断。...Closure是与函数返回时保留在内存中函数相关本地声明变量。 例如: ? 40、一个如何附加到数组?...EncodeURl()用于URL转换为十六进制编码。而DecodeURI()用于编码URL转换回正常。 56、为什么不建议在JavaScript中使用innerHTML

8.8K30

js2

常用属性和方法: location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 弹出框 可以在 JavaScript...当警告框出现,用户需要点击确定按钮才能继续进行操作。 语法: alert("你看到了吗?"); 确认框(了解即可) 确认框用于使用户可以验证或者接受某些信息。...提示框(了解即可) 提示框经常用于提示用户在进入页面前输入某个。 当提示框出现,用户需要输入某个,然后点击确认或取消按钮才能继续操纵。 如果用户点击确认,那么返回为输入。...由 setInterval() 返回 ID 可用作 clearInterval() 方法参数。...clearInterval() 方法参数必须是由 setInterval() 返回 ID

2.2K10

BOM和DOM

常用属性和方法: location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面,就是刷新一下页面   上面的内容需要大家记住是...当提示框出现,用户需要输入某个,然后点击确认或取消按钮才能继续操纵。     如果用户点击确认,那么返回为输入。...先用函数封装一下,返回t其实就是一个id(浏览器给你自动分配)       setTimeout() 方法会返回某个。...,别忘了页面加载时候顺序,以防出现找不到标签情况出现,我们可以这个script标签放到body标签最下面,或者用window.onload,这里我没有放,你们练习时候放到下面去 var...= i; //省份数据添加到option标签中 p.appendChild(optionP);//option标签添加到select标签中 } //只要select中选择发生变化时候

52510

用JavaScript动态输出JS脚本不能执行

在公司产品动易2006版整合接口开发过程中,需要在客户端页面上输出一段调用远程接口写cookies代码,最早时候我是把调用url通过script方式输出。...动易2006前台登陆表单已经采用了Ajax技术,页面上所看到登陆表单并非直接由HTML代码在页面中写成,而是在页面加载以后,通过JS,通过Ajax,向服务器端asp程序查询用户登录状态以后,再动态输出到页面的...用alert调试发现代码已经正确生成,显然用innerHTML输出到页面以后,是没有问题。但是为什么没有登陆呢? 为这个问题,折磨了我一晚上。...,可以看到页面执行了远程js脚本,输出统计图标 把代码修改如下: 加载中......("div").innerHTML = newStr; 可以看到“加载中...”字样已经被下面的JS代码动态输出代码替换了,但是并没有显示统计图标,说明script脚本调用代码已经被输出到页面,但是没有被执行

3.3K50

【Java 进阶篇】HTML DOM 事件详解

接下来,让我们逐一介绍不同类型事件。 鼠标事件 点击事件(click) 点击事件是最常见事件之一,它在用户点击(或触摸)页面上元素时触发。...通过event.preventDefault(),我们阻止了表单默认提交行为,以便在警告框弹出保留在当前页面。 重置事件(reset) 重置事件在用户点击表单重置按钮时触发。...它通常用于表单输入字段重置为默认。...文档事件 加载事件(load) 加载事件在文档加载完成触发。它通常用于在页面加载完成执行一些初始化操作。... window.addEventListener('load', function() { alert('页面已加载'); }); 在这个示例中,当页面中所有内容都加载完成

18220

使用 Tampermonkey 编写高级跨网站自动化任务脚本

这意味着,使用 @require 标记脚本可能会在文档已加载执行,因为获取所需脚本花费了很长时间。...F12 可以很容易得到每个表单 id, 然后使用最简单操作 DOM 方式为表单赋值,我们也可以一些参数放到 URL 里面,再使用脚本自动解析 URL 填充到表单里。...API 可以打开一个新浏览器标签, url 是网页 URL,options 是一个对象,可以有以下几个: active 决定新 tab 是否被聚焦,聚焦意思是直接显示 insert 插入一个新...tab 在当前 tab 后面 setParent 在 tab 关闭重新聚焦当前 tab // grant GM_openInTab GM_openInTab('https://fizzz.blog.csdn.net...saveAs:boolean ,显示一个保存弹窗 onerror:下载以失败结束执行回调函数 onload 现在完成执行回调函数 onprogress 下载过程中变化回调函数 ontimeout

4.6K10

前端之BOM和DOM

常用属性和方法: kk //获取URL kk="URL" // 跳转到指定页面 location.reload() //重新加载页面 1.2.5弹出框 1.2.5.1警告框 警告框经常用于确保用户可以得到某些信息...1.2.5.7提示框 提示框经常用于提示用户在进入页面前输入某个。 当提示框出现,用户需要输入某个,然后点击确认或取消按钮才能继续操纵。 如果用户点击确认,那么返回为输入。...由 setInterval() 返回 ID 可用作 clearInterval() 方法参数。...clearInterval() 方法参数必须是由 setInterval() 返回 ID 。...处理方法 方法1:利用onload等待某个对象加载完毕再执行 方法2:直接JS代码写在body最下方,这样就不会出现调用函数还没加载问题了

2.7K30

js对象(BOM部分DOM部分)

常用属性和方法: location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 弹出框 可以在 JavaScript...当警告框出现,用户需要点击确定按钮才能继续进行操作。 语法: alert("你看到了吗?"); 确认框(了解即可) 确认框用于使用户可以验证或者接受某些信息。...提示框(了解即可) 提示框经常用于提示用户在进入页面前输入某个。 当提示框出现,用户需要输入某个,然后点击确认或取消按钮才能继续操纵。 如果用户点击确认,那么返回为输入。...由 setInterval() 返回 ID 可用作 clearInterval() 方法参数。...clearInterval() 方法参数必须是由 setInterval() 返回 ID

4.2K20

java文本框获得输入焦点_文本框获得焦点和失去焦点判断代码

文本框失去焦点事件、获得焦点事件 onBlur:当失去输入焦点产生该事件 onFocus:当输入获得焦点,产生该文件 Onchange:当文字改变时,产生该事件 Onselect:当文字加亮,产生该文件...,我们可以使用jQuery焦点函数focus(),blur()。...focus():得到焦点时使用,和javascript中onfocus使用方法相同。...=”密码不能大于6位” else document.getElementById(“s2″).innerHTML=””; } 用户名: 密码: 第一种: html5 html5给表单文本框新增加了几个属性...必须保证inputvalue为空, placeholder内容就是我们在页面上看到内容。 代码如下: 第二种: jQuery 原理:让表单val等于其title

4K40

【JavaEE初阶】博客系统后端

博客列表 当前博客列表数据都是写死.正确做法,应该是通过数据库读取数据显示到页面上. 此处就需要打通前后端交互操作....让博客列表,在加载时候,通过ajax给服务器发一个请求服务器查数据库获取到博客列表数据,返回给浏览器,浏览器再根据数据构造页面内容.这样交互过程,也称为“前后端分离" 前端只向后端请求数据,而不请求具体页面...开发前端代码 在博客列表加载过程中,触发ajax,访问服务器中数据.再把拿到数据构造到页面中. <!...如果是ajax请求(本身不会触发),响应是302,此时是无法进行跳转. 实现前端代码 往页面上加入from表单,使得点击登录操作能够触发请求. <!...发布博客 约定前后端交互接口 使用form表单:页面中更多了form标签,同时让form里面能够感知到博客内容.

22430
领券