【问题标题】:How can I enable/disable submit-buttons dinamically when its textarea is empty?当 textarea 为空时,如何动态启用/禁用提交按钮?
【发布时间】:2018-05-05 23:09:18
【问题描述】:

我正在使用 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 可以根据$postList 中的对象数量重复HTML 2 代码多次。 HTML 2 包含一个图像,后跟一个 textarea 和一个 submit button

我想要做的是disable 提交按钮,仅当其对应的文本区域为空时。

例如,我已经骑了 3 次,所以我会:

  1. 文本区域 - 按钮
  2. 文本区域 - 按钮
  3. 文本区域 - 按钮

如果我想在第二个 textarea 中书写,那么我将不得不 enable 仅与该 textarea 相邻的按钮。我希望我的问题很清楚。

警告,我无法更改文本区域的名称,因为我在控制器中使用它来从文本区域获取数据,如下所示:$comment_content = $request-&gt;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-&gt;id}} 并且提交按钮的 name 将是 comment_button {{$post-&gt;id}} 以保证元素的动态性,如中所要求的这个问题。所以现在,如果我重复这个循环 3 次,我会:

  1. Textarea(id="comment_content 1") - 按钮 (name="comment_button 1")

  2. Textarea(id="comment_content 2") - 按钮 (name="comment_button 2")

  3. Textarea(id="comment_content 3") - 按钮 (name="comment_button 3")

【问题讨论】:

  • 你的意思是如果文本区域是空的,它旁边的按钮将被禁用?

标签: javascript jquery html laravel laravel-5


【解决方案1】:

您可以收听 keyup,因此当用户键入时,如果值为空,则会禁用/启用提交按钮

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

【讨论】:

  • 您理解我的意思,但不幸的是,对于 foreach 循环,它不会那样工作。我测试了你的脚本,但它不像你在 sn-p 中显示的那样工作,所以我们需要改进你的解决方案。
  • 为了帮助您进行更改,正如我所说,出于数据提取的原因,我无法更改 textarea 的 name 字段,但我可以尝试通过更改 id 并验证来更改我的代码我的申请继续有效。我将尝试在提交按钮中添加一个 id 字段,以便您可以识别submit buttontextarea 不是来自name 字段,而是来自id 字段。
  • 我没有在代码中的任何地方使用文本区域的名称。不知道你的意思
【解决方案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

【讨论】:

  • 禁用的按钮,如果管理得当,不会有害,也不会引起问题,例如 Facebook:如果您不在文本区域中写东西,“发布”按钮将不会启用.
猜你喜欢
  • 2013-11-17
  • 1970-01-01
  • 2016-07-20
  • 2011-05-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-05-11
  • 1970-01-01
相关资源
最近更新 更多