Question

我正在使用Laravel 5并且我使用了以下HTML页面：

HTML 1

<div class="row">    
    @foreach($postList as $post)
        @include('Pages.Post.postInGroup', ['post'=>$post, 'commentsList'=>$commentsList])
    @endforeach
</div>

HTML 2

<form id="msform" action="{{route('comments.store')}}" method="post">
    {{ csrf_field() }}
    <div class="row align-items-center">   
        <!-- nascondere bottoni per visitatori -->
        <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
            <img src="{{url(Auth::user()->picture_path)}}" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
        </div>
        <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
            <textarea class="form-control" placeholder="Post a comment" id="comment_content" name="comment_content" rows="1"></textarea>
        </div>
        <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" > <!--style="display: inline-block; margin-right: 1px;"-->
            <input type="submit" name="submit" class="btn btn-primary" value="Comment" style="background-color: #228B22;"/>
            <input type="hidden" value="{{$post->id}}" name="postId" id="postId">
        </div>
    </div>
</form>

如您所见，HTML 1可以根据HTML 2中的对象数量多次重复$postList代码。 HTML 2包含图片，后跟textarea和submit button。

我想要做的只是disable提交按钮，只有当相应的textarea为空时。

例如，我已经循环了3次，所以我会：

Textarea - Button
Textarea - Button
Textarea - Button

如果我想写第二个textarea，那么我将只需要enable与该textarea相邻的按钮。我希望我的问题很清楚。

警告，我无法更改textarea的名称，因为我在控制器内部使用它来获取textarea中的数据，如下所示：$comment_content = $request->input('comment_content');我要禁用/启用只有我在HTML 2中发布的提交按钮。

修改

新HTML 2

<form id="msform" action="{{route('comments.store')}}" method="post">
    {{ csrf_field() }}
    <div class="row align-items-center">   
        <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
            <img src="{{url(Auth::user()->picture_path)}}" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
        </div>
        <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
            <textarea class="form-control" placeholder="Post a comment" id="comment_content {{$post->id}}" name="comment_content" rows="1"></textarea>
        </div>
        <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
            <input type="submit" name="comment_button {{$post->id}}" class="btn btn-primary" value="Comment" style="background-color: #228B22;"/>
            <input type="hidden" value="{{$post->id}}" name="postId" id="postId">
            <input type="hidden" value="{{$theGroup->id}}" name="groupId" id="groupId">
        </div>
    </div>
</form>

现在，每次执行@foreach周期时，textarea id将为comment_content {{$post->id}}，提交按钮的name将为comment_button {{$post->id}}按照问题的要求保证要素的活力。所以现在，如果我重复这个循环三次，我会：

Textarea（id =＆＃34; comment_content 1＆＃34;） - 按钮（名称=＆＃34; comment_button 1＆＃34;）
Textarea（id =＆＃34; comment_content 2＆＃34;） - 按钮（名称=＆＃34; comment_button 2＆＃34;）
Textarea（id =＆＃34; comment_content 3＆＃34;） - 按钮（名称=＆＃34; comment_button 3＆＃34;）

Answer 1

您可以收听密钥，因此当用户输入时如果值为空将禁用/启用提交按钮

＆＃13;

//start with them disabled
$('#msform > div > div > input[name=submit]').prop('disabled', true);

//while user is typing disable and enable based on the value.
$('#msform > div textarea').on('keyup', function() {
  $(this).parents('.row').find('input[name=submit]').prop('disabled', $(this).val() == '');
});

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="msform">
  <div class="row align-items-center">
    <!-- nascondere bottoni per visitatori -->
    <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
      <img src="https://placehold.it/100x100" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
    </div>
    <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
      <textarea class="form-control" placeholder="Post a comment" id="comment_content" name="comment_content" rows="1"></textarea>
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
      <!--style="display: inline-block; margin-right: 1px;"-->
      <input type="submit" name="submit" class="btn btn-primary" value="Comment" style="background-color: #228B22;" />
      <input type="hidden" value="1" name="postId" id="postId1">
    </div>
  </div>
  
  <div class="row align-items-center">
    <!-- nascondere bottoni per visitatori -->
    <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
      <img src="https://placehold.it/100x100" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
    </div>
    <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
      <textarea class="form-control" placeholder="Post a comment" id="comment_content" name="comment_content" rows="1"></textarea>
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
      <!--style="display: inline-block; margin-right: 1px;"-->
      <input type="submit" name="submit" class="btn btn-primary" value="Comment" style="background-color: #228B22;" />
      <input type="hidden" value="1" name="postId" id="postId2">
    </div>
  </div>
  
  
  <div class="row align-items-center">
    <!-- nascondere bottoni per visitatori -->
    <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
      <img src="https://placehold.it/100x100" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
    </div>
    <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
      <textarea class="form-control" placeholder="Post a comment" id="comment_content" name="comment_content" rows="1"></textarea>
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
      <!--style="display: inline-block; margin-right: 1px;"-->
      <input type="submit" name="submit" class="btn btn-primary" value="Comment" style="background-color: #228B22;" />
      <input type="hidden" value="1" name="postId" id="postId3">
    </div>
  </div>
</form>

＆＃13;

Answer 2

关于停用按钮

禁用按钮可能对用户有害。如果用户按提交时必填字段为空，则始终启用按钮，并显示内联验证消息。

更多信息：https://ux.stackexchange.com/questions/76301/form-validation-and-disabled-buttons

原生表单验证

您可以使用本机HTML5验证来获取此行为。看看这个简化的例子：https://codepen.io/anon/pen/rvGLrm

<form>
  <label for="choose">Would you prefer a banana or cherry?</label>
  <input id="choose" name="i_like" required>
  <button>Submit</button>
</form>

有关原生表单验证的更多信息：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

当textarea为空时，如何以dinamically方式启用/禁用提交按钮？

2 个答案: