关于HTML提交的问题

Question

<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的内容

Answer 1

可以使用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;
});