I would like the "Send" button to be disabled if the input is empty.
I want to manage this in the JavaScript file.
I know that it is possible in HTML to call a function on the input but I prefer to use an event in the js file.
https://codepen.io/leakcim-web/pen/gOYPpqo
//javascript
let inputElt = document.getElementById('input');
let btn = document.getElementById('button');
if (inputElt.value !== '') {
btn.disabled = false;
} else {
btn.disabled = true;
}
<input placeholder="Enter some text" name="name" id='input' />
<button id='button'>Réserver</button>
You can use addEventListener to add an event to the textbox and enable/disable as appropriate
let inputElt = document.getElementById('input');
let btn = document.getElementById('button');
inputElt.addEventListener("input", function(){
btn.disabled = (this.value === '');
})
<input placeholder="Enter some text" name="name" id='input'/>
<button id='button' disabled>Réserver</button>
Just as amusement, you can do this in just CSS and html, reference Matching an empty input box using CSS
#input:invalid + button {
opacity: 0.5;
pointer-events: none;
}
<input placeholder="Enter some text" name="name" id='input' required="required"/>
<button id='button'>Réserver</button>
And if you have something in between the button and input you can use #input ~ #button. also you don't need the id attributes you can use type="submit" on button then use input ~ [type="submit"] then it will work with any input at the same nesting.
Related
I'm trying to make an input, it has its value from the beginning.
Then, when the user double click on a span, the cursor needs to be in input field and the user should be able to edit it.
Once edit is ready, he needs to press save button in order to save it, not just click outside of the input field(which is by default)
The second button will just delete, reset the name string, and then once again when you press save, it will save the empty string.
All that, will depend on which span the user is dblckicking, so the respective input of a respective span has to be accessed for edit.
I've done something like this for now..
But it's far to be ready. Would appreciate you're ideas.
I need to do it using vanilla JavaScript
var numberOfbuttons = document.querySelectorAll(".name").length;
for (i = 0; i < numberOfbuttons; ++i) {
document.querySelectorAll('.name')[i].ondblclick = function() {
document.getElementById('in1').disabled = false;
document.getElementById('in1').value = 'hahmmm';
};
}
<span id="spn1" class="name">
<input id="in1" type="text" disabled="true" value="Homer Simpson">
<div class="namefunc">
<button class="check">save</button>
<button class="close">delete</button>
</div>
</span>
<span id="spn2" class="name">
<input id="in2" type="text" disabled="true" value="Marge Simpson">
<div class="namefunc">
<button class="check">save</button>
<button class="close">delete</button>
</div>
</span>
<span id="spn3" class="name">
<input id="in3" type="text" disabled="true" value="Bart Simpson">
<div class="namefunc">
<button class="check">save</button>
<button class="close">delete</button>
</div>
</span>
In order to make the correct input field editable, you must not work with the ID of the first input field in the loop. Here is a way to select the correct input field via the double-clicked span element:
document.querySelectorAll(".name").forEach(span => {
span.ondblclick = function() {
let input = span.querySelector("input");
input.disabled = false;
input.value = "hahmmm";
input.focus();
span.querySelector("button.check").onclick = function() {
input.disabled = true;
}
span.querySelector("button.close").onclick = function() {
if (input.disabled == false) {
input.value = "";
input.focus();
}
}
}
});
window.onclick = function() {
let active_input = document.querySelector("input:not([disabled])");
if (active_input) {
active_input.focus();
}
}
I'm not quite sure what the save button is supposed to do. Right now it just disables the input field again, keeping the new value.
I'm trying to show save button only if input gets value,
The issue is if i use append for each input i get 1 button printed, what I'm looking for is regardless of input length get the button only once.
The important is input not be empty that's all.
Code
<input class="text_dec form-control" type="text" onkeypress="myFunction()" name="text_dec[]" id="'+ textFieldsCount.toString() +'">
function myFunction() {
$('#moreless').append("button here");
}
any idea?
Instead of keypress, use keyup, this will call the listener just when the key is released, so you will have the correct length of the input value. With that, you can check if the button must be displayed or not.
Also, I would have another check to make sure that input have some value on it to save when clicked.
Like below, take a look:
$(function(){
$('.myInput').on('keyup', function(){
var btnElem = $('.myButton');
var charLength = this.value.length;
if (charLength > 0){
btnElem.show();
}else {
btnElem.hide();
}
});
$(".myButton").on("click", function(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
});
});
.myButton {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="">
<input class="myButton" type="button" value="Save Button" />
</body>
EDIT
Now, if you really need to make as you were doing before (I don't consider it a best practice and also recommend you to rethink if you really wanna go through this) here goes a code that will help you. Click to show.
Here I added the functions and created the button element (if necessary) then append it to DOM just when the input have some value length.
function myFunction(input){
var btnElem = $(".mySaveButton")[0];
if (!btnElem){
btnElem = document.createElement("button");
btnElem.textContent = "Save Button";
btnElem.onclick = btnClicked;
btnElem.className = "mySaveButton";
}
var charLength = input.value.length;
if (charLength > 0){
document.body.append(btnElem);
}else {
btnElem.remove();
}
};
function btnClicked(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="" onkeyup="myFunction(this)">
</body>
So I think you just want a button to show to the user once they type something in the text box. If that's the case, then you don't really want to append a button every time they press a key in the box.
Instead I'd make a button and set its css to display none and then when they keydown in the text box change the button's css to display block.
Something like this: http://jsfiddle.net/wug1bmse/10/
<body>
<input type="text">
<input class="myButton" type="button" value="button text" />
</body>
.myButton {
display: none;
}
$(function(){
$('input').on('keypress',function(){
var htmlElement= $('.myButton');
htmlElement.css('display', 'block');
});
});
Hiding the element with a class might be easier:
.btn-hidden {
display: none;
}
<input id="save-button" class="btn-hidden" type="button" value="save" />
function showSave() {
$('#save-button').removeClass('btn-hidden');
}
function hideSave() {
$('#save-button').addClass('btn-hidden');
}
This is the HTML code:
<body>
<form>
<input id="input" type="text" name="input" value="Enter Here">
<input type="submit" value="Submit">
</form>
<div id="display">
</div>
</body>
This is the JavaScript:
input = document.getElementById("input");
if (input.value == "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
When I change the input value by clicking on the input field and typing "Hello", it does not display "Hello" in display.innerHTML. I would like it to display "Hello" when "Hello" is typed into the input field. That's a lot of "Hello"'s! Any help would be great! Thanks in advance.
var input = document.getElementById("input"),
display=document.getElementById("display");
input.oninput=function(){
if (input.value === "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
};
<input id="input" type="text" name="input" value="Enter Here">
<div id="display">
</div>
Your javascript code only gets executed once before you have entered anything in the input field.
You need to either setup a change handler for the input field or a submit handler for the form and set display.innerHTML.
Also, did you miss a display = document.getElementById("display");?
If you want use your button for submit the value of your textbox (your input type text-field) use onclick event as follows:
function displayData() {
var div_display = document.getElementById('display');
/* This is your input, but you shoud use another Id for your fields. */
var textValue = document.getElementById('input').value;
/* Change the inner HTML of your div. */
div_display.innerHTML = textValue;
}
<input id="input" type="text" name="input" value="Enter Here" />
<input type="submit" value="Submit" onclick="displayData();" />
<div id="display">
</div>
Hope it helps.
I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}
When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>
You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/
There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.
You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}
I'm trying to change my 'send' button which onClick sends a message from an input box to a div, to also trigger the click of a 'checkbox' input.
HTML
<button type="submit" class="btn btn-default">Post</button>
<input name="stry" type="text" id="stry"/>
<input name="nope" type="text" id="message-input"/>
<input type="checkbox" name="sendsms" onclick="copyStory(this)">
*These buttons are actually in a form
JS
function copyStory(ch) {
if (ch.checked)
var text1 = document.getElementById("message-input").value;
else
text1 = '';
document.getElementById("stry").value = text1;
}
I've searched around but I can't find a way to make the send button trigger the checkbox, any suggestions?
So what you need is to have same handler for both onclick and onchange events. Try this way,
HTML :
<input type="button" id="sendButton" value="Send" onclick="copyStory(this)" />
<input name="nope" type="text" id="message-input"/>
<input type="checkbox" name="sendsms" onchange="copyStory(this)"/>
<div id="msgDiv"></div>
javaScript :
function copyStory(ch) {
var text1
if (ch.checked || ch.id == "sendButton")
text1 = document.getElementById("message-input").value;
else
text1 = document.getElementById("msgDiv").innerText = "";
document.getElementById("msgDiv").innerText = text1;
}
jsFiddle