构建将输入传递给livechat的表单。

Question

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

客户输入一个金额，然后单击start chat: Requests to live，其中发送以下消息:我想出售//amount //Product

​

​

目前，我们能够使它发送“数量”输入到聊天，但是，我们无法得到以下工作：

• 当金额低时提示(您需要最少的"x")
• 让它与金额一起发送一个消息：“我想出售”+ along + Product

从之前发布的一个问题和一些在实时聊天平台上的文档中，我们得到了下面的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变量未定义。若要使其工作，请添加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问题。