Passing a form input into a chat

Question

Ive created a simple html form with a text input and a submit button. I was told that with a little javascript, I could make it so when users fill out that input and click the submit button, it would open up the live chat and automatically have their submission as the first message in the live chat. Here's my form:

<form name="question"> 
<input type="text" name="important"> 
<input type="submit" value="Submit"> 
</form>

I was told I have to include the api with the 'say' function ( https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html#say ). I've got this far:

<script>
$zopim(function() {
$zopim.livechat.say('SOMETHING GOES HERE');
});
</script>

But their 'say' example uses this link rather than an input:

<a href="javascript:void($zopim.livechat.say('I would like an orange banana!'))">Order orange banana</a>

I'm not sure how to edit that code to use my form input instead of a static link.

Any ideas? Thanks!

Answer 1

What you are seeing in the reference from their docs just executes the say function when you click on it. You could simply add a click listener to the submit button and then get the value of the input and pass that to the .say function.

Note: I commented out the zopim parts as they technically don't matter here as we are simply trying to get some values from an input.

Example:

//$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>

Answer 2

The connection to contact form might not be needed after all: This is what fabricated from the above mentioned this doesnt work, however, if anyone who knows what they are doing could take a look at it.

$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>