I have a chatbot I created that asks for a user's username, then stores it as a variable. However, in one of my dialog trees, I have to ask the user for them to type another answer, I have it working so that user's can navigate via button clicks.
On username capture, the "input bar" is removed from controls and I append buttons with each message function. I tried to do the inverse of this (remove buttons and add an input) which does work, however I can't get my input to do anything. It won't submit on enter, it won't save a variable and in my trial and error, I found that if I try to set a var off that msg value, it updates the username's.
Here is my function to retrieve name
function get_username() {
send_msg("Hello I'm Mumbles, the Help Bot", function(){
send_msg("Who am I speaking with today?")
});
}
function ai(msg) {
if (username.length < 3) {
username = msg;
send_msg("Nice to meet you"+username+". What are you working on today?" , function() {
$("#controls").append(
'<button class="options one" value="my_certifications" type="button">My Certifications</button>' +
'<button class="options one" value="videos"type="button">Videos</butto/>' +
'<button class="options one" value="login"type="button">Login</butto/>' +
'<button class="options one" value="other"type="button">Other</butto/>'
);
});
}
// Remove text bar
$("#controls").empty();
};
Here is my function to try and capture email
} else if (b_val == "my_practicum") {
send_msg("What is the email address you submitted your practicum with? By having this we can give you a status update!" , function() {
$("#controls").append(
'<textarea id="message" class="practicum-bar" placeholder="Type Your Name - Then Hit Enter"></textarea><button style="display:none;" id="sendMsg">Send</button>' );
email = msg;
console.log(email);
});
}
}
If you want to see this in action, here my JSFiddle. You can see it by going through this user path
Enter name > Certifications > My Practicum > Enter email
Any help on this is appreciated! Thanks!
It looks like you remove controls by doing $("#controls").empty(); and you want to add an event to a dynamically created element so you have to add the context to the second parameter of the .on. look now you can see the console.log in the fiddle the second time you clicked enter because jquery can detect the item now.
$("#controls").on("keypress", "#message", function(event){
if (event.which == 13) {
console.log("my test");
if ($("#slideThree").prop("checked")) {
$("#sendMsg").click();
event.preventDefault();
//*edit you can now change variables outside of scope*
}
}
});
now you can do your event handling.
Related
I have a jconfirm window on which i display some informative text.
I would like to add a checkbox on that jconfirm window, that based on its checked/unchecked value will add value to the target URL( which eventually will be processed with django)
The problem is that after adding the checkbox in the html code displayed on the jconfirm page, i loose the value of the checkbox.
$('#credit_checkbox').change(function(){
$('#hiddenInput').val(this.checked);
console.log($('#hiddenInput'));
});
$(".popup-action").click(function(e) {
var target = this.href;
e.preventDefault();
info = "<br/><br/><div> What will happen:<ul class='log payback' style='text-align:left;'><li><input id='credit_checkbox' type='checkbox' />Wanna do this?<br /><input id='hiddenInput' value=''>"; //Probably missed a quote here
jConfirm("{% trans 'Set status to ' %}" + $(this).html() + " ?"+ info, "Confirmation", function (r) {
if ($('#credit_checkbox').is(':checked')){
target = target + "/True";
}
if (r) {
console.log($('#hiddenInput').val());
$.getJSON(target,function(json) {codecode}
);
}
});
If it's not the syntax error as someone else here pointed out, it's because your checkbox is destroyed before you can read its value.
Try attaching an event to that checkbox:
$("#credit_checkbox").change(function(){
$("#hiddenInput").val(this.checked);
});
Then you create a hidden input in HTML that will store that value:
<input id="hiddenInput" value="">
And then you can read that value from the #hiddenInput at any time.
I've two input form fields and i want when the user clicks a submit button he should be taken to a URL based on the input in these two fields. For example if the input in the two input fields is A and B respectively the condition should be set such that the User is taken to www.mydomain.com/C in Javascript. I DON'T want the values to be appended to the URL like www.mydomain.com/a/b which I already know how to.
I have seen lot of questions on SO and Google on URL Generation but none was the case as mine. I would really appreciate help from fellow SO users. Thanks in advance.
Do you mean something like this? This would take you to the address when both inputs have the value 'something' and the button is clicked.
<input type="text" id="a">
<input type="text" id="b">
<button onclick="go()">Go</button>
<script>
function go() {
if (document.getElementById('a').value == 'something' && document.getElementById('b').value == 'something') {
window.location = 'http://www.example.com/C';
}
}
</script>
If you are using jquery:
$( "form" ).submit(function() {
// TODO read your variables
// TODO apply conditions and redirect accordingly
if ( ... ) {
window.location = 'http://www.example.com/C'
} else {
window.location = 'http://www.example.com/D'
}
return false; // prevent default submit
});
i've done a web chat which the codes are:
<div id="namebox">Name: <input type="text" id="name" autofocus autocomplete="on" ></div>
<div id="msgbox" >Message: <input type="text" id="message"></div>
<div id="submitbox"><button onClick="postMessageToDB(); return false;" id="submit">Submit</button></div>
So, the message goes into the database fine by clicking the button submit, however i was wondering to ad a code to jut press enter and it will be sent, so there will be 2 options.
I am using onClick and onKeypress which it is not working.
<div id="submitbox"><button onClick="postMessageToDB(); return false;" id="submit" onkeypress="postMessageToDB(this, event); return false;">Submit</button></div>
Where the javascript is:
<script type="text/javascript">
function postMessageToDB(inputElement, event) {
if (event.keyCode == 13) {
inputElement.div.submit();
}
}
</script>
Im not using form because it was asked to be div, not form.
Really appreciate for any help.
Thank you very much
Your code provided will only work when postMessageToDB() is called... it's not listening for a keypress.
Using jQuery:
$(window).keyup(function(e) {
if( e.keyCode==13 ) {
postMessageToDB([...]);
}
}
You need to call the function, you can do this by adding an EventListener to document and then check if it's enter that was pressed.
var keyevent = (/Firefox/i.test(navigator.userAgent)) ? "keypress" : "keydown"; // fit browser
document.addEventListener(keyevent, function(e) {
if (event.keyCode == 13) {
var a = document.getElementById('name').value; //get field values
var b = document.getElementById('message').value; //get field values
postMessageToDB(inputElement, event); // as I said, not sure what this will do, but you need to get the data you want to pass first within this function.
}
});
Then, just remove the keypress checkup from you function and you should check this line, I can't see that this is going to work:
inputElement.div.submit();
I have a survey. On button click need it to validate certain fields required/store locally/ go to confirmation page(to prevent user from resubmitting). Only 'FirstName''Hostipal' required atm.
Problem is when all required fields are filled, it fails to go to confirmation.html. If i leave 1 required field open, It doesnt validate and goes to confirmation. If all 'required' syntax is taken out, It doesnt go to confirmation
<label>First Name*:</label> <input required title="Name is required" id="FirstName" name="MainName" type="text"/>
In all cases, It still stores to local storage however. Any input on validating required fields would be appreciated. Hopefully can put it in my clicked() function.
<button type="submit" value="Save" id="Save" >Submit Form</button>
function
$( document ).ready(function() {
$('#Save').click(function (e) {
if (confirm('Are you sure you want to submit? You will not be able to go back.')) {
var person = $("#FirstName").val() + "." + $('#LastName').val();
$('input, select, textarea').each(function () {
var value = $(this).val(),
name = $(this).attr('name');
localStorage[person + "." + name] = value;
window.location.href = "Confirmation.html";
console.log('stored key: ' + name + ' stored value: ' + value);
});
}
});
});
If the above doesn't show my problem, here is the whole: http://jsfiddle.net/smZHe/1/
each helper method in jquery executes the function we pass to it once for each item in the initial array. You are trying to execute below statement multiple times (once for each input, select, textarea).
window.location.href = "Confirmation.html";
You can use a variable instead as flag to mark validation failure. In the end, you can check variable and navigate conditionally.
I have a textbox in which I render some value the user can change.
If user does, then I have to show a popup and tell him that The new text you entered in textbox is this...
If he clicks OK then I will submit that to DB.
How to do that in JavaScript?
Suppose default value of textbox is
What,are,you,doing
and user enters this
What,are,you,doing,james
in this case user enters only james.
jQuery
oldVal = $('#textBoxID').val();
$(document).ready(function() {
$('#submit').on('click', function() {
alert('You Entered: ' + $('#textBoxID').val().replace(oldVal, ''));
// Submit form
window.oldVal = $('#textBoxID').val();
});
});
HTML
<textarea id="textBoxID">What,are,you,doing</textarea>
<button id="submit">OK</button>
example jsfiddle