I have a website where you can enter information into an input box and then below it a button that says "add". When pushing this button I want it to create a new button with the text inputted above.
I'm not quite sure even where to start with the javascript but here's my html:
<input type="text" name="device" id="device">
<button class="add">Add</button>\
I'm just trying to make an add button make another button with the text in input box above.
Concepts
You need to change the DOM and append a new Element to your HTML.
To do this you need to capture the value when you click on the button and, after that, render the new element. I've created a Codepen to help you with that:
To explain:
HTML
<input id="my-input" placeholder="Place your text here" />
<button id="my-button">Submit</button>
<p id="my-content"></p>
Every element has an id that you'll use on your...
Javascript:
const myInput = document.getElementById('my-input')
const myButton = document.getElementById('my-button')
const content = document.getElementById('my-content')
myButton.addEventListener('click', function(event) {
const myInputValue = myInput.value;
content.innerHTML = myInputValue
})
By first we get all elements on DOM using document.getElementById function. After that we add an event to our button, the event of click. After that, we catch the value inputted by the user and change the HTML inner our p tag and put the text that have been inputted in our input.
So, after that, the text will be rendered on the screen and you can see what you have inputted.
Soluctions
By now, using this concept, we can now use this and change also, in our element, the style of showing or not. You can follow to this other Codepen that I'll use in our example:
HTML:
<input id="my-input" placeholder="Place your text here" />
<button id="my-button">Submit</button>
<button id="my-other-button"></button>
Javascript
const myInput = document.getElementById('my-input')
const myButton = document.getElementById('my-button')
const myOtherButton = document.getElementById('my-other-button')
myOtherButton.style.display = 'none'
myButton.addEventListener('click', function(event) {
const myInputValue = myInput.value;
myOtherButton.style.display = 'block'
myOtherButton.innerHTML = myInputValue
})
So, now we are capturing our elements as before, but that time we capture also an empty button and, with style.display property we change, when the first render occurs, to not showing our button. After we click in the first button we change it again to show it and, as before, change the innerHTML with the text that user have inputted.
Related
I'm looking to copy the text from a <p> element with the ID of code and put it in an input field with the data-field-id of 6197c68b4c806 when a button is clicked.
How could I do this? I would like the code to be inline if that is possible.
First you need to access the element you want to copy the text from with:
`let text = document.querySelector('css selector').text` or .textContent.
This will save the text existing in the element.
Then you select the input, using the same technique and then do:
.value = text.
Also add an event listener to the button you want to click to trigger this:
document.querySelector('btn.submit').addEventListener(() => {
let text = document.querySelector('css selector').text;
document.querySelector('input#x').value = text
})
Should do the trick.
document.queryselector('#btn').addEventListener(()=>
var q_t = document.queryselector('#input').text;
document.queryselector('#output').text(q_t);
)}
You have to follow this above code, hopefully you can solve this
I have the below input that the user can first click to enable (button1), type the desired new value, and finally save it (button2).
<input class="form-control inputUserValue" onkeypress="return contoso.isNumberKey(this, event,3);"
data-default_value="10,00" value="10,00" disabled="">
The issue: after the field is enabled, the user has first to erase the input content with delete or backspace at keyboard (including when the content is already selected) and then start typing the new value at the blank input field. So, the user can't simply use the mouse to select and just type the new value. This behaviour also occurs at other sections of the software when the input is text.
The idea is to improve the user experience by making it possible to just type the desired new value after button1 pressed, replacing existing and displayed content. The existing text/value should still be displayed, but already selected and ready to be replaced if the user types, or the user may want to deselect and make same minor adjust at the existing text/value.
We've tried onclick="this.select();" when button1 pressed, but still we couldn't type the new value without delete or backspace first.
Can anyone help on how to achieve this?
The HTML is generated and managed with JS. The input is whitin a table-responsive. Our system is designed to work on Chrome.
You were on the right way to use the select() method, but you first need to focus() the input:
usrinput.focus();
usrinput.select();
Working example: (for input type text)
const usrinput = document.querySelector('input');
document.querySelector('#button1').addEventListener('click', function() {
usrinput.disabled = false;
usrinput.focus();
usrinput.select();
});
<button id="button1">enable</button>
<input type="text" value="10,00" disabled>
<button id="button2">Save</button>
Working example: (for input type number)
const usrinput = document.querySelector('input');
document.querySelector('#button1').addEventListener('click', function() {
usrinput.disabled = false;
usrinput.focus();
usrinput.select();
});
<button id="button1">enable</button>
<input type="number" value="10" disabled>
<button id="button2">Save</button>
I am making an unfair dice roller and I have a button with this code:
<button type="button" id="roll-button">Roll the Dice</button>
The button rolls the dice, but I want the site viewer to be able to change what this button says. I have no clue how to do this. Does it have to do with a variable in JavaScript?
Main Question: How do I make the person able to change the text with a form element?
Do you want this way?
Below code is create button tag. Also I set button tag attribute id and type.
HTML
...
<div id="root">
</div>
Javascript
<script>
var buttonText = 'Roll the Dice';
var button = document.createElement('button');
button.textContent = buttonText;
button.setAttribute('id', 'roll-button');
button.setAttribute('type', 'button');
document.getElementById('root').appendChild(button);
</script>
For the first time get the element from document and then change its text Content property to the variable text.
How do I make the person able to change the text with a form element?
Assuming that this is a text input, you'd have to get the value from the input then change the text of the button.
An additional text input field with the id "text-field" is added for this demo.
var textInput = document.getElementById("text-field").value; //gets text-field value
var button = document.getElementById("roll-button"); //gets the button element
button.innerHTML = textInput; //changes the value to what the text input is
I am trying to get something working using the emoji button code from https://github.com/joeattardi/emoji-button
Using advice from the developer of the code (https://github.com/joeattardi/emoji-button/issues/58) I have been shown how to call the emoji picker from a button, which works as per this example:
https://codepen.io/thinksInCode/pen/YzymeoM
JS
const button = document.querySelector('#emoji-button');
const picker = new EmojiButton();
button.addEventListener('click', () => {
picker.togglePicker(button);
});
HTML
<script src="https://cdn.jsdelivr.net/npm/#joeattardi/emoji-button#3.0.3/dist/index.min.js"></script>
<button id="emoji-button">Click Me</button>
As you can see on the Codepen example, the picker opens when the "Cick Me" button is launched.
Unfortunately I don't know how to add in a text input field (well, I know that bit), and change the code so that when the "Click Me" button is clicked, and an emoji is clicked from the picker, that clicked emoji is inserted into the text input field.
The advice from the developer on the Github issue is:
If you use the native emoji style, you can definitely use a text field
instead of a div.
All you have to do is listen for the emoji event on the picker and you
can do whatever you want with the emoji that was picked.
That sounds simple, if you know what you're doing, which I don't!
If anyone is able to advise how that can be done please, it'd be much appreciated.
Thanks
Demo you just need to start emit with emoji event . You can read detail info in this link
put input element into html
<input type="text" id="input" />
in js put this to start emit emoji event. You can use querySelector to find input element than add emoji to its value attribute.
picker.on('emoji', emoji => {
document.querySelector('#input').value += emoji;
});
Well here is a working pen https://codepen.io/ehabsan/pen/GRogEve
Basically all what you have to do is add event listener on picker, and act in that listener.
so in html
<button id="emoji-button">Click Me</button>
<input type="text" id="input" />
and in js
const button = document.querySelector('#emoji-button');
const picker = new EmojiButton();
button.addEventListener('click', () => {
picker.togglePicker(button);
});
picker.on('emoji', emoji => {
document.querySelector('#input').value += emoji;
});
I am looking for a way so that when a user types their name within a form field input box, a digital signature is created, or some type of box that shows the name written.
Is something like this possible?
The form itself does not need to submit the signature, it is purely for show on the form page itself.
Thanks
You can listen for changes on your input and on each trigger, copy it's value to the place you want. That's what you want to achieve, right?
// Listen for input change
$('#yourInputId').on('input',function(e){
//copy it's content somewhere else
$('#placeToPasteValue').text($('#yourInputId').val());
});
EDIT: I don't know your exact case, but if you want to show/hide some other elements based on input value, you can check if input is empty
// Listen for input change
$('#yourInputId').on('input',function(e){
var currentInputValue = $('#yourInputId').val();
if(currentInputValue === '') {
$('#otherElement').hide();
} else {
$('#otherElement').show();
//copy it's content somewhere else
$('#placeToPasteValue').text(currentInputValue);
}
});
Other approach could be to add/remove your CSS classes inside if/else block to provide transitions, or other fancy effects :)
I don't know if this is what you need but maybe can help
var button = document.getElementById("submitButton");
var nameField = document.getElementById("name");
var sign = document.getElementById("sign");
function createSign(){
sign.innerText = nameField.value;
}
button.addEventListener("click",createSign,false);
#import url(https://fonts.googleapis.com/css?family=Cedarville+Cursive);
div{
height:300px;
width:80%;
font-family:"Cedarville Cursive";
font-size:25pt;
}
<input type="text" id="name">
<button value="submit" id="submitButton">Submit</button>
<br>
<div>
<p id="sign"></p>
</div>