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();
Related
I am trying to create a simple google search bar in my website. It works fine. However, I am accounting for user error, and for some reason I cannot re-enable my submit button once it is clicked, under the condition that no input is provided. Please see Javascript code below.
const text = document.querySelector("#search");
const msg = document.querySelector(".msg");
document.querySelector(".google-form").addEventListener('submit', onclick)
function onclick(e) {
if (text.value === '' || text.value === null) {
e.preventDefault();
msg.classList.add('error');
msg.innerHTML = 'Please enter a proper search query';
setTimeout(() => msg.remove(), 3000);
document.querySelector("#button").disabled = false; // <-- This method doesn't seem to work.
}
}
<div class="google-form">
<div class="msg"></div>
<form id="my-form" action="https://www.google.com/search">
<input id="search" type="text" name="q" placeholder="Enter Search">
<button id="button" type="submit">Submit</button>
</form>
</div>
As you can see, if no text is input, it will let the user know they will need to enter an actual search query. However, after that point, the submit button just wont work again.
I tried using .querySelector().disabled = false; , as well as .removeAttribute("disabled"), but nothing is working. What exactly am I missing here, to re-activate the submit button once it was clicked with no input?
Your button works just fine. You just remove the complete element and then the msg = document.querySelector(".msg"); doesn't find anything. In addition i would leave the timeout out and let the message there until the user writes something.
You should do it like that:
const text = document.querySelector("#search");
const msg = document.querySelector(".msg");
document.querySelector(".google-form").addEventListener('submit', onclick)
function onclick(e) {
msg.innerHTML= '';
if (text.value === '' || text.value === null) {
e.preventDefault();
msg.classList.add('error');
msg.innerHTML = 'Please enter a proper search query';
document.querySelector("#button").disabled = false; // <-- This method doesn't seem to work.
}
}
<div class="google-form">
<div class="msg"></div>
<form id="my-form" action="https://www.google.com/search">
<input id="search" type="text" name="q" placeholder="Enter Search">
<button id="button" type="submit">Submit</button>
</form>
</div>
When button type is set on submit value, it will send the information to the server anyway. (not if you use preventDefault() method!)
My suggestion is to change button type to button and then write an onclick event for it and check the validation there , if everything was right then call for form submit event!
This is how you can prevent incorrect information from being sent into the server side and avoid the errors that it can cause.
I'm not overly familiar with jquery and I'm trying to adapt someone else's code for what I need. Currently, the code submits the contents of a form with a textarea (called "sendie") and other information when the user presses the enter key. I'd like to change that so that the information is submitted when a button is pressed. It seems like it should be simple, but it has me completely stumped. I'm an amateur, this is for a personal project for some friends and I. Any help would be appreciated.
Relevant Code (I think):
// watch textarea for release of key press
$('#sendie').keyup(function(e) {
if (e.keyCode == 13) {
var text = $(this).val();
var maxLength = $(this).attr("maxlength");
var length = text.length;
// send
if (length <= maxLength + 1) {
chat.send(text, name, time, filename,);
$(this).val("");
} else {
$(this).val(text.substring(0, maxLength));
}
}
});
<form id="send-message-area">
<textarea id="sendie" maxlength='5000'></textarea>
<br>
<input id="post" type="submit" value="Post" /> //I added this line for the button.
</form>
With jQuery I think you can just do:
$("#post").click(function() {
var text = $("#sendie").val();
var maxLength = $("#sendie").attr("maxlength");
//rest of the code in the if block from the original, replacing $(this) with $("#sendie")
});
This adds a click handler to the button you added with id="post". You might not want it to be a submit type though and rather do button type, but I'm not 100% on that and/or your exact use-case.
I am trying to work with a chatroom and some users would like a feature to submit on enter.
I current have this code:
Form html:
<form id="send-message-area" name="send-message-area" method="post" action="">
<textarea id="sendie" name="sendie" maxlength = '255'></textarea>
<input type="submit" name="sendieButton" id="sendieButton" value="Send" />
</form>
jQuery:
$(document).ready(function(){
$("textarea").keyup(function(event){
if(event.keyCode == 13){
//$("form").submit();
$("form").trigger("submit");
}
});
});
However when hitting enter it does indeed submit, however it doesn't send any data with it.
It works just fine when pressing the submit button.
I already tried $("form").submit(); but it does the exact same.
EDIT:
I think the problem lays in my PHP.
if(isset($_POST['sendieButton'])){
$fromID = $brugernavn;
$fromMsg = $_POST['sendie'];
sendMsg($fromID, $fromMsg);
};
However when changing to check for $_POST['send-message-area'] it doesn't work at all.
Your button value will not be submitted until you click on it. So either you trigger its click event
$(document).ready(function(){
$("textarea").keyup(function(event){
if(event.keyCode == 13){
//$("form").submit();
$("#sendieButton").trigger("click");
}
});
});
or check only textarea value isset or not in PHP
if(isset($_POST['sendie'])){
$fromID = $brugernavn;
$fromMsg = $_POST['sendie'];
sendMsg($fromID, $fromMsg);
};
You need to check for name of the textarea not the button
if (isset($_POST["sendie"])) {
$fromMsg = $_POST['sendie'];
}else{
echo "no sendie";
}
I have a webpage that I'm using to update a value remotely. To be more specific, on one side, I have a screen connected to the internet with a little field in it that reads (Now Serving: ##) and on the other side, I have a tablet connected to the internet with a webpage that is used to push the value to the screen and update it. Everything looks good except the following:
Getting the input field to clear after it submits the value so I can type another number in it without the need to manually clear it
Below is my HTML Code
<div id="container">
<div id="logoDiv"></div>
<h3>Type the number in the box</h3>
<div class="theWork">
<div id="formDiv">
<FORM NAME="test" class="theForm">
Now Serving: <input type="text" name="msg1" class="testingHuss" id="theOrderBox" autofocus ><br>
</FORM>
</div>
<div id="onScreenDiv"><span id="onscreen"></span></div>
</div>
</div>
and here is my JavaScript code
$(document).ready(function() {
$('.testingHuss').keydown(function(event) {
if (event.keyCode == 13) {
sendCommand("galaxy.signage.me", "wmt_huss", "husshuss", "3", "nowServing", document.test.msg1.value);
document.getElementById('onscreen').innerHTML = document.test.msg1.value;
return false;
}
});
});
Since you are using Jquery you can do it like this:
$(document).ready(function() {
$('.testingHuss').keydown(function(event) {
if (event.keyCode == 13) {
//Do Necesary stuff when enter was pressed.
$(event.currentTarget).val('');
}
});
});
Fiddle: https://jsfiddle.net/fgqs4hzb/
document.test.msg1.value =""
Before return false
Since you're using jquery replace this line:
updateTextInput(session, "testingHuss", value = "")
with:
$('.testingHuss').val('');
This is my first message here so I hope that newbies also get help :)
My problem is following:
let's start with code first....
javascript:
$(document).ready(function(){
if ($("input#datum2").val() == "")
{
$().click(function(){
$("input#datum2").val($("input#datum1").val());
});
}
});
html:
<form >
<input id="datum1" type="text" />
<input id="datum2" type="text" />
</form>
What I want this script to do is that first checks if input field datum2 is empty. If yes, than copy value from input#datum1. This action is suppose to happen each time user clicks (anywhere on page?)...
When user types something in datum1 and clicks somewhere than this value is copied to datum2. The problem is when user edits datum1 or datum2, than this value is again copied to datum2. Obviously this condition
if ($("input#datum2").val() == "")
works only once.
I'm new to javascript and jquery so I would appreciate for any help.
Thanks in advance!
Cheers,
Ile
Sounds like you'll need to bind to a different event. Blur occurs when an input loses focus, which sounds like what you're after.
$(function() {
var $datum2 = $('#datum2');
$('#datum1').blur(function() {
if(!$datum2.val())
$datum2.val($(this).val());
});
});
Couple of things:
1) $(function() { ... is a nice shortcut to $(document).ready
2) In JavaScript, an empty string evals to false, so its a nice shortcut.
I see the way round are the order of the click event and "if ($("#datum2",..."
HTML:
<form id="myform">
<input id="datum1" type="text" />
<input id="datum2" type="text" />
</form>
Javascript:
$(document).ready(function(){
$().click(function(){
if ($("#datum2", $("#myform")).val() == "") {
$("#datum2", $("#myform").val($("#datum1", $("#myform")).val());
}
});
});
$(document).ready(function(){
var $datum2 = $('#datum2');
$('#datum2').hover(function() {
if(!$datum2.val())
$datum2.val($('#datum1').val());
});
});