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

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问题。