javascript表单预览页面

最新推荐文章于 2024-07-03 20:05:58 发布
最新推荐文章于 2024-07-03 20:05:58 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： 前端 文章标签： input class c div url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zalion/article/details/5613440
版权

表单页面

<html>
<head>
<title>
添加商品信息
</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<mce:script type="text/javascript" src="../js/admin.js" mce_src="js/admin.js"></mce:script>
</head>
<body bgcolor="gray" οnlοad="twolist(document.getElementById('one_class').value)">
<div id="addcomm" style="font-size:12px" mce_style="font-size:12px">
<form method="post" id="form1">
<table width="800" >
<tr>
<td align="right">商品名称：</td>
<td align="left"><input type="text" name="c_name" id="c_name"></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">商品类别：</td>
<td align="left" width="20%">
<select name="one_class" id="one_class" οnchange="twolist(this.options[this.options.selectedIndex].value)">
{section name=s loop=$oneclass}<option value="{$oneclass[s].typeid}">{$oneclass[s].type_name}</option>{/section}</select> <div id="list"></div>
</td>
<td align="left"></td>
<td></td>
</tr>

<tr>
<td align="right">尺码：</td>
<td align="left"><input type="text" name="c_size" id="c_size" size="10"> 颜色：<input type="text" name="c_color" id="c_color" size="10">
风格：<input type="text" name="c_style" id="c_style" size="10"> 面料：<input type="text" name="c_cotton" id="c_cotton" size="10">
</td>
<td ></td>
<td></td>
</tr>

<tr>
<td align="right">价格：</td>
<td align="left"><input type="text" name="c_price" id="c_price" size="10"> 品牌名：<input type="text" name="c_mark" id="c_mark" size="10"></td>
<td></td>
<td></td>
</tr>

<tr>
<td align="right">首页上传图片：</td>
<td align="left"><input type="file" name="c_img" id="c_img"></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td cols="3"><textarea name="content" id="content" style="display:none" mce_style="display:none"></textarea</td>
</tr>
<tr>
<td></td>
<td><input type="button" name="view" value="预览" οnclick="preview()"> <input type="submit" name="addcomm" value="发布商品"> <input type="reset" name="reset" value="取消" ></td>
<td></td>
<td></td>
</tr>

</table>

</form>

</div>
</body>
</html>


预览页面

<html>
<head>
<title>预览页面</title>
<mce:script type="text/javascript"><!--
function showit() {
  document.getElementById("sp_name").innerHTML=window.opener.document.getElementById("c_name").value;
  document.getElementById("sp_style").innerHTML=window.opener.document.getElementById("c_style").value;
  document.getElementById("sp_size").innerHTML=window.opener.document.getElementById("c_size").value;
  document.getElementById("sp_color").innerHTML=window.opener.document.getElementById("c_color").value;
  document.getElementById("sp_mark").innerHTML=window.opener.document.getElementById("c_mark").value;
  document.getElementById("sp_cotton").innerHTML=window.opener.document.getElementById("c_cotton").value;
  document.getElementById("sp_price").innerHTML=window.opener.document.getElementById("c_price").value;

  var selectObji=window.opener.document.getElementById("one_class");
  var ones=selectObji.options[selectObji.selectedIndex].text;

  var img_url=window.opener.document.getElementById("c_img").value;
  var img_display='<img src="'+img_url+'" mce_src="'+img_url+'">';
  document.getElementById("sp_img").innerHTML=img_display;

  var ak47=window.opener.document.getElementById("two_class");
  var twos=ak47.options[ak47.selectedIndex].text;
  document.getElementById("sp_type").innerHTML=ones+' - '+twos;

  var cont=window.opener.document.getElementById("content").value;

}
// --></mce:script>
</head>
<body bgcolor="allblue" οnlοad="showit();">
<div id="view" style="margin:100 100 100px;text-algin:center" mce_style="margin:100 100 100px;text-algin:center">
<table>
<tr>
<td align="right">商品名称：</td>
<td><div id="sp_name"></div></td>
<td></td>
</tr>

