I am working on a modal for user inputs. The available inputs depend on the button/case the user clicked, e.g. in one case the modal should offer a text input, and in another case, the modal should show a radio button.
Therefore, I want to insert the input element of my modal dynamically with JavaScript.
Tested in a simple html page my code works, but not within the modal.
Is there anything special about modals I missed? How can I adjust my code to get the input element?
<html lang="en">
<div id="workModal" class="w3-modal">
<div class="w3-modal-content">
<span class="close">×</span>
<h4>Input</h4>
<div id="mod_in"></div>
</div>
</div>
</html>
<script>
var modal = document.getElementById("workModal");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {modal.style.display = "none";};
window.onclick = function(event) {if (event.target == modal {modal.style.display = "none";}}
// here starts the filling of the modal:
function build_modal(info) {
let element = document.getElementById("mod_in");
let inElement = "";
info.dataInputs.forEach(function (item){
inElement = document.createElement("input");
if (item.dataType.includes('string')){
inElement.setAttribute("type", "text");
}
if (item.minOccurs > 0) {inElement.required = true}
element.appendChild(inElement)
});
element.innerHTML = inElement;
let modal = document.getElementById("workModal");
modal.style.display = "block";
}
</script>
Instead of the input element, I get a [object HTMLInputElement] in my html code.
you have to use like below code for append new elements in html :
$("button").click(function(){ //you can call your function after any events
$("p").append("<b>Appended text</b>"); //you can append every element instead of <b>
});
Related
I have a button when user clicks the button it create the text box along with remove button
but all the text boxes created with same id how we can delete the text box when clicks respective remove button
here My Code:
<body>
<button type="button" id="URLbtn" onclick="Createinput()"> + Add URL</button>
<div id="TextAreaBtn"></div>
<script>
function Createinput() {
var newdiv=document.createElement("div");
newdiv.id="test"
var Inputele=document.createElement("input");
Inputele.type="text";
Inputele.id="URLtxt"
newdiv.appendChild(btnele);
var btnele=document.createElement("button");
btnele.id="rmvbtn"
btnele.type="button"
btnele.innerHTML="-"
btnele.onclick=RemoveUrlBox()
newdiv.appendChild(btnele);
var element = document.getElementById("TextAreaBtn");
element.appendChild(newdiv);
}
function RemoveUrlBox() {}
</script>
</body>
i am getting following output
if user click 2 remove button only remove the second textbox and button
You need to select the wrapping div. Easiest way is to use remove() and use closest. No need to use the id..... You also need to remember ids need to be unique.
function createInput() {
var newDiv = document.createElement("div");
newDiv.className = 'group';
var inputElem = document.createElement("input");
inputElem.type = "text";
newDiv.appendChild(inputElem);
var btnElem = document.createElement("button");
btnElem.type = "button";
btnElem.textContent = "-";
btnElem.addEventListener("click", removeUrlBox);
newDiv.appendChild(btnElem);
var element = document.getElementById("TextAreaBtn");
element.appendChild(newDiv);
}
function removeUrlBox() {
this.closest('.group').remove();
}
<button type="button" id="URLbtn" onclick="createInput()"> + Add URL</button>
<div id="TextAreaBtn"></div>
This should do the trick:
const txtarea=document.getElementById('TextAreaBtn');
document.getElementById('URLbtn').onclick=()=>txtarea.innerHTML+=
'<div><input type="text" class="URLtxt"><button class="rmvbtn">-</button></div>';
txtarea.onclick=ev=>ev.target.className==="rmvbtn"&&ev.target.parentNode.remove()
<button type="button" id="URLbtn"> + Add URL</button>
<div id="TextAreaBtn"></div>
I replaced your id attributes with class attributes, as these don't need to be unique.
I reduced your script by using innerHTML instead of laboriously putting elements together with createElement(). This is a matter of opinion as both methods have their advantages.
I also used delegated event listener attachment for the removal buttons. This way you can get away with a single event listener on div.TextAreaBtn. The attached funcion will only trigger any action if the clicked element has class "rmvbtn".
Change
btnele.onclick=RemoveUrlBox()
to
btnele.addEventListener('click', function (e) {
// `this` is the button that was clicked no matter about the id
// `this.parentNode` is the div you want to remove
const nodeToRemove = this.parentNode;
nodeToRemove.parentNode.removeChild(nodeToRemove);
});
I am trying to store a paragraph in a javascript variable. I have multiple buttons inside a table, each one of the buttons has a different value, the value of each button is a small text paragraph. When i click a button a save the current buttons value in a javascript variable called 'input'.
When a button is clicked i also load an html form called "contactForm" and i display the buttons value inside that form.
The functionality works fine, the problem though is that when i save the value of the button in the ('input') js variable it saves only the first word of the paragraph, is there a way to fix this?
<html>
<div id="contactForm" >
<p><h4><i>First Choose the clients and then the file which will be uploaded in order to proced</i></h4></2>
<hr>
<input type="text" id="someInput" name="someInput"></input>
<hr>
</div>
<script>
var input; //prepare var to save contact name/ PLACE outside document ready
$(function() {
// contact form animations
$('button[id="contactbutton"]').click(function() {
input = $(this).val(); //set var input to value of the pressed button
document.getElementById("someInput").value = input;
$('#contactForm').fadeToggle();
})
$(document).mouseup(function (e) {
var container = $("#contactForm");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
});
</script>
<html>
It's simple and it works... I just didn't include the additional jQuery that you've written, as for getting the first word from a paragraph, it does do that though.
<div id="contactForm" >
<p>First Choose the clients and then the file which will be uploaded in order to proced</p>
<hr>
<input type="text" id="someInput" name="someInput">
<hr>
</div>
<br>...
<br>
<h4>Demo</h4>
<button id ="contactbutton">Click Me</button>
<script>
/**
* #description the purpose of this function is to demonstrate how to
* get the first word of a paragraph, sentence, etc.
*/
!function() {
var btn = document.querySelector('button[id="contactbutton"]');
btn.addEventListener("click", function(){
// get the paragraph tag text
var para = document.querySelector("#contactForm p").textContent;
console.log(para);
// break the paragraph into an arraywor each word seperated by a space
// index 0 = first element in the array
var word = para.split(" ")[0];
console.log(word);
// another example
var inp = document.querySelector("input#someInput");
var inpVal = inp.value;
console.log(inpVal);
var word2 = inpVal.split(" ")[0];
console.log(word2);
});
}();
</script>
How to change default selected value in DropDownList using Javascript?
I am new to JavaScript and i'm stuck at changing default selected value in dropdown list.
Here i want to change my default selected value "111" to the new value. It has to change after i enter the text e.g."abc" into the Modal and when i hit the "Ok" button.Now it has to display default selected("abc")in to the dropdown list which i get from the text box of the modal. And also the old values has not changed in the list.
Code Snippet :
<form>
<select id="myList">
<option>111</option>
<option>222</option>
<option>333</option>
</select> <br>
<br>
</form>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<input type="text" id="addtext" size="50" /><br>
Write & add text in the Dropdown list..</text>
<br><br>
<button id="okBtn">OK</button>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the button that add text in the dropdown
var btn1 = document.getElementById("okBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
btn1.onclick = function(){
//var element = document.getElementById('addtext');
var y = document.getElementById("addtext");
var x = document.getElementById("myList");
var option = document.createElement("option");
option.text = y.value;
x.add(option, option.defaultSelected, x[0] );
modal.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
I think i had done something wrong at
option.text = y.value;
x.add(option, option.defaultSelected, x[0] );
You can use HTMLSelectElement.selectedIndex property to set the index of the selected option.
If you set it to 0, it will select the first option.
You can add an option to a select using HTMLSelectElement.add(). The correct syntax is (from the docs):
collection.add(item[, before]);
item is an HTMLOptionElement or HTMLOptGroupElement
before is optional
and an element of the collection, or an index of type long,
representing the item item should be inserted before. If this
parameter is null (or the index does not exist), the new element is
appended to the end of the collection.
You were using three arguments, instead of two.
So, one possible approach is:
btn1.onclick = function(){
/* ... */
x.add(option, 0 ); //add as the first item, always
x.selectedIndex = 0; //select the first item
/* ... */
}
Working demo: https://jsfiddle.net/mrlew/w1zqL0h9/
As said, if you pass null as a second argument, it will append your option to the end. And you can select it passing length-1 to the selectedIndex.
btn1.onclick = function(){
/* ... */
x.add(option, null); //add option to the end
x.selectedIndex = x.length-1; //select the last element
/* ... */
}
I have a page where I would like two buttons which when one is clicked, displays hello, and when the other one is clicked would hide the "hello" message and then display "goodbye". I know this needs to be done in javascript but I am not good with javascript.
Check this snippet
<p id="msg"></p>
<button onclick="helloFunction()">Say Hello</button>
<button onclick="byeFunction()">Wave Goodbye</button>
<script>
function helloFunction() {
document.getElementById("msg").innerHTML = "Hello";
}
function byeFunction() {
document.getElementById("msg").innerHTML = "Goodbye";
}
</script>
There are a couple of ways to do it, one of which would be affecting the visiblity of dom elements which say hello or goodbye, the other method as illustrated below you would actually change the text of a dom object based on which button is pressed
<button onClick="javascript:say('Hello');">Say Hi</button>
<button onClick="javascript:say('Goodbye');">Say Goodbye</button>
<div id="TextField"></div>
<script>
function say(text) {
var element = document.getElementById("TextField");
element.innerHTML = text;
}
</script>
here what you'll need to achieve such a feat.
first create a div or a p tag to hold ur text and two buttons
eg
<div id="container">Hello</div>
<button id="show">Show</button>
<button id="hide">Show</button>
make sure your div has an id and you buttons too. You use that for reference.
then in your javascript, you can either toggle the display or visibility of the div
<script type="text/javascript">
//Declare variable
var div = document.getElementById("container");
var show = document.getElementById("show");
var hide = document.getElementById("hide");
//run when windows fully loads
window.onload = function(){
//when i click show button
show.onclick = function(){
div.style.display = "block";
}
//when i click hide button
hide.onclick = function(){
div.style.display = "none";
}
}
//That is champ, this is all vanilla javascript. You can also look into implementing with jquery.
</script>
I have a javascript function, used to increase and decrease the height of div.
This is the code
function chk()
{
var node = document.getElementById('content');
node.classList.toggle('expand');
}
Works with this HTML code:
<div id="hite">
<div id = "content">
This is dummy text.
</div>
<div id="button" onclick="chk()">
click to read
</div>
</div>
I want the text to change in button div, once user click on it, and when again click on it, text should be again 'click to read'.
Try add this:
document.getElementById('button').innerHTML = node.classList.contains('expand')? 'hide':'click to read';
http://jsfiddle.net/rooseve/Bup8u/
You can use innerHTML property.
var ele = document.getElementById('button');
if (ele.innerHTML == "click to read")
ele.innerHTML = "User click on it!";
else
ele.innerHTML = "click to read";
you can also use "textContent" if you want to add only text and not html data.
if(document.getElementById("button").textContent!='click to read'){
document.getElementById("button").textContent="your content";
}else{
document.getElementById("button").textContent="click to read";
}