select利用input 传递值到后端

最新推荐文章于 2023-12-22 21:41:52 发布
最新推荐文章于 2023-12-22 21:41:52 发布
阅读量4.9k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012129033/article/details/78188807
版权 


<html lang="en">
<body>
    <form id="login" name="login" method ="post" action="/test3/">
        <span style="margin-left:100px;width:0px;overflow:hidden" >
            <select style="width:118px;margin-left:100px;height:25px" οnchange="A()" id="SS">
            <option value="A">1</option>
            <option value="B">2</option>
            <option value="C">3</option>
            </select>
        </span>
        <input name="boxname" id="box" style="width:100px;position:absolute;left:0px;height:25px">
        <p><input id="subLogin"  name ="subLogin" type="submit" value="提交" /></p><!--提交按钮-->
    {% csrf_token %}
    </form>
</body>
<script language="javascript">
    function A(){
       document.getElementById('box').value=
       document.getElementById('SS').options[document.getElementById('SS').selectedIndex].value;
{#       document.getElementById('SS').value;#}
    }
</script>




getElementBy 参数用法

getElementById()
通过ID来取得元素, 只能访问设置了ID的元素


getElementsByName()
通过NAME获得元素,DOCUMENT元素ID是唯一的但NAME却可以重复.如果一个html中有两个以上的标签NAME相同,getElementsByName()可以取得这些元素组成一个数组
<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></div>
可以用getElementsByName("docname")获得这两个DIV,用getElementsByName("docname")[0]访问第一个DIV


getElementsByTagName_r()
通过TAGNAME（标签名称）来获得元素,DOCUMENT中当然会有相同的标签,所以这个方法也是取得一个数组.
用getElementsByTagName_r("div")来访问,用getElementsByTagName_r("div")[0]访问第一个DIV,getElementsByTagName_r("div")[1]访问第二个



深圳-张
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
解决form中action属性后面?传递参数 获取不到的问题
10-19
这是因为当`method`是`GET`时，浏览器只会处理表单内的`<input>`、`<select>`、`<textarea>`等元素的`name`与`value`作为请求参数，而不会考虑`action`属性后面手动添加的参数。 要解决这个问题，我们需要将`method...
页面xml解析input自动赋值工具
10-30
这在用户界面的数据保存或提交时非常有用，使得前端的数据可以无缝地传递给后端服务器进行处理。这种动态转化不仅简化了开发者的工作，也提高了用户体验，因为用户可以直接在界面上进行数据编辑，而无需理解底层的...
select传值给后台、根据后台值选中
最新发布
qq_44700578的博客
12-22 307
select传值给后台、根据后台值选中. 某个实体类新增、修改为同一个jsp页面，使用form表单向后端传递数据。其中有个select选择框，需要达到的效果为：新增的时候 显示默认值，修改的时候 显示从后端传过来的值。
在jsp/html中的select下拉菜单如何传值到后台以及接收后台的传值
你好啊cbw
08-19 9767
JSP/Html中select下拉菜单传递被选中的值和接收值都是同样的逻辑，只是形式不同。 select传递选中的值到后台： 后台传值到select： HTML的select传递选中的值到后台 JSP中的select传递选中的值到后台 ...
vue+elementUI 前端 select选择框同时传两个值给后端
weixin_44289771的博客
01-12 4516
介绍： form表单中有一个select选择框，下拉框显示人员名称，选中之后显示在框里 要求： 今天后端小哥哥要求选中之后，form表单提交时，select选择框同时传递两个值，即选中的人员姓名以及人员id。 实现： <el-form-item label="居住情况：" prop="liveTypeName"> <el-select v-model="ruleForm.liveTypeName
select向后台传值以及返回后回显option的值
xiaobai_267的博客
08-11 1302
select向后台传值以及返回后回显option的值。
el-select下拉框同时传两个甚至更多值给后端
weixin_56733569的博客
07-19 2720
el-select下拉框传多个值给后端
HTML下拉列表(select)，单选框(radio), 复选框(checkbox)如何向后端传值
starh的博客
04-12 1万+
前言 提示：该文章记录前端往后端传值的一些细节 提示：以下是本篇文章正文内容，下面案例可供参考 一、form是什么？ form是前端往后端传值的一个表单 二、html代码如下 1，下拉列表源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <...
date_select.rar_dateSelect
09-22
在IT行业中，日期选择器（Date Select）是一个常见的交互组件，尤其在网页开发中，它允许用户方便地选择日期，并将选定的日期值传递给后端或者显示在页面上。"date_select.rar_dateSelect"这个文件很可能是某种日期...
ASP.NET向Javascript传递变量两种实现方法
10-27
在服务器端，你可以将需要传递的值设置到隐藏控件的属性中，然后在客户端的JavaScript中通过DOM（Document Object Model）操作获取该隐藏控件的值。例如： ```html <input type="hidden" id="hiddenField" runat=...
JS实现动态生成表格并提交表格数据向后端
11-24
在JavaScript（JS）中动态生成表格并提交数据到后端是一项常见的前端开发任务，它涉及到DOM操作、事件处理以及与服务器的交互。以下是对这个过程的详细解释： 首先，为了实现动态生成表格，我们需要引入一个...
el-select同时获取value和label的值同时传值给后端
Cherry
11-23 3712
el-select同时获取value和label的值同时传值给后端
基于select2多选下拉菜单带模糊搜索，并传值给java后端
shuest的博客
11-22 1233
前端效果图： 带模糊搜索，可以选中，也可以删除选择的，也可以全部删除，被选中的会变黑。 实现方式： 首先，加入一些依赖的js资源，可以直接网上获得： <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script> <link h...
select 下拉框 传值到后台和从后台传值到前端显示
热门推荐
weixin_39209728的博客
12-29 2万+
1. select 下拉框，选择值后传值到后台 &lt;input type="hidden" id="state" name="state" id="state" class="projectfile" value="${model.state}" /&gt; &lt;select class="form-control projectfile&qu
前端向后台传值的5种方式总结
lizhengze1117的博客
08-06 8632
一、form表单提交（常用） from表单把所有属于表单中的内容提交给后台，例如输入框，单选框，多选框，文本域，文件域等。 在后台可通过对应的name属性获取相应的值。 from表单中的action属性标识提交数据的地址。 method属性指明表单提交的方式。 <form action="demo.do" method="post"> 用户名：<br> <input type="text" name="username"><br>
input框上传文件并传给后端
weixin_58448088的博客
07-02 2729
input框上传文件并传给后端
Vue element中select下拉框name和value都传给后台
li22356的博客
01-21 4996
最近遇到一个小问题select下拉框的value和name都要传递给后台 解决方案如下： 首先写一个chang事件 <el-select v-model="bpmData.typeCode" placeholder="请选择所属分类类型" clearable @change="majorChange($event)"> <el-option v-for="item in typeArray" :key="item.id" :label="item.name"
from表单中的选项，<input type="radio">、<select>以及<input type="checkbox">如何将用户点击好的参数传递到flask后端，并且按钮显示的数据与传入的数据不一致
04-05
当用户点击一个<input type="radio">或<input type="checkbox">按钮时，可以通过JavaScript获取它的值，并将值作为参数传递到Flask后端。例如，可以使用jQuery来获取选中的<input type="radio">按钮的值： ``` var value = $("input[name='my_radio']:checked").val(); ``` 然后使用Ajax将值发送到Flask后端： ``` $.ajax({ type: "POST", url: "/my_url", data: {"my_value": value}, success: function(response) { // handle response from Flask } }); ``` 在Flask后端，可以使用request.form.get()方法获取传递的值： ``` from flask import Flask, request app = Flask(__name__) @app.route("/my_url", methods=["POST"]) def my_endpoint(): value = request.form.get("my_value") # do something with value ``` 对于<select>表单元素，可以在<form>标记中为<select>指定一个name属性，然后在Flask后端使用request.form.get()方法来获取所选选项的值。例如： HTML代码： ``` <form action="/my_url" method="POST"> <select name="my_select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> <button type="submit">Submit</button> </form> ``` Flask代码： ``` from flask import Flask, request app = Flask(__name__) @app.route("/my_url", methods=["POST"]) def my_endpoint(): value = request.form.get("my_select") # do something with value ``` 如果要在按钮显示的数据与传入的数据不一致时，可以使用JavaScript将按钮的显示值与传入的值映射起来，然后将映射后的值作为参数传递到Flask后端。例如，可以创建一个JavaScript对象来将按钮的显示值映射到传入的值： ``` var value_map = { "Button 1": "value1", "Button 2": "value2", "Button 3": "value3" } $("button").click(function() { var display_value = $(this).text(); var value = value_map[display_value]; $.ajax({ type: "POST", url: "/my_url", data: {"my_value": value}, success: function(response) { // handle response from Flask } }); }); ``` 在Flask后端，可以使用映射后的值来执行所需的操作： ``` from flask import Flask, request app = Flask(__name__) @app.route("/my_url", methods=["POST"]) def my_endpoint(): value_map = { "Button 1": "value1", "Button 2": "value2", "Button 3": "value3" } display_value = request.form.get("my_value") value = value_map[display_value] # do something with value ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值