<tr>
<td align="right">类别：</td>
<td><div id="sp_type"></div></td>
<td></td>
</tr>

<tr>
<td align="right">风格：</td>
<td><div id="sp_style"></div></td>
<td></td>
</tr>

<tr>
<td align="right">尺码：</td>
<td><div id="sp_size"></div></td>
<td></td>
</tr>

<tr>
<td align="right">颜色：</td>
<td><div id="sp_color"></div></td>
<td></td>
</tr>

<tr>
<td align="right">面料：</td>
<td><div id="sp_cotton"></div></td>
<td></td>
</tr>

<tr>
<td align="right">价格：</td>
<td><div id="sp_price"></div></td>
<td></td>
</tr>


<tr>
<td align="right">品牌名：</td>
<td><div id="sp_mark"></div></td>
<td></td>
</tr>

<tr>
<td align="right">首页图片显示：</td>
<td><div id="sp_img"></div></td>
<td></td>
</tr>


<tr>
<td align="right">商品内容信息：</td>
<td><div id="sp_cont"></div></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>






 

一拳超超人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 进行表单验证
2401_82968855的博客
06-22 612
本篇主要介绍使用 JavaScript 进行表单验证。表单验证并不是 JavaScript 提供的某种特性，而是结合各种特性达到的一种目的，是需求的产物。所有线上产品的表单几乎都有验证，如注册时要求“用户名 6-16 位”，验证会由 JavaScript 来完成，通常为了安全性和准确性，服务端会再次做一遍验证。
JavaScript 图片预览效果 推荐
10-29
首先，图片预览的基本原理涉及两个关键步骤：一是从`<input type="file">`表单控件中获取图像数据，二是将这些数据转化为可以在页面上显示的预览图像。程序通常会创建一个`<img>`元素来显示预览效果。 针对不同...
[JavaScript]_[中级]_[动态创建表单并提交到新页面_实现后台内容预览]
Tobey(我是机器人)
09-21 746
1. 在开发`JavaWeb`后台功能的时候，有时候需要对正在编辑的表单里的数据进行前端模拟预览，这样能提前发现问题并修正，修正完之后就可以正式提交。好处就是避免了让客户浏览到错误的数据，那么如何做？
JS（JavaScript）数据校验 表单校验-案例
最新发布
分享式获得也是一种学习的态度
07-03 1169
天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。 今人不见古时月，今月曾经照古人。 古人今人若流水，共看明月皆如此。 ——《把酒问月·故人贾淳令予问之》 文章目录JS（JavaScript）数据校验 表单校验-案例1. 目的2. 实现3. 案例演示3.1 预览效果3.2 示例代码3.3 示例代码演示3.4 示例代码下载 JS（JavaScript）数据校验 表单校验-案例
表单分向提交（javascript提交表单）
hugh 的博客
03-30 1056
同一个表单可以根据用户的选择，提交给不同的后台处理程序。（ 一个jsp页面中多个提交按钮提交不同的页面）即，表单的分向提交。如，在编写论坛程序时，如果我们希望实现用户在发送贴子的时候，既发送提交功能又有预览功能时，就会遇到上述问题。<span style="font-size:24px;">登录注册页面：</span> form action="LoginServlet" name="loginf
JavaScript零基础入门 11：JavaScript实现图片上传并预览
学Java，找哪吒
12-28 8157
一、前端界面是通过jqgrid展示的 jqgrid是典型的B／C架构（浏览器／服务器模式），服务器端只需提供数据管理，浏览器只需负责数据显示。 jqGrid是用ajax实现对请求和响应的处理，支持局部实时刷新。 二、jqgrid特性 1、通过配置url地址数据显示格式 2、支持行编辑，列搜索过滤 3、支持分页 4、添加表单支持文件上传 5、链式调用 三、代码实例 1、jqgrid页面展示 $(document).ready(function () { $("#gridTable").jqGrid({
form表单、右侧预览功能，form表单与右侧预览区域联动
m0_52743009的博客
10-10 420
【react】form表单提交、右侧预览功能，form表单与右侧预览区域联动
绑定支付卡表单页面html页面前端源码
mazai5080的博客
06-26 699
本源码编码：10207，👇👇👇搜索10207👇👇👇，即可获取。
用JavaScript实现图片上传并预览
学Java，找哪吒
06-05 2424
一、前端界面是通过jqgrid展示的 jqgrid是典型的B／C架构（浏览器／服务器模式），服务器端只需提供数据管理，浏览器只需负责数据显示。 jqGrid是用ajax实现对请求和响应的处理，支持局部实时刷新。 二、jqgrid特性 1、通过配置url地址数据显示格式 2、支持行编辑，列搜索过滤 3、支持分页 4、添加表单支持文件上传 5、链式调用 三、代码实例 1、jqgrid页面展示 $(document).ready(function () { $("#gridTabl
JavaScript
书生的博客
10-25 1103
1、概述JavaScript是一种脚本语言。JavaScript可以实现动态页面。BOM：浏览器模型DOM：文档对象模型2、JavaScript的特点动态改变页面内容动态改变网页的外观验证表单数据响应事件2、JavaScript的预解析：3、页面使用javascript的方法
javascript 获取表单file全路径
10-29
在JavaScript中，处理HTML表单中的`<input type="file">`元素时，尤其是在不同的浏览器环境中，获取文件的完整路径可能会遇到兼容性问题。本文将深入探讨如何在IE6、IE7以及Firefox等浏览器中获取文件输入控件的全...
Jquery 表单验证+本地图片上传-切割-预览
05-08
在本项目中，"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例，它涵盖了几个重要的JavaScript库和技术，包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释：...
javascript 表单中浏览文件的“浏览”按钮修改
10-29
### JavaScript 表单中浏览文件的“浏览”按钮修改 #### 知识点概述 本文主要探讨了如何在HTML表单中实现一个自定义的文件浏览功能。通过使用JavaScript，我们可以创建一个更加用户友好的界面来选择文件，而不是...
javascript图片上传预览
10-30
在JavaScript中实现图片上传预览是一项常见的前端功能，它允许用户在正式上传图片到服务器之前先看到图片的效果，提供了一种良好的用户体验。这个过程通常包括选择图片、读取图片数据、处理图片（如尺寸调整）以及在...
Jquery Javascript 取得iframe中元素的几种方法
热门推荐
一米阳光
09-19 11万+
<br />query取得iframe中元素的几种方法<br /> <br />在iframe子页面获取父页面元素<br /> 代码如下:<br /><br /> $('#objId', parent.document);<br /> // 搞定...<br /><br /><br /> 在父页面 获取iframe子页面的元素<br /> 代码如下:<br /><br /> $("#objid",document.frames('iframename').document)<br /> <br
JQuery实现全选与取消
一米阳光
09-19 6931
用JQUERY实现全选和取消全选,没有js那么繁琐，而且支持更多浏览器。 <!-- $(function() { $("#checkall").click(function() { $("input[@name='checkname[]']").each(function() { $(this).attr("checked", tr
javascript自动查找select下拉的菜单并选择
一米阳光
10-17 6630
function find_select(name) { var select = document.getElementsByName(name); var find_str = document.getElementById('to_find_str').value; if(select) { select = select[0]; var child = select.chi
textarea滚动条设置
一米阳光
09-19 5284
没有水平滚动条：     &lt;textarea   style="overflow-x:hidden"&gt;&lt;/textarea&gt;        没有垂直滚动条:        &lt;textarea   style="overflow-y:hidden"&gt;&lt;/textarea&gt;         没有滚动条:      &lt;textare
使用Dreamweaver创建网页表单：欢乐购注册页面制作教程
同时，对于前端开发者来说，了解表单的验证（如使用JavaScript进行客户端验证）和错误处理也是至关重要的，以确保用户提交的数据准确无误。 网页设计与制作课件的第9章深入讲解了如何在Dreamweaver中创建和管理表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值