<form action="qiandao.jsp" class="submit_box"> <div class="area_box"> <textarea rows="5" cols="40" placeholder=" 发表......" name="area" class="area"> </textarea></div> <button class="submit">发表</button> </form>怎么获取这个里面输入的内容,补全代码
时间: 2023-07-03 12:31:18 浏览: 107
好的,以下是完整的代码示例,包括如何获取文本框的值并将其提交给后端处理:
```
<form action="qiandao.jsp" class="submit_box" onsubmit="submitForm(event)">
<div class="area_box">
<textarea rows="5" cols="40" placeholder=" 发表......" name="area" class="area" id="myTextarea"></textarea>
</div>
<button class="submit">发表</button>
</form>
<script>
function submitForm(event) {
event.preventDefault(); // 阻止默认的提交行为
var textarea = document.getElementById("myTextarea");
var content = textarea.value;
// 将获取到的内容提交给后端处理,这里使用 ajax 实现异步提交
var xhr = new XMLHttpRequest();
xhr.open("POST", "qiandao.jsp");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText); // 输出后端返回的结果
}
};
xhr.send("content=" + encodeURIComponent(content));
}
</script>
```
在这个代码中,我给 form 元素添加了一个 onsubmit 事件处理函数 submitForm,它会在用户点击“发表”按钮时触发。这个函数首先调用了 event.preventDefault() 阻止默认的表单提交行为,然后获取文本框的值,并使用 ajax 实现异步提交。注意,这里需要对内容进行编码处理,以防止一些特殊字符引起的问题。最后,我在 xhr.onreadystatechange 回调函数中处理了后端返回的结果。
阅读全文