关于HTML提交的问题


<form action="?ac="submit" method="post" onsubmit="return false;"> 
<textarea class="form-control" id="example-textarea-input" name="example-textarea-input" rows="16" placeholder="内容.."></textarea> 
</form> 

<form class="form-inline" action="?ac="submit" method="post" onsubmit="return false;"> 
<div class="form-group"> 
<label class="sr-only" for="example-if-email">输入框1</label> 
<input class="form-control" type="text" id="example-if-email" name="shuru1" placeholder="输入框1.." /> 
</div>  
<div class="form-group"> 
<button class="btn btn-default" type="submit">提交</button> 
</div> 
</form>

<form class="form-inline" action="?ac="submit" method="post" onsubmit="return false;"> 
<div class="form-group"> 
<label class="sr-only" for="example-if-email">输入框2</label> 
<input class="form-control" type="text" id="example-if-email" name="shuru2" placeholder="输入框2.." /> 
</div>  
<div class="form-group"> 
<button class="btn btn-default" type="submit">提交</button> 
</div> 
</form>

<form class="form-inline" action="?ac="submit" method="post" onsubmit="return false;"> 
<div class="form-group"> 
<label class="sr-only" for="example-if-email">输入框3</label> 
<input class="form-control" type="text" id="example-if-email" name="shuru3" placeholder="输入框3.." /> 
</div>  
<div class="form-group"> 
<button class="btn btn-default" type="submit">提交</button> 
</div> 
</form>

请教怎么输入框1,2,3三个提交的时候 带上textarea 的内容,比如提交输入框1的时候 提交 输入框1的内容+textarea的内容,提交输入框2的时候 提交 输入框2的内容+textarea的内容

可以使用JavaScript来实现这个功能。首先,给每个提交按钮添加一个点击事件,当点击时获取textarea的内容,并将其赋值给隐藏的input元素。然后再将所有的input元素一起提交即可。

以下是示例代码:

HTML代码:

<form action="#" method="post">
  <textarea id="content" name="content"></textarea>
  <button id="submit1" type="button">提交1</button>
  <button id="submit2" type="button">提交2</button>
  <button id="submit3" type="button">提交3</button>
  <input id="input1" type="hidden" name="input1">
  <input id="input2" type="hidden" name="input2">
  <input id="input3" type="hidden" name="input3">
  <button id="submit-all" type="submit">提交所有</button>
</form>

JavaScript代码:

// 获取元素
const content = document.getElementById('content');
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const input3 = document.getElementById('input3');
const submit1 = document.getElementById('submit1');
const submit2 = document.getElementById('submit2');
const submit3 = document.getElementById('submit3');
const submitAll = document.getElementById('submit-all');

// 给每个提交按钮添加点击事件
submit1.addEventListener('click', function() {
  input1.value = content.value;
  document.forms[0].submit();
});

submit2.addEventListener('click', function() {
  input2.value = content.value;
  document.forms[0].submit();
});

submit3.addEventListener('click', function() {
  input3.value = content.value;
  document.forms[0].submit();
});

// 提交所有按钮的点击事件
submitAll.addEventListener('click', function() {
  input1.value = content.value;
  input2.value = content.value;
  input3.value = content.value;
});
  • 这篇博客: 前端学习笔记:HTML基础中的 2.10.2.3 < textarea >文本域元素 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 < textarea > 标签。

    在表单元素中,< textarea > 标签是用于定义多行文本输入的控件。

    使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。

    今日反馈:
            <textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>
    
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632