问用选定的选项填充文本区域
EN

Stack Overflow用户

提问于 2019-05-21 02:41:21

回答 1查看 129关注 0票数 1

我有一个聊天系统，我想实现快速回答，用户可以快速回答“我将在5分钟内交付”，“我将在10分钟内交付”或自定义快速回答：“我将在”+数字输入字段值+“分钟”(问题在最后一个)。

工作流程:1-用户选择一个快速答案2-聊天系统的文本区域然后填充上一个选择选项的值。

到目前为止，我能够使用复选框值填充textarea。

但是，我也需要来自自定义数字输入字段的值。

jQuery
// Only allow one option to be selected
jQuery('#send-information input').on('click', function() {
  jQuery('input:checkbox').click(function() {
    jQuery('input:checkbox').not(this).prop('checked', false);
  });
});

// Gets and sets the value to populate the text area
jQuery('#send-information input').on('change', function() {
  // Checkbox values
  var chosenOption = jQuery('input[name=comment_text]:checked', '#send-information').val();
  // Numeric input value
  var typedOption = 'I will deliver in' + jQuery('#chat-test').val() + ' minutes';
  //Conditinal 
  if (chosenOption) {
    jQuery('.wooconvo-textarea').val(chosenOption);
    if (typedOption)
      jQuery('.wooconvo-textarea').val(typedOption);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form method="post" name="add_comment" id="send-information">
  <div class="form-group">
    <input type="checkbox" name="comment_text" value="I'll deliver in 5 minutes"> I'll deliver in 5 minutes <br>
    <input type="checkbox" name="comment_text" value="I'll deliver in 10 minutes">I'll deliver in 5 minutes<br>
    <input id="chat-test" type="number" name="comment_text2" /><br>
</form>

<form>
  <input type="textarea" class="wooconvo-textarea" />
</form>

如果选择了某个选项，如果不使用用户设置的自定义时间值，我希望textarea填充复选框值。

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-21 02:45:42

我已经在这些行中做了一些改变，看看这个演示，看看这是否是你想要的；

if (chosenOption != undefined) {
  jQuery('.wooconvo-textarea').val(chosenOption);
} else if (typedOption) {
  jQuery('.wooconvo-textarea').val(typedOption);
}

问题在于，根据您的逻辑，每次我们进入if(chosenOption)时，我们也会进入if (typedOption)。

Demo

jQuery('#send-information input').on('click', function() {
  jQuery('input:checkbox').click(function() {
    jQuery('input:checkbox').not(this).prop('checked', false);
  });
});

jQuery('#send-information input').on('change', function() {
  var chosenOption = jQuery('input[name=comment_text]:checked', '#send-information').val();
  var typedOption = 'I\'ll deliver in ' + jQuery('#chat-test').val() + ' minutes ';
  if (chosenOption != undefined) {
    jQuery('.wooconvo-textarea').val(chosenOption);
  } else if (typedOption) {
    jQuery('.wooconvo-textarea').val(typedOption);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" name="add_comment" id="send-information">
  <div class="form-group">
    <input type="checkbox" name="comment_text" value="I'll deliver in 5 minutes"> I'll deliver in 5 minutes <br>
    <input type="checkbox" name="comment_text" value="I'll deliver in 10 minutes">I'll deliver in 10 minutes<br>
    <input id="chat-test" type="number" name="comment_text2" /><br>
</form>
Textarea to populate:

<form>
  <input type="textarea" class="wooconvo-textarea" />
</form>