We Keep Coding

Passing a form input into a chat

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:
Order orange banana
I'm not sure how to edit that code to use my form input instead of a static link.
Any ideas? Thanks!

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>

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>

Jquery- Form doesn't get my input value in first time

I have a form which has 2 inputs, really simple.
<form class="cform">
<input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
<div class="floatl regards"><input type="submit" value="Submit" class="submit" id="submit"></div>
</form>
My JQuery is:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$("#submit").click(function()
{
var CName = $("#cname").val();
console.log(CName);
});
</script>
My problem is when I add a word in textbox and click on submit button it doesn't show anything in console unless I type the same word again and submit it! And it works on second click.
I notice that it doesn't work untile it add that words in the URL and I should write exactly the same word for the second time and click on submit if I want it to work!
How can I fix this error? which part of my code is wrong!?

The click on your button will submit the form using GET method to the current page that why you saw the word on the link after the click, all you need to prevent that is to change the type of button to button instead of submit, that will prevent the page from refresh :
<input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
Or you could add e.preventDefault() or return false; instead in your js code :
$("#submit").click(function(e){
e.preventDefault(); //That will prevent the click from submitting the form
var CName = $("#cname").val();
console.log(CName);
return false; //Also prevent the click from submitting the form
});
Hope this helps.
$("#submit").click(function(){
var CName = $("#cname").val();
console.log(CName);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cform">
<input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
<div class="floatl regards"><input type="button" value="Submit" class="submit" id="submit">
</div>
</form>

When you click the submit button the page will reload and your jQuery definition won't be recognized. In order to prevent that use a html button instead of a input submit button.
Or you can use e.preventDefault(); inside your function call that will prevent to submit the form. In order to use that you have to pass the event as parameter using function(e) {}

submit form to string (jquery?)

I'm trying to create a form which submits a string to another page only with the parameter name removed from the URL.
i.e. submitting the following form with "foo"
<form action="search.asp" method="get">
<input type="text" name="keyword" id="keyword">
<input type="submit" value="Go">
</form>
will go to search.asp?foo NOT search.asp?keyword=foo
Can this be done with pure html?
I guess this can be done with javascript and/or jquery but I'm not certain exactly how.
Can anybody help?
I'm a bit of a noob so a copy and paste solution would be great for me.
Update:
Thanks for the answers so far but they don't seem to be working. Perhaps a better way to do this is to get JQuery to construct the URL and load that URL? Any more suggestions would be great.

or maybe...?
$('input[type="text"]').blur(function() {
$('form').attr('action', 'search.asp?' + $('input').val());
});

Let's give the form and the submit button a classname for convenience and assume we have jQuery on the page.
<form action="search.asp" method="get" class="search_form">
<input type="text" name="keyword" id="keyword">
<input type="submit" value="Go" class="search_button">
</form>
<script type="text/javascript">
$(function(){
var $form = $(".search_form");
// save the default action, because we are going to mess with it.
$form.data("original-action", $form.attr("action"));
// listen to the click on the button, update the form action and submit the form manually
$(".search_button").click(function(){
$form.attr("action", $form.data("original-action") + "?" + $("#keyword").val());
$form.submit();
return false;
});
});
</script>
Not tested, but should work. Let me know.
Btw, saving the default action is maybe not needed. But just in case that you ever want to submit it with ajax without reloading the page.

Try this:
<form action="search.asp?foo">

<script>
$(document).ready(function(){
$("#btnSubmit").click(function(){
var keywordVal = $("#keyword").val();
window.location.href = "search.asp?" + keywordVal;
});
});
</script>
<input id="keyword" type="text" name="keyword">
<button id="btnSubmit">Submit</button>

Checking the form field values before submitting that page

I have written following function which checks whether start_date field is not empty and displays proper message when submit button is clicked. But then it takes the control to the previous page. So user has to write again all other fields on that form.
Is there any way to stay on that page even after prompting the error message, with all other fields value.
//JavaScript
function checkform() {
if(document.frmMr.start_date.value == "") {
alert("please enter start_date");
return false;
} else {
document.frmMr.submit();
}
}
// HTML
<html>
<form name=frmMr action="page1.jsp">
Enter Start date:
<input type="text" size="15" name="start_date" id="start_date">
<input type="submit" name="continue" value="submit" onClick="checkform();">
</form>
</html>
Thanks in advance

While you have a return value in checkform, it isn't being used anywhere - try using onclick="return checkform()" instead.
You may want to considering replacing this method with onsubmit="return checkform()" in the form tag instead, though both will work for clicking the button.

You can simply make the start_date required using
<input type="submit" value="Submit" required />
You don't even need the checkform() then.
Thanks

use return before calling the function, while you click the submit button, two events(form posting as you used submit button and function call for onclick) will happen, to prevent form posting you have to return false, you have did it, also you have to specify the return i.e, to expect a value from the function,
this is a code:
input type="submit" name="continue" value="submit" onClick="**return** checkform();"

Don't know for sure, but it sounds like it is still submitting. I quick solution would be to change your (guessing at your code here):
<input type="submit" value="Submit" onclick="checkform()">
to a button:
<input type="button" value="Submit" onclick="checkform()">
That way your form still gets submitted (from the else part of your checkform()) and it shouldn't be reloading the page.
There are other, perhaps better, ways of handling it but this works in the mean time.

submit text field on enter press (AJAX)

I have a search that operates by AJAX. It works perfectly well when the user presses the search button, the problem is... if the user presses enter... it submit the form rather than executing the AJAX javascript function. How can I make the Enter button call my AJAX function as opposed to submitting the form?

Use the form's onsubmit event to execute your ajax call and make the button into a submit button if it isn't already.
Example HTML
<form action="/search.php" onsubmit="submitAjaxQuery(event)">
<input type="text" name="keywords" />
<button type="submit">Go!</button>
</form>
Example JS
function submitAjaxQuery(event)
{
if (event.preventDefault)
event.preventDefault();
else
event.cancel = true;
// run ajax calling function here.
}

Here is a simple DOM way to handle this:
<form action="javascript:void(0)">
<input type="text" />
<input type="submit" onclick="doSomething(this.form)">
</form>
<script>
function doSomething(form){
alert('form submitted');
}
</script>
Place the cursor in the input field, and either if you click the button or type enter, the form is submitted by javascript (not the page)

Trap it in the onSubmit method of the form and return false.

With jQuery:
jQuery("#myform").submit(function() {
callAJAXFunction();
return false;
});

The correct way is to let the non-javascript users use the form submit with page refresh but a javascript call for those with javascript:
<form action="yourscript.php" method="post" onsubmit="doSomething(this.form); return false;">
<input type="text" />
<input type="submit" />
</form>
<script>
function doSomething(form){
alert('form submitted');
}
</script>