建立将输入传递到实时聊天的表单

Question

我们正在努力实现以下目标：

客户输入金额并单击开始聊天： 请求将发送到实时聊天，并发送以下消息： 我想出售//金额//产品

当前，我们能够使它向聊天室发送“金额”输入，但是，我们无法使以下内容起作用：

• 金额低时提示（您至​​少需要输入“ x”）
• 获取它以发送消息以及金额：“我想出售” +金额+产品名称

从先前发布的问题和在线聊天平台上的一些文档中，我们获得了以下answer。

API文档： https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html#say

最佳答复：

$zopim(function() {
  $('input[type="submit"]').on('click', function(e) {
    e.preventDefault(); // prevent hte form from redirecting
    let message = $('input[name="important"]').val();
    console.log(message);
    $zopim.livechat.say(message);
  });
});

脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<form name="question"> 
  <input type="text" name="important"> 
  <input type="submit" value="Submit"> 
</form>

我们采用了上述代码并提出了以下建议 形式：

$zopim(function() {
$('input[type="submit"]').on('click', function(e) {
e.preventDefault(); // prevent hte form from redirecting

var important = $('#amount').val();

if($.isNumeric(important)) {
{if( important < 30) { $('.error').html('We only buy 20 or more.').show(); 
    } else 

var message = 'I would like to sell ' + important '.'; 

$('.error').html('').hide(); $zopim.livechat.say(message);

let message = $('input[name="important"]').val();
console.log(message);
$zopim.livechat.say(message);
});
});

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<form name="question"> 
  <input type="number" placeholder="Amount" name="important"> 
  <input type="submit" value="Start chat"> 
</form>

但是，这似乎不起作用。我们对JavaScript的了解很少，因此，如果有人知道我们做错了什么或有更好的解决方案，请告诉我们。

结论：我们需要一种将输入发送到与文本配对的实时聊天的表单。

Answer 1

您的代码有很多错误-

在第var important = $('#amount').val();行中，您正在获取id为amount的html元素，但您的html没有id为amount的输入。因此，您的important var是未定义的。要使其正常工作，请添加ID amount。

<input type="number" placeholder="Amount" name="important" id="amount">

.val()以string格式返回值。因此，您的if($.isNumeric(important))将始终为false。

var important = parseInt($('#amount').val());

以下条件格式不正确。同样，没有.error类的html元素

if($.isNumeric(important)) {
        {if( important < 30) { $('.error').html('We only buy 20 or more.').show(); 
            } else`

添加到您的html

<div class="error"></div>

由于您的error元素可见性基于important var。因此，初始状态将为hidden。在您的css中，添加.error {display:none}。

const error = $('.error');
let message;

if($.isNumeric(important)) {
    if(important < 30) {
        error.text("We only buy 20 or more.").show();
    } else {
        error.hide();
        message = 'I would like to sell ' + important '.'; 
        $zopim.livechat.say(message);
    }
}

P.S-您的form标签位于script下方。在正确加载html元素之前，您正在访问它们。请务必先关闭script标签，再关闭</body>标签，或将jquery code放在$(document).ready()或$(function(){ // Your code })中。

始终使用const或let而不是var来声明变量，以避免出现variable hoisting问题。