Question

我正在尝试实现一个按钮和一个包含在div中的textarea 标签

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

按钮类型和值属性将更改为＆＃39;提交＆＃39;还有一些其他名称
div封闭的文本区域将出现并在切换中消失方式。

以上第1点和第2点已经实施。

但是我有问题要实现以下几点：

更改后的提交按钮只会在检测到时提交页面一些文字已经写在文本区域

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

=＆＃34; HTTP：//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery
。 min.js＆＃34;＆GT; 你好

<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()
        });

})

Answer 1

只需要检查按钮所处的状态以及textarea的内容。例如：

$(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');;
    }
 });

});

请参阅this Fiddle.

Answer 2

这样的事情可以做到：

$("#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 Demo

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

2 个答案: