I am working with webapp-net to build an application for iOS/android. in my app I have a form with some text fields. I want to have a "X" icon that usually appear on text fields when an input is entered. by clicking on that icon you can remove the whole input in just one click. The icon "X" appears only when an input is entered, when the textfield is empty the icon is not visible. If you could just give me an example of how to do it, I would really appreciate it.
this simple html shows how to have an input field and a X button that calls a clean function when pressed
<input type="text" onkeypress="show();" id="text" /><div id="close" onclick="clean();" style="display:none">x</div>
Now the javascript
<script type="text/javascript">
function show(){
document.getElementById('close').style.display = ''; //shows the X button when text is entered;
}
function clean(){
document.getElementById('close').style.display = 'none'; //hides the X button
document.getElementById('text').value = ""; //clears the field
}
</script>
Of course this lacks validations like what type of key is pressed to avoid showing the X button when you press SHIFT or CTRL
Related
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.
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
On click of a button, I am showing a popup with one text area and a submit button.
I am able to enter a value in the textarea (e.g.: "hello1"), and when clicking on the submit button, I am checking the textarea's entered value, it gives me "hello1", and fades out the pop up. (as expected)
Issue: the second time, I click the same button again, I entered the value "hello2", and after submitting, it shows me the last entered value in an alert and fades out.
Below is my code:
function onCalChange(cal) {
// inputField = cal.inputField;
startDate = cal.date;
var calVal = this.id;
popup2(calVal);
}
function popup2(calVal) {
idValue = calVal.split("-");
$('.popup2').css('display','block');
//$('.popup2').addClass('pop_up_bckgd');
$(".popup2").append("<div class='pop_up_bckgd'></div>");
$(".popup2").append("<div class='pop_up_container'><form>\n\
\n\
\n\
<label style='margin-left:65px;margin-top:40px;'class = 'label-value' for = 'reason-for-change-" + idValue[2] + "'>Reason for change</label>\n\
<br>\n\
<textarea id='reasontxt" + idValue[2] + "'style = 'width: 74%;margin-left: 62px;height:100px' class = 'text-box' name = 'reason' required></textarea>\n\
<br>\n\
<div style = 'text-align:center'><input class = 'submit-value2' type = 'button' value = 'Submit' name = 'submit1' onclick= 'clicksubmit(idValue[2]);' '></div ></form>")
}
function clicksubmit(id) {
var idNum= parseInt(id);
if ($('#reasontxt' + idNum).val() == "") {
// alert("1");
$('#reasontxt' + idNum).next(".validation").remove();
$('#reasontxt' + idNum).after("<div class='validation' style='color:red;margin-top:5px'>Please enter Reason for change Field</div>");
} else {
alert('2');
alert($('#reasontxt' + idNum).val());
$('#reason' + (idNum)).val($('#reasontxt' + idNum).val());
// $('#reasontxt' + idNum).val() == ""
$('.popup2').fadeOut();
}
}
After making he change specified by erkaner on the comments, I was able to reproduce the issue by copying your code into this JSFiddle: http://jsfiddle.net/v2djohhw/ (I had to make another minor change to hardcode the value of calVal for testing).
From what I saw, the issue is:
Every time that you click on the button, a form with a textarea and a submit button are appended to the popup (using $(".popup2").append(...));
the id of the textarea depends on the id of the button that was clicked (calVal);
so if the same button is clicked several times [or the button is different but it has an id which third part (as you are splitting it and only using the third value idValue[2]) matches the one of a previously clicked button], you will be appending multiple textarea over time, all of them with the same id.
when you submit, and read the value of the textarea, as there are multiple with the same id, the browser will take the value of the first textarea with the specified id.
Because of that you get always the same value that is the one of the first textarea.
How to fix it? Avoid having multiple elements with the same id.
One possible solution: delete the content of the .popup2 box every time you are going to display it, that way you make sure that the id of the textbox is really unique and you don't face unexpected errors:
$(".popup2").html("");
You can see it working here: http://jsfiddle.net/v2djohhw/1/
If you don't want to (or you cannot) delete the content of the .popup2 box, and want to show all the previous textareas, another solution would be keeping track of the number of times the button was clicked and add that value into the id of the textarea. That way you'll make sure the textbox id will be really unique.
You can see it on this other fiddle: http://jsfiddle.net/v2djohhw/2/
I don't have idea how to do this, although I've seen it on numerouse websites. So, it is obviously an easy code, but I got stuck.
I create a simple app that displays textarea and a button. When you click the button, it adds one more textarea below. Therefore, I want to remove the frame (border) of the previous textarea when you click the add button. And also, to automatically select the next one for typing.
CLARIFICATION: User types in textarea some text, and presses the red button. It becomes green. And the border of the first textarea disapears (only text remains) and the added textarea below is automatically selected (clicked) and user can type in the text and again press the red button and so on. If user decide to return and change the text of previous textarea, the border will appear again.
THERE IS THE FIDDLE
And here is the code:
<textarea rows="3" cols="30" ></textarea><br/>
<input type="button" style="background-color:red;width:48x;height:20px;" id="btn1" value="ADD" onClick="change(this);addmore();">
<div id="inner"></div><br/>
function change(myinput) {
myinput.style.backgroundColor = "green";
}
function addmore() {
var textarea = document.createElement("textarea");
textarea.rows = 3;
textarea.cols = 30;
var div = document.createElement("div");
div.innerHTML = textarea.outerHTML + '<br/><input type="button" style="background-color:red;width:48px;height:20px;" id="btn2" value="ADD" onClick="change(this);addmore();"><br/>';
document.getElementById("inner").appendChild(div);
}
The goal of this code is to get a user input from a simple form in my Chrome extension pop up. When the user submits the form, I want the value in that input field to be added to the array of myNames.
In popup.html
<form class="my-form">
<input placeholder="Enter a name" class="name-to-submit"></input>
Add Name
</form>
In popup.js
var newName = $('.name-to-submit').val();
if ($('.submit').click() && newName !== "") {
... do some stuff
}
My problem is that newName is always coming through as "" and I can't figure out why...
Should I change my anchor tag to a button or an input with type=submit?
Or do something else?
Any help would be appreciated!
Is there a click event tied to your anchor? That should set it off after the text has been typed in.
$(".submit").click(function(){
var newName = $('.name-to-submit').val();
alert(newName);
});
http://jsfiddle.net/HARR2/
EDIT: if you want to fire this event when the user hits enter(on form submit)
$(".my-form").submit(function(){
var newName = $('.name-to-submit').val();
alert(newName);
});
http://jsfiddle.net/HARR2/2/
I would always declare the type attribute of an input element. Should your name input element have the attribute type="text"?