I have an HTML form in which I get by id an input field when a button is clicked, then write its content in a div.
However, I would like to have the input values appended at each successive button click rather than replaced.
How would I do that?
Here is my code:
function myFunction() {
var x = document.getElementById("usr").value;
document.getElementById("listaa").innerHTML = x;
}
<input type="text" class="form-control" id="usr" value="unesi">
<!-- ... -->
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="myFunction()">click me!</button>
<!-- ... -->
<div class="col-sm-6" id="listaa"></div>
If you want them to be listed one after the other change the function:
function myFunction() {
var x = document.getElementById("usr").value;
document.getElementById("listaa").innerHTML += x + "<br>";
}
notice the += to append text rather than replace it.
Related
For a school project, I'm coding a porfolio.
I want to use jQuery hide() and show() to have popups that appear after clicking on buttons.
Is there a way, with a single code, to make every HTML element with the class="vignette" and an id="bouton1" show a div with the same number in id (id=popup1).
I don't know if I'm clear, I'm a student in graphic design, and I'm not having a good time.
As far as I can understand from your question, you want to show a modal whose ID is the same number as the button's ID?
You can use this same logic to work with your modal instead
// This regex just gets the number part from the ID
const re = /bouton(\d+)/
$('button.vignette').click(e => {
const res = re.exec(e.target.id)
if(res) {
// "popup" + res[1] gives the popup id
$('#content').html("popup" + res[1])
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class = "vignette" id = "bouton1">B1</button>
<button class = "vignette" id = "bouton2">B1</button>
<button class = "vignette" id = "bouton3">B1</button>
<button class = "vignette" id = "bouton4">B1</button>
<div id = "content"></div>
You can create a function that will be added via addEventListener. Alternatively you can add an onclick attribute to the HTML elements whose click you want to handle.
let activeDiv;
function myClick() {
if (activeDiv) activeDiv.classList.add("invisible");
(activeDiv = document.getElementById(this.id.replace("bouton", "popup"))).classList.remove("invisible");
}
let buttons = document.getElementsByClassName("vignette");
for (let button of buttons) {
button.addEventListener("click", myClick);
}
.invisible {
display: none;
}
<input type="button" id="bouton1" class="vignette" value="First">
<input type="button" id="bouton2" class="vignette" value="Second">
<input type="button" id="bouton3" class="vignette" value="Third">
<input type="button" id="bouton4" class="vignette" value="Fourth">
<input type="button" id="bouton5" class="vignette" value="Fifth">
<input type="button" id="bouton6" class="vignette" value="Sixth">
<input type="button" id="bouton7" class="vignette" value="Seventh">
<input type="button" id="bouton8" class="vignette" value="Eigth">
<input type="button" id="bouton9" class="vignette" value="Ninth">
<div id="popup1" class="invisible">1</div>
<div id="popup2" class="invisible">2</div>
<div id="popup3" class="invisible">3</div>
<div id="popup4" class="invisible">4</div>
<div id="popup5" class="invisible">5</div>
<div id="popup6" class="invisible">6</div>
<div id="popup7" class="invisible">7</div>
<div id="popup8" class="invisible">8</div>
<div id="popup9" class="invisible">9</div>
suppose you have 10 buttons with class vignette then you code would be:
$.each( "button.vignette", function( i, obj) {
$(obj).attr( "id", i ).on('click',function(){
$('#popup'+i).toggle();
});
});
You can replace toggle() function with your code as desired.
This question already has answers here:
Changing button text onclick
(19 answers)
Closed 4 years ago.
I have a function which returns bootstrap row and every row contains input field, textarea and remove button.
So I have multiple bootstrap rows as I am calling function for various time. After clicking on remove button I am changing border color of input and textarea just to indicate that I am not taking it into consideration. I have made remove button to work as toggle button so that it will add and remove error class that I am assigning to input and textarea.
Now I want to change the value of 'Remove' button to 'Add'. So that when I click on 'Add' button it will remove the style of input and textarea and it means that I can take those values into consideration.
function GetDynamicTextBox(value, tag) {
return'<div class="col-lg-4"><input class="form-control" type="text" value="'+tag+'" name="typetag" id="tags" data-role="tagsinput"/></div>'+'' +
'<div class="col-lg-6"><textarea class="form-control issuetext" name="comment" id="" cols="" rows="">'+value+'</textarea></div>'+
'<div class="col-lg-2">'+
'<input type="button" value="Remove" class="remove btn btn-default" /></div>'
}
$("body").on("click", ".remove", function () {
$(this).closest('#issue').find('.bootstrap-tagsinput').toggleClass('error')
$(this).closest('#issue').find('.issuetext').toggleClass('error')
});
<div class='row'id="issue">
<div class="col-lg-4">
<input class="form-control" type="text" value="'+tag+'" name="typetag"
id="tags" data-role="tagsinput"/></div>
<div class="col-lg-6">
<textarea class="form-control issuetext" name="comment" id="" cols=""
rows="">'+value+'</textarea></div>
<div class="col-lg-2">
<input type="button" value="Remove" class="remove btn btn-default" /></div>
</div>
It's pretty straightforward. Just add a click event to the button. The click event will give you an event (e) and you can then call the standard .innerText property on the element to set it. No need for jQuery here...
const btn = document.getElementById('testButton');
let clickCount = 0;
btn.addEventListener('click', (e) => {
e.currentTarget.innerText += clickCount++;
});
<button type="text" id="testButton">Initial Value</button>
You can add an event listener to the button and change its textContent according to the value of a global variable.
<button id="removeOrAdd">Remove</button>
<script>
var remove = true;
document.getElementById("removeOrAdd").addEventListener("click", function(e){
if(remove){
this.textContent = "Add";
remove = false;
} else {
this.textContent = "Remove";
remove = true;
}
});
</script>
Hi i would like few textboxes disabled when a textbox contains a specific text and i click a button.
Here is what I have:
button:
<div id="itemRows1">
<label ></label><input type="hidden" name="add_name1" /><input onclick="addRow1(this.form); " type="button" id="dodaj1" value="Dodaj tip droge in količino" class="btn btn-primary" />
</div>
<br>
</div>
script:
<script>
var dis1 = document.getElementById("preiskavoopr1");
dis1.onchange = function () {
if (this.value == "SKP" ) {
document.getElementById("dolgnaziv").disabled = true;
var x = document.getElementsByClassName("form-control1");
var i = 0;
for (i = 0; i < x.length; i++) {
x[i].disabled = true;
}
} else {
document.getElementById("dolgnaziv").disabled = false;
}
}
</script>
The button is adding more fields dinamicaly and is working as expected.
The text box with the id preiskavoopr1 is a drop down with 2 values and is OK.
When i select a value SKP in the dropdown the text boxes with ClassName("form-control1"); has to become disabled and that is working. But when i click on the button 2 more text boxes with the ClassName("form-control1"); appears not disabled but they should be.
Hope i explained well enough.
It looks like you are trying to add onclick methods to <input> elements which disguised into a button because you added class="btn btn-primary" to it.
Change your button to
<button onclick="addRow()" class="btn btn-primary">Button Text</button>
I have an input field and a button next to it, what i want to do is whatever i type in the input field then click on the button next to it, the result gets displayed in another button, here is what i tried so far:
function add_keyword() {
var keyword_value = (document.getElementById("keyword").value);
var result = keyword_value;
document.getElementById("btnresult").value = result;
}
#btnresult{
display: none;
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>
<button type="button" id="btnresult" class="btn btn-default">input value should be here</button>
https://jsfiddle.net/sheriffderek/p2LoLcv3/
I think this is what you are describing...
Some simplified markup
<div class="parent">
<input type='button' value='Add' rel='action' /><br>
<input type='text' rel='text-input' />
</div>
<ul class='button-list' rel='button-list'>
<!-- you need to put the buttons somewhere, right? -->
</ul>
jQuery was one of the tags, so I used it
// just caching some thing that will be reused (I like using rel)
var $parent = $('.parent'); // whatever - to keep some scope
var $addButton = $parent.find('[rel="action"]');
var $textInput = $parent.find('[rel="text-input"]');
var $buttonList = $('[rel="button-list"]');
$addButton.on('click', function() { // on click...
var currentInputValue = $textInput.val(); // get the value from input...
$buttonList.append('<li><button>' + currentInputValue + '</button></li>'); // append a new button...
$textInput.val(''); // clear input
});
You're almost there, you have to unhide the button you've hidden in the first place, and not set a value for a button, but rather the innerHTML property. Since a button doesn't hold a value, but displays the content between the tags as text.
I've commented my changes:
function add_keyword() {
var keyword_value = (document.getElementById("keyword").value);
var result = keyword_value;
// Changed from .value to .innerHTML
document.getElementById("btnresult").innerHTML = result;
// Changed style from to 'block'
document.getElementById("btnresult").style.display = "block"
}
#btnresult{
display: none;
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>
<button type="button" id="btnresult" class="btn btn-default">input value should be here</button>
In addition, there are several aspects of your code that could use improvement, I described them below:
function add_keyword() {
// No need for parentheses around the document.getElement function.
var keyword_value = document.getElementById("keyword").value;
// There's no need to place the value in a new variable, it is useful to place the element you wish to replace in a variable, since we'll be re-using it's instance.
var btn = document.getElementById("btnresult");
btn.innerHTML = keyword_value;
btn.style.display = "block"
}
EDIT: Since OP's goal was to create a new button with the content, this is an updated version that generates a new button for every new input.
function add_keyword() {
var keyword_value = document.getElementById("keyword").value;
// Create a new button element.
var btn = document.createElement("button");
// Set it's content to the keyword from the input.
btn.innerHTML = keyword_value
// Append it to the body.
document.body.appendChild(btn);
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>
I have multiple input boxes with the attribute name="user[]"
When a button is clicked for a particular input I need to find out at what index of user was clicked.
I've tried a few method like .index(), .attr('name"), but I cant find out the index.
How is this possible?
<div>
<input type="hidden" name="user[]"> <!-- index 0 -->
<button class="btn btn-primary">
</div>
<div>
<input type="hidden" name="user[]"> <!-- index 1 -->
<button class="btn btn-primary">
</div>
<div>
<input type="hidden" name="user[]"> <!-- index 2 -->
<button class="btn btn-primary">
</div>
...
new div can be added by clicking a button.
This is used for a user invite form so there are no ids.
I need something like this
$('button').on('click', function() {
var index = $(this).parent().children('input').getTheIndex();
// where the index is defined by the use of []
});
jQuery's .index() finds the index of an element within the given collection.
So, to search among the name="user[]" inputs, you'll first need to find all of them:
var index = $(':text[name="user[]"]')...;
Then, you can determine the .index() of the current input among them:
var index = ...index(currentInput);
Example:
$('button').on('click', function() {
var allUsers = $('[name="user[]"]');
var user = $(this).siblings('[name="user[]"]');
var index = allUsers.index(user.get(0)); // get the native DOM node for the search
console.log(index); // 0, 1, ...
console.log(user.get(0) === allUsers.get(index)); // true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="hidden" name="user[]"> <!-- index 0 -->
<button class="btn btn-primary">Test</button>
</div>
<div>
<input type="hidden" name="user[]"> <!-- index 1 -->
<button class="btn btn-primary">Test</button>
</div>
<div>
<input type="hidden" name="user[]"> <!-- index 2 -->
<button class="btn btn-primary">Test</button>
</div>
If the buttons each relate to a specific hidden element, this will do it:
var $users = $("input[type=hidden]");
var $buttons = $(".btn-primary");
$buttons.on("click", function(){
// Get the index of the button, since it will match the
// index of the input
alert("Button index was: " + $buttons.index(this));
// Get the index of the hidden element that comes just before the
// button that was clicked:
alert("Hidden index was: " + $users.index(this.previousElementSibling));
});
Fiddle: https://jsfiddle.net/cvnwr89p/5/
By the way, you need to close your <button> elements.
I think you need to set data attribute of that input boxes to the something like data-user-id=42 so you can look for checked boxes and get their data attribute. If you want something like "index within all form elements" than you need something like document.getElementById("form").elements where you can look for you inputs...
You could do this:
$('.btn-primary').on('click', function() {
console.log($('.btn-primary').index($(this)))
});