I am trying to submit a textarea when the user presses the enter key, saving the text in a var, then replacing the form with the text and appending a new form to the end, all without refreshing. I was able to do this with an input just fine, but I needed the textarea and can't get it working.
HTML:
<div class="col-md-6 col-md-offset-6 col-centered terminal-header">
<div class="close text-center">x</div>
<p id="header-text">guest#sethrait:~</p>
<div class="row">
<div id="terminal-window" class="col-md-10 col-md-offset-2 col-centered">
<div class="form_wrapper">
<form class="terminal-text">
<p id="p_term" class="terminal-text">guest#sethrait:~ $ </p>
<textarea class="form_input" name="terminal" placeholder="Currently under construction, please come back later"></textarea>
</form>
</div>
</div>
</div>
</div>
JS:
$( document ).ready(function() {
$(".form_input").keydown(function(){
if(event.keyCode==13){
$(".terminal-window").on("submit", "form", function (e) { //when form is submitted
submitCommand(e);
});
}
});
});
//triggered when user submits a command to the console
function submitCommand(e){
e.preventDefault();
var usrCommand=$('.form_input').val();
processCommand(usrCommand);
$(".form_wrapper").replaceWith("<p class='new-terminal-text' style='margin-left: -12px'>"+loc+usrCommand+"</p>"+"<br>");
$("#terminal-window").append("<div class='form_wrapper'><form class='terminal-text'><p class='terminal-text'>guest#sethrait:~ $</p> <textarea class='form_input' name='terminal' placeholder='echo Currently under construction, please come back later'></textarea></form></div>");
}
Note, not certain what processCommand , loc are , not appear defined at js at Question ?
Try substituting $("#terminal-window") for $(".terminal-window") as .terminal-window class not appear at html ; attaching keydown event to document , delegating event to .form_input as original .form_input element appear to be replaced at $(".form_wrapper").replaceWith
$(document).ready(function() {
$(document).on("keydown", ".form_input", function(event) {
// console.log(event)
if (event.keyCode == 13) {
$("#terminal-window form").on("submit", function(e) { //when form is submitted
event.preventDefault();
submitCommand(event);
}).submit();
}
});
//triggered when user submits a command to the console
function submitCommand(e) {
e.preventDefault();
var usrCommand = $('.form_input').val();
// processCommand(usrCommand);
$(".form_wrapper").replaceWith("<p class='new-terminal-text' style='margin-left: -12px'>" + usrCommand + "</p><br>");
$("#terminal-window").append("<div class='form_wrapper'><form class='terminal-text'><p class='terminal-text'>guest#sethrait:~ $</p> <textarea class='form_input' name='terminal' placeholder='echo Currently under construction, please come back later'></textarea></form></div>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="col-md-6 col-md-offset-6 col-centered terminal-header">
<div class="close text-center">x</div>
<p id="header-text">guest#sethrait:~</p>
<div class="row">
<div id="terminal-window" class="col-md-10 col-md-offset-2 col-centered">
<div class="form_wrapper">
<form class="terminal-text">
<p id="p_term" class="terminal-text">guest#sethrait:~ $</p>
<textarea class="form_input" name="terminal" placeholder="Currently under construction, please come back later"></textarea>
</form>
</div>
</div>
</div>
</div>
Related
I am creating 'typeform like' form, that scrolls one input element at a time.
name -> email -> phone -> address -> note
(codepen here)
With the code below, I have the situation that after entering value for phone and pressing enter, address gets skipped. Flow directly reaches note.
The reason is that focusout event gets fired, immediately after target.find(".input-box").focus() on input#address.input-box.
I do not understand what is causing focusout to be fired.
Can anyone explain? (and how to stop it from happening).
The intent is to have phone element scroll after user enters the input on mobile. On iOS for example, there is no Enter key for phone entries, only 'Done'.
I use focusout since it the event fired on pressing 'Done'. But it is too broadly fired, to properly work with.
Is there a better way to achieve the expected behavior?
HTML:
<!-- ... -->
<div class="flex-container">
<form novalidate="">
<div class="input-block flex-item" id="input-block-name" style="display: inherit;">
<div class="label">name</div><input class="input-box" type="text" id="name">
</div>
<div class="input-block flex-item" id="input-block-email" style="display: none;">
<div class="label">email</div><input class="input-box" type="email" id="email">
</div>
<div class="input-block flex-item" id="input-block-phone" style="display: none;">
<div class="label">mobile</div><input class="input-box" type="tel" id="phone">
</div>
<div class="input-block flex-item" id="input-block-address" style="display: none;">
<div class="label">address</div><input class="input-box" type="text" id="address">
</div>
<div class="input-block flex-item" id="input-block-note" style="display: none;">
<div class="label">note</div><input class="input-box" type="text" id="note">
</div>
<!-- ... -->
</form>
<!-- ... -->
JS:
$(".input-box").first().focus();
$(".input-block")
.not($(document.activeElement.parentElement))
.css({ display: "none" });
$(window).on(
"keyup wheel focusout",
_.debounce((event) => {
var current = $(":visible").closest(".input-block");
// next
if (
event.key === "Enter" ||
event.originalEvent.deltaY > 0 ||
(event.type == "focusout" && event.target == $("#phone")[0])
) {
var target = $(":visible").closest(".input-block").next();
target.css({ display: "inherit" });
target.find(".input-box").focus();
current.css({ display: "none" });
}
// prev
if (event.originalEvent.deltaY < 0) {
var target = $(":visible").closest(".input-block").prev();
target.css({ display: "inherit" });
target.find(".input-box").focus();
current.css({ display: "none" });
}
}, 30)
);
EDIT: refined the question, after first response.
EDIT by OP: what 'solved' the issue, was to use blur event (see comments).
I believe your issue is with this line (in the if condition):
(event.type == "focusout" && event.target == $("#phone")[0])
With each scroll there will be a 'focusout' type from the previous input. When you scroll from phone to address, the phone input box has a type of 'focusout' and the above referenced code condition is true, hence why the result of the condition is happening twice.
Fully removing the above referenced line should resolve your issue.
I want when the user chooses a file there is another input file is created but with my code when the user open it and close it without choosing a file then he opened it again and chose one there are 2 inputs are created if he opened and closed 3 times then chose one there are 4 inputs are created.
if he chose a file from the first time there is just 1 is created
<div class="gal-stf">
<input class="plus-n" type="file">
<p class="bt"></p>
</div>
<div class="ad-photo" style="display: none;">
<div class="gal-stf">
<input class="plus-n" type="file">
<p></p>
</div>
</div>
$(".gal").on("click", ".plus-n", function () {
var el = $(this).val();
$(this).change(function () {
$('.gal').append($('.ad-photo .gal-stf').last().clone(false));
$(this).prop('disabled' , 'disabled');
$(this).siblings('p').text(this.value);
});
});
Actually, it's happening because you are binding event handler on each click, so 3 click means 3 different handlers and each will fire when change event happened. Instead of listening click event directly listen to change event using event delegation.
$(".gal").on("change", ".plus-n", function() {
$('.gal').append($('.ad-photo .gal-stf').last().clone(false));
$(this).prop('disabled', 'disabled');
$(this).siblings('p').text(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gal">
<div class="gal-stf">
<input class="plus-n" type="file">
<p class="bt"></p>
</div>
<div class="ad-photo" style="display: none;">
<div class="gal-stf">
<input class="plus-n" type="file">
<p></p>
</div>
</div>
</div>
I am trying to trigger an event with a button that takes text from a textarea and sends it to a panel using the Bootstrap Framework (v.3.3.7). Currently trying to do this using an event listener in Javascript rather than assigning an ‘onclick’ value for the button.
HTML:
<div class="container-fluid">
<div class="row">
<!-- Panel where text will be appended to -->
<div id="mainChatBox" class="panel-body" style="height:435px; overflow-y:scroll"></div>
<!-- Textarea and button -->
<div class="panel panel-footer" style="height:40px">
<div class="form-group col-md-10 col-lg-10">
<input type="text" placeholder="Type your message here" class="form-control" id="messageBar" />
</div>
<div class="input-group-btn col-md-2 col-lg-2">
<button id="sendMessageButton" class="btn btn-default">Send</button>
</div>
</div>
</div>
</div>
Javascript
var sendMessageButton = document.querySelector('#sendMessageButton');
var messageBar = document.querySelector('#messageBar');
var mainChatBox = document.querySelector('#mainChatBox');
sendMessageButton.addEventListener("click", function (event) {
var message = messageBar.value;
mainChatBox.innerHTML += message + "<br />";
});
I tried debugging by using this code and another version where I instead assign the button an ‘onclick’ value and then keep the function for it.
Here is a link to a reddit post with that version of code where I tried to find a solution with assigning an ‘onclick’ value to the button instead of using an EventListener.
Reddit post link
I need to know why when the event is triggered by the button that the text will not be appended to the mainChatBox when using either the method with the 'onclick' value assignation to the "button" tag for sendMessageButton, or the EventListener in the Javascript.
I'm loading a popup div dynamically with different html page contents. The HTML page controls are rending on div successfully but the problem is, the whole page is refreshing during loading the content using $("#middlepart").load()
I want to reload the content without refreshing the page in asp.net.
The code is given below:
<div class="popmiddlepart">
<div class="type-benifit">
<div class="subdivOne">
<div class="fl-lt">
<label>Type of Benefit</label>
</div>
<div class="fl-lt">
<div id="ddlBenefitType" >
</div>
</div>
<div class="clearfix"></div>
<hr style="margin-bottom: 10px; margin-top: 10px;">
</div>
</div>
<div id="relate-message-box-html" style="display: none">
<i class="fa fa-info-circle" aria-hidden="true" style="color: red;"></i><strong></strong>
<span id="spnToolTipTexthtml"></span>
</div>
<div class="clearfix"></div>
<div id="middlepart" class="dynamic-content">
<div class="middle-part">
content goes here
</div>
</div>
</div>
I'm updating the div calling the dropdown onchange event
$("#ddlBenefitType").relateSelectControl({
selectControlDataSource: benefittypedata,
dataValueField: 'id',
dataTextField: 'text',
onchange: function (e) {
e.preventDefault();
var selectedtype = $("#ddlBenefitType").getSelectControlText();
if (selectedtype == 'Accommodation') {
var key = getQueryStringValue('id');
$("#middlepart").load(baseUrl + "employee/accomodationdetails_ie.html?id=" + key);
}
if (selectedtype == 'Loan') {
var key = getQueryStringValue('id');
$("#middlepart").load(baseUrl + "employee/loandetails_ie.html?id=" + key);
}
}
});
Try $.get(). It is shorthand for making a jquery ajax call to load the html from an external source asynchronously.
Something like this should work:
$.get( baseUrl + "employee/accomodationdetails_ie.html?id=" + key, function( data ) {
$( "#middlepart" ).html( data );
});
I am in the middle of implementing a feature.
objective :
to have a popover form with ajax request .
bootstrap popover
NOTE : previously i tried to achive the same with the bootstrap editables
but due to the fact that I don't want data(entered in popover) to be shown on page . (which editables are for) .
So ,
with current method (jsfiddle)
ISSUE :
when I am clicking on the popover to enter data inside the from popover disappears.
i am searching for a jquery fix . ( something with event propagation will do )
my code :
<div class="box-icon" >
<div class="popover-markup">
<i class="icon-plus-sign"></i>
<div class="head hide">Enter Email<i class="icon-remove" style="margin-left: 120px;"></i></div>
<div class="content hide">
<input type="text" placeholder="Type email address">
<button type="submit" class="btn">Submit</button>
</div>
<div class="footer hide">test</div>
</div>
</div>
and my scripts are :
$( document ).ready(function() {
$('.popover-markup > .trigger').popover({
html : true,
title: function() {
return $(this).parent().find('.head').html();
},
content: function() {
return $(this).parent().find('.content').html();
}
});
// Attach click handler to document
$(document).bind('click', function (e) {
$(".popover-markup").popover('hide');
});
// Dont hide when I click anything inside #container
$('.popover-markup').bind('click', function(e) {
e.stopPropagation();
});
});