一个FORM多选表单，表单里有多个value值

Posted 2023-04-16

一个FORM多选表单，表单里有多个value值
<form action="" name="formT">
01<li>
<input type=checkbox value="xx">
<input value="xx"></li>
02<li>
<input type=checkbox value="xx">
<input value="xx"></li>

<input name="全选" type="button" class="button" value="全选" onClick="CheckAll(this.form)">
<input name="反选" type="button" class="button" value="反选" onClick="CheckOthers(this.form)">
<input name="提交" type="button" class="button" value="提交" onClick="lbsongwmaP(this.form)">
</form>
我大概意思是这样写的，可是每当全选提交时它就选择的是01里面的两个value值，而不是在01与02里选择第一个value值提交
这样我如何取每个<LI>与</li>之间的第一个value值？
选择了两个，它是提交了两个，但其中一个不是我要提交的value值，它是连续取value值，而不是分别取01<li></li>和02<li></li>中的input type=checkbox value="xx">值，我选择两个提交时，它取提交的值是01<li></li>里的<input type=checkbox value="xx">和<input value="xx">value。而02<li><input type=checkbox value="xx">
</li>就没读取,<input value="xx">这值是不要的值，它是用来显中文的

这个是有问题要改的asp页面中form的一整代码，当点我全选时，提交的时候，所有form中的value值全读了，什么乱七八糟的中文字也提交了，然后就出错，其实我只要提交每个<li></li>间的一个value=ID
字数太多，发表不了，有兴趣帮我解决的，下载下来看下http://mu.865p.com/form.txt
http://mu.865p.com/function.js.txt
本人万分感谢

三楼兄弟，代码在这个连接的txt里，能不能帮我看下，是有个type="hidden" 这样的值

，哪位达达，留个QQ号帮帮我撒！祖国人民不会忘记你们的

参考技术A 这个可能不是你Form的问题，还要看你全选的函数CheckAll(this.form)是怎么写的。
<input name="全选" type="button" class="button" value="全选" onClick="CheckAll(this.form)"> 这个虽然说是全选，但点击它时是否全选了也不知道。
运行出错了。就出现乱码了。还有这个<input value="xx">，应该还有type属性吧。 参考技术B 1.你要明白ASP的FORM工作原理
2.要知道form的ID,NAME都是做什么用的
3.写代码要遵循WEB2.0标准

解决方法 可以 参考
回答者： 阳光上的桥 - 一代宗师 十五级 9-1 22:29 参考技术C 你这个<FORM>代码奇怪呀，<input>里面没有name，你的ASP怎么获取得到数据呢，你大概应该补习一下html吧，我给你搜索了一个HTML的教程地址：http://www.gzsums.edu.cn/webclass/html/html_design.html， 教程关于<FORM>的那一节的地址是：http://www.gzsums.edu.cn/webclass/html/form.html。

这个教程好，我学HTML就看的这个。下面我对<FORM>部分说一下自己的体会，一般我们应该用下面的方法编写<FORM>：

<form method=POST>
<input type=checkbox name=c1> Banana<p>
<input type=checkbox name=c2 checked> Apple<p>
<input type=checkbox name=c3 value=橘子> Orange<p>
<input type=submit><input type=reset>
</form>

上面的<FORM>有三个checkbox，名字分别为c1、c2、c3，第三个有value属性，第二个有checked属性，当我们全选提交的时候，服务器获得下面的参数：

request("c1") = "on"
request("c2") = "on"
request("c3") = "橘子"

当我们默认提交（只选择第二个）的时候，服务器获得的参数如下：
request("c2") = "on"

总结：没有选中的项不会提交给服务器，选中的项提交给服务器时，值为指定的value属性，如果没有value属性则为"on"。

现在我建议你，给你的所有checkbox增加name属性，ASP脚本按照上面的规则检测提交的参数。

祝你好运。 参考技术D 给点提示你们都不懂，这是完整的示意
<form action="" name="formT">
<li>01.
<input type=checkbox value="001" name=x1>爱你一万年//==value=001这才是我要取的值
<input id="songid_0" type="hidden" value="刘德华" />//==注,这些下面的valie值是通过sql产生的数值直接传送到播放器播放，不能加name属性
<input id="son_0" type="hidden" value="2003年" />
<input id="url_0" type="hidden" value="/mp3/123.wma" />
<input id="song_0" type="hidden" value="国语" />
</li>//=此段代码是通过有多少首歌循环产生列表
如下产生第二首歌的
<li>02.
<input type=checkbox value="002" name=x1>七十年后
<input id="songid_1" type="hidden" value="陈晓东" />
<input id="son_1" type="hidden" value="2007年" />
<input id="url_1" type="hidden" value="/mp3/185.wma" />
<input id="song_1" type="hidden" value="国语" />
</li>

<input name="全选" type="button" class="button" value="全选" onClick="CheckAll(this.form)">
<input name="反选" type="button" class="button" value="反选" onClick="CheckOthers(this.form)">
<input name="提交" type="button" class="button" value="提交" onClick="lbsongwmaP(this.form)">
</form>
像这里，我想点全选提交的时候就是通过SQL产生的value=001和value=002提交到另外一个页面播放。其它的就不用提交，这是一个播放器列表，如果我把那些付属性也加上name的话，哪个播放器就不识别了，而且每句input后面加上name值时,点全选按扭时，那就变成所有value值提交，只对手动一一选择用有。所有最终的问题就是，我怎样通过这段代码只读取每首歌的ID，就只读这一句<input type=checkbox value="xxx" name=x1>本回答被提问者采纳 第5个回答  2008-09-08 要个分

实现一个兼容eleUI form表单的多选组件

　　本质上是实现了一个eleUI select组件中的创建条目功能的组件，仅仅是将dropdown的选择框变成了label形式。支持eleUI的form表单校验，同时组件也提供了组件内自定义校验的方法。常规的用eleUI校验表单只需要在rules中正常定义：

　　

rules: FormRules = {
    labels: [
      { required: true, type: \'array\', message: \'请选择标签\', trigger: \'change\' },
      { required: true, type: \'array\', min: 3, max: 10,  message: \'至少3个标签，最多添加10个标签\', trigger: \'change\' },
    ],
  };

　　eleUI表单校验的触发方式是组件内抛出一个emit事件（有change和on两种），在ElFormItem组件内会on监听这个事件，调用validate方法执行async-validator提供的校验。而form组件提供的this.$refs[formName].validate是通过遍历formItem调用每个ElFormItem组件内的validate方法。

　　组件默认用了size=small时的大小。

<template>
  <div>
    <div
      class="input-content el-input--small"
      @click.stop="onFocus">
      <div ref="inputLabels" class="input-labels el-select__tags">
        <!-- disable-transitions 必须禁用动画效果 否则在计算高度时延迟动画时长触发 -->
        <el-tag
          v-for="(tag, i) in value"
          :key="tag"
          class="tag"
          size="mini"
          closable
          type="info"
          disable-transitions
          @close="onCloseTag(i)">
          {{ tag }}
        </el-tag>

        <!-- 输入用 -->
        <input
          ref="input"
          type="text"
          class="input-label-show el-select__input"
          v-model.trim="input"
          @focus="onFocus"
          @blur="isFocus = false"
          @click.stop
          @keydown.enter.prevent="onKeydownEnter" />
        <div
          v-if="max != 0"
          class="limit-content">
          {{ value.length }}/{{ max }}
        </div>
      </div>

      <!-- 展示用 -->
      <input
        type="text"
        class="el-input__inner"
        :class="[
          { \'is-focus\': isFocus },
          { \'is-error\': isError },
          { \'is-success\': isSuccess },
        ]"
        :style="{ \'height\': `${height}px` }"
        :placeholder="currentPlaceholder" />
      <!-- <div v-show="isError" class="el-form-item__error">{{ validateMessage }}</div> -->
    </div>

    <ul class="quick-selected-labels">
      <li
        v-for="tag in labelsToBeSelected"
        :key="tag"
        class="quick-label"
        @click="onClickAddLabel(tag)">
        <i class="quick-selected-icon el-icon-plus"></i>
        {{ tag }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from \'vue-property-decorator\';
import axios from \'@/api/index\';

@Component
export default class Labels extends Vue {
  @Prop({ type: Array, default: (): any => [] }) value: string[];
  @Prop({ type: Number, default: 0 }) min: number;
  @Prop({ type: Number, default: 0 }) max: number;
  @Prop(String) fieldId: string;  // 领域
  @Prop() initValue: any;

  input: string = \'\';
  currentPlaceholder: string = \'回车添加标签 (最多添加10个)\';
  isFocus: boolean = false;
  height: number = 32;  // 展示用input标签的高度
  quickSelectedLabels: string[] = [];  // 快速添加提供的标签
  isError: boolean = false;
  isSuccess: boolean = false;
  validateMessage: string = \'\';  // 校验不通过提示信息

  $refs: {
    input: HTMLInputElement,
    inputLabels: HTMLElement,
  }

  @Watch(\'value\', { immediate: true, deep: true })
  onWatchValue(val: string[]) {
    if (val.length > 0 ||　this.input !== \'\') {
      this.currentPlaceholder = \'\';
      this.validate();
    } else {
      this.currentPlaceholder = \'回车添加标签 (最多添加10个)\';
    }
    this.resetInputHeight();
  }

  @Watch(\'input\')
  onWatchInput(val: string) {
    if (this.value.length > 0 || this.input !== \'\') {
      this.currentPlaceholder = \'\';
    }  else {
      this.currentPlaceholder = \'回车添加标签 (最多添加10个)\';
    }
  }

  @Watch(\'fieldId\', { immediate: true })
  onWatchField(val: string, oldVal: string) {
    if (val === \'\' ||val === oldVal) return;
    this.getQuickSelectedLabels(val);
    this.$emit(\'input\', []);
  }

  created() {
    // this.getQuickSelectedLabels();
  }

  onFocus() {
    this.isFocus = true;
    this.$refs.input.focus();
  }

  /* 查询快速添加提供的标签 */
  getQuickSelectedLabels(fieldId: string = \'\') {
    this.quickSelectedLabels = [\'接口查询出的标签或者默认的标签\'];
  }

  /* 输入标签 */
  onKeydownEnter(e: any) {
    const val = this.input;
    if (val === \'\') {
      this.$message.warning(\'请勿输入空标签\');
      return;
    }
    const labels = [...this.value];
    if (labels.includes(val)) {
      this.$message.warning(\'重复的标签\');
      return;
    }
    this.input = \'\';
    labels.push(val);
    this.$emit(\'input\', labels);
  }

  /* 删除标签 */
  @Emit(\'input\')
  onCloseTag(i: number) {
    let labels = [...this.value];
    labels.splice(i, 1);
    return labels;
  }

  /* 添加标签 */
  @Emit(\'input\')
  onClickAddLabel(label: string) {
    const labels = [...this.value];
    labels.push(label);
    return labels;
  }

  /* 计算快速选择的标签是否展示 */
  get labelsToBeSelected() {
    const tags: string[] = [];
    this.quickSelectedLabels.forEach((tag) => {
      if (!this.value.includes(tag)) {
        tags.push(tag);
      }
    });
    return tags;
  }

  /* 重置展示用input的高度 */
  resetInputHeight() {
    this.$nextTick(() => {
      const initHeight = 32;
      const dom = this.$refs.inputLabels;
      this.height = this.value.length === 0
        ? initHeight
        : Math.max(
          dom ? (dom.clientHeight + (dom.clientHeight > initHeight ? 4 : 0)) : 0,
          initHeight
        );
    });
  }

  /* elementUI 的 dispatch */
  dispatch(componentName: string, eventName: string, params: any[]) {
    let parent: any = this.$parent || this.$root;
    const options: any = parent.$options;
    let name = options.componentName;

    while (parent && (!name || name !== componentName)) {
      parent = parent.$parent;

      if (parent) {
        name = parent.$options.componentName;
      }
    }
    if (parent) {
      parent.$emit.apply(parent, [eventName].concat(params));
    }
  }

  /* 检验 */
  // @Emit(\'validate\')
  validate() {
    this.dispatch(\'ElFormItem\', \'el.form.change\', [this.value]);
    // const length = this.value.length;
    // const min = this.min;
    // const max = this.max;
    // if (length === 0) {
    //   this.validateMessage = \'请选择标签\';
    //   this.isError = true;
    //   this.isSuccess = false;
    //   return false;
    // } else if (min !== 0 && length < min) {
    //   this.validateMessage = `标签数量至少${min}个`;
    //   this.isError = true;
    //   this.isSuccess = false;
    //   return false;
    // } else if (max !== 0 && length > max) {
    //   this.validateMessage = `标签数量至多${max}个`;
    //   this.isError = true;
    //   this.isSuccess = false;
    //   return false;
    // }
    // this.isError = false;
    // this.isSuccess = true;
    // return true;
  }
}
</script>

<style>
.el-form-item.is-error .input-content .el-input__inner {
  border-color: #f56c6c !important;
}
</style>

<style lang="css" scoped>
  .input-content {
    position: relative;
    margin-bottom: 14px;
  }

  .input-content:hover .el-input__inner {
    border-color: #c0c4cc;
  }

  .input-content:hover .is-focus {
    border-color: #409eff;
  }

  .input-labels {
    padding-right: 45px;
    width: 100%;
    box-sizing: border-box;
  }

  .input-label-show {
    flex-grow: 1;
  }

  .input-info {
    font-size: 14px;
    color: #bbb;
    line-height: 14px;
  }

  .input-content .is-focus {
    border-color: #409eff;
  }

  .input-content .is-error {
    border-color: #f56c6c !important;
  }

  .is-success {
    border-color: #67c23a;
  }

  .tag {
    overflow: hidden;
    position: relative;
    margin-left: 4px;
    margin-right: 0;
    padding-right: 14px;
    max-width: 146px;
    min-width: 50px;
    font-size: 12px;
    color: #7e7e7e;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(239, 239, 239, .4);
    border-radius: 2px;
    box-sizing: border-box;
  }

  .tag:last-child {
    margin-right: 0;
  }

  .quick-selected-labels {
    overflow: hidden;
  }

  .quick-label {
    float: left;
    overflow: hidden;
    position: relative;
    margin: 0 10px 10px 0;
    padding: 8px 10px 8px 30px;
    max-width: 146px;
    min-width: 88px;
    height: 28px;
    font-size: 12px;
    color: #7e7e7e;
    line-height: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #e9e9e9;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
  }

  .quick-label:hover {
    background-color: rgba(144, 147, 153, .1);
  }

  .quick-selected-icon {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 12px;
    height: 12px;
    font-weight: 700;
    color: #bbb;
  }

  .limit-content {
    position: absolute;
    top: 8px;
    right: 10px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #bbb;
    text-align: right;
    line-height: 14px;
  }
</style>

<style>
  .tag .el-tag__close {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 14px;
  }
</style>