带有选定选项的填充文本方面



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

工作流程:1-用户选择快速答案之一2-然后用以前选择的选项中的值

填充聊天系统的Textarea

到目前为止,我能够使用复选框值填充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>

我希望如果选择某些选项,并且不使用用户设置的自定义时间值填充它,则可以使用复选框值填充文本。

我在这些行中进行了一些更改,查看演示,看看这是否是您想要的;

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

问题是,使用您的逻辑,每次我们输入if(chosenOption)时,我们也会进入if (typedOption)

演示

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>

最新更新