如何检查文本区域中的文本输入并相应地按下提交按钮

How to check text inputs in textarea and press submit button accordingly

本文关键字：文本 按钮 提交 输入 何检查 检查 区域      更新时间：2024-03-06

我正在尝试实现一个按钮和一个包含在div中的文本区域标签

如果我点击按钮，会发生以下事情

  1. 按钮类型和值属性将更改为"提交"其他名称
  2. div括起来的文本区域将在toggled中显示和消失方式

上面的第1点和第2点已经实现。

但我在实现以下几点时遇到了问题：

  1. 更改后的提交按钮只有在检测到时才会提交页面一些文本已写入文本区域

  2. 否则，提交按钮将更改为正常按钮，并且隐藏文本区域。

    ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.
    min.js">你好

    <div style="border: 5px solid #A9A9A9;" id="hidden_area">
<table>
<tr bgcolor=#CCCCEE align=center>
<th>Text area</th> 
</tr>
<tr>
<td>
<textarea name="field" rows=5 cols=40 style="font-size: small"></textarea>
</td>       
</tr>
</table>
</div>

这是add.js

$(document).ready(function(){
 $("#changeText").click(function(e){
        $(this).attr('type','submit').attr('id', 'enter').val('Enter Text')
        e.preventDefault();
        $("#hidden_area").toggle()
        });
})

只需要检查按钮处于哪个状态以及文本区域的内容。例如：

$(document).ready(function(){
$("#hidden_area").hide();
 $("#changeText").click(function(e){
     if ($(this).attr('type') == 'button') {
        $(this).attr('type','submit').attr('id', 'enter').val('Enter Text');
        e.preventDefault();
        $("#hidden_area").toggle();
    } else if ($("#hidden_area textarea[name='field']").val().trim() !== '') {
        alert('submitting');
    } else {
        $("#hidden_area").toggle();
        $(this).attr('type','button').attr('changeText', 'enter').val('Click');;
    }
 });
});

看看这个Fiddle。

像这样的东西可以做到：

$("#changeText").click(function(e){
    $(this).attr('type','submit').attr('id', 'enter').val('Enter Text');
    var txt = $('textarea').val();
    if ( $.trim(txt) != '' ){
        alert('Submit page here');
    }else{
        $(this).attr('type','button').attr('id', 'changeText').val('click');
        $("#hidden_area").toggle()
        e.preventDefault();
    }
});

jsFiddle演示

相关文章：