Tell me please, there is code, when you click on select option, a div is added. Please help me add a delete button next to each created div and delete this div.
var p = document.getElementById("inputi");
var length = 1;
function add_input_from_select(select) {
var new_input = document.createElement("input");
new_input.name = "my_input";
new_input.value = select.value;
var div = document.createElement('div');
div.innerHTML = '<br>div элемент №' + length + '<br>';
div.appendChild(new_input);
p.appendChild(div);
length++;
}
function add_input_old() {
add_input_from_select(document.getElementById("selector"));
}
<select id="selector" onchange="add_input_from_select(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<form>
<div id="inputi"></div>
</form>
Very crudely, you can add a button in the same way you are currently adding an input and a div but bind a click event to the button so that when clicked it deletes it's parent and everything inside it.
var p = document.getElementById("inputi");
var length = 1;
function add_input_from_select(select) {
var new_input = document.createElement("input");
var div = document.createElement('div');
var button_delete = document.createElement('button');
new_input.name = "my_input";
new_input.value = select.value;
button_delete.innerText = "Delete"
button_delete.addEventListener("click", function(){
this.parentNode.remove();
});
div.innerHTML = '<br>div элемент №' + length + '<br>';
div.appendChild(new_input);
div.appendChild(button_delete);
p.appendChild(div);
length++;
}
function add_input_old() {
add_input_from_select(document.getElementById("selector"));
}
<select id="selector" onchange="add_input_from_select(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<form>
<div id="inputi"></div>
</form>
These are the things I have created to achieve your goal
Created a delete button and appended it to the div
Created an onclick event for the delete button and deleted the current div using display:none
var p = document.getElementById("inputi");
var length = 1;
var deleteBtn;
function add_input_from_select(select) {
var new_input = document.createElement("input");
new_input.name = "my_input";
new_input.value = select.value;
var div = document.createElement('div');
deleteBtn = document.createElement('button'); //Adding delete button
deleteBtn.innerHTML = 'Delete';
deleteBtn.setAttribute("type", "button");
div.innerHTML = '<br>div элемент №' + length + '<br>';
div.appendChild(new_input);
div.appendChild(deleteBtn);
deleteBtn.setAttribute("onclick", function() { alert("blabla"); });
p.appendChild(div);
length++;
deleteBtn.onclick = function(){ //Event for deleting the div
div.style.display = "none";
}
}
<select id="selector" onchange="add_input_from_select(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<form>
<div id="inputi"></div>
</form>
Although your question was framed in a way that it was difficult to understand what you want, I think I've got it.
I think it would be MUCH easier if you tried to do this in jQuery. Here's a very simple way to do it (I've added some comments incase you are new to jQuery) -
1 - Create the snippet code that you want to add to the DOM. (You just needed an extra button element in yours).
2 - use jQuery for manipulating DOM based on click and change events.
$(document).ready(function (){
$('#selector').change(function() {
// getting the input tag ready with value from selector
$divToAppend = '<div><input type="text" value="'+$(this).val()+'"><button type="button" id="btn-delete">Remove</button></div>'
// appending the div to the form
$('form').append($divToAppend);
});
// binding a function to EVERY btn-delete ID in the 'form' scope
$('#form').on('click', '#btn-delete', function() {
// this goes to the btn-delete, looks for it's parent, which is the <div> and the removes it from the DOM
$(this).parent().remove();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selector">
<option selected hidden>Select something!</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<form id="form">
</form>
Related
<select name="main">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
</select>
<select name="sub">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
I have 2 seperate drop downs as seen here. I want to make it so that if they select main it will show a div for main with a text box equal to they number they select(ie. 4 will show 4 main textboxes for them to fill out) which I know how to do. The problem comes with sub I want them to show a text box equal to the sub for each main select(ie if main is 3 and sub is 3 then each of the 3 main text box will be followed by 3 sub text boxes) I can make it show 3 or all but I can not figure out how to make it go based of the selection of both main and sub to ive me the exact fields I am looking for. Do I just need to set in the function for the java script that if main == x then show xyz on the function for sub?
You can use onchange in the sub select:
<select name="sub" onchange="createSubInput(this)">
function createSubInput (selected) {
let mainSelectedValue = document.getElementById('main').value;
for(let i=0; i< mainSelectedValue; i++) {
for(let j=0; j< selected.value; j++) {
// todo: create sub input by each main input
}
}
}
In order to accomplish this you'll have to:
Use the change event on each select
Take advantage of the value attribute on each option
Demo:
const mainSelect = document.querySelector('select[name="main"]');
const subSelect = document.querySelector('select[name="sub"]');
const resultsDiv = document.getElementById("results");
mainSelect.addEventListener("change", event => {
handleChange(event);
});
subSelect.addEventListener("change", event => {
handleChange(event);
});
function handleChange(event) {
let textboxes = "";
let mainCount = Number(mainSelect.value);
let subCount = Number(subSelect.value);
for (let i = 0; i < mainCount; i++) {
let t = "<input type='text' placeholder='main' /><br/>";
for (let s = 0; s < subCount; s++) {
t += "<input placeholder='sub' style='margin-left: 10px;' /><br/>"
}
textboxes += t;
}
resultsDiv.innerHTML = `<h4>Please fill these out</h4>${textboxes}`;
}
<select name="main">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br />
<select name="sub">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="results"></div>
I created a select list. How to create onload function using javascript. When open the page selected value is 1. At that time I need to show no1 div. How to do that?
function olresult(e) {
var selectedValue = document.getElementById("sel").value;
if (selectedValue == '1') {
document.getElementById('no1').style.display = 'none';
document.getElementById('no2').style.display = 'block';
} else {
document.getElementById('no1').style.display = 'block';
document.getElementById('no2').style.display = 'none';
}
}
<select id="sel" onload="olresult(event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="no1" style="display:none;">
<p>123</p>
</div>
<div id="no2" style="display:none;">
<p>aaaaa</p>
</div>
<select> elements don't work with onload, you want to fire the event when the selection changes. You need to change onload to onchange.
If you need something to happen when the page loads, you can add onload to the <body> element or better yet just include your script to run at the end of the HTML document. Also, you may as well just remove display:none from the HTML.
function olresult(e) {
var selectedValue = document.getElementById("sel").value;
if (selectedValue == '1') {
document.getElementById('no1').style.display = 'none';
document.getElementById('no2').style.display = 'block';
} else {
document.getElementById('no1').style.display = 'block';
document.getElementById('no2').style.display = 'none';
}
}
<select id="sel" onchange="olresult(event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="no1" style="display:none;">
<p>123</p>
</div>
<div id="no2">
<p>aaaaa</p>
</div>
I want to create a dropdown box with a few items. Once the user selects the item and clicks the '+' button, the item is added below to a 'basket' section. They should be able to add multiple items over and over.
document.getElementById("button").onclick = function() {
var a = document.getElementById("selection");
var item = a.options[a.selectedIndex].text;
document.getElementById("basket").innerHTML = item;
var counter = 1;
while (counter <= 1) {
var list = document.write(item);
counter++;
}
}
<h1>Select your items!</h1>
<form id="myForm">
<p>Item:
<select id="selection">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<button id="button">+</button></p>
</form>
<br><br><br>
<h1>Basket</h1>
<p id="basket"></p>
When the button is pressed, all current content disappears and the item selected appears on its own.
The button in the form has no type="button". Therefore it is used as submit button and that's why you get the blank page.
You don't need a loop.
Example
var button = document.getElementById("button");
var select = document.getElementById("select");
var basket = document.getElementById("basket");
// Add text
function addToBasket() {
var li = document.createElement("li");
li.innerHTML = select.options[select.selectedIndex].text;
basket.appendChild(li);
}
button.addEventListener("click", addToBasket);
<h1>Select your items!</h1>
<form id="myForm">
<p>Item:
<select id="select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<button id="button" type="button">+</button></p>
</form>
<h1>Basket</h1>
<ul id="basket"></ul>
You are not concatenating them. document.getElementById("basket").innerHTML = item; removes everything in the basket and add only the selected one.
Use this to concatenate the new item with what already exists in the basket document.getElementById("basket").innerHTML += item;. You can style it to make the basket look nice.
I have a dropdown menu with a really long ID, but part of it is _Country. I have a text box with a really long ID, but part of it is _State.
I'm trying to take the value from the dropdown Country and put it into the textbox State anytime someone selects an option in the Country dropdown.
Here is the JavaScript I have now. It worked fine before I tried using the wildcard, but now it does not work.
<script type="text/javascript">
document.querySelectorAll('[id*="_Country"]').onchange = replicate;
function replicate() {
var tb1 = document.querySelectorAll('[id*="_Country"]');
var tb2 = document.querySelectorAll('[id*="_State"]');
tb2.value = tb1.value;
}
</script>
querySelectorAll() returns a NodeList. Use querySelector() to get just one node.
Here's a sample (fiddle):
<select id="test_Country">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="test_State">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
(function() {
var country = document.querySelector('[id*="_Country"]');
var state = document.querySelector('[id*="_State"]');
country.addEventListener("change", function(e) {
state.value = country.value;
});
})();
</script>
I'll try to be specific as possible. I have a dropdown menu[select tag] which gives the user to select 5 options; namely numbers from 1 to 5. Now depending upon the the selected option i want to display a new form with same number of input tags as the option selected
So if the user selects 3 from the dropdown menu, then a sub table will appear at the bottom displaying three input tags. the code is:
<select id="formName9" name="blockUnits">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
I support James Donnelly's answer. If you want it to be pure java script you can use this alternative.
HTML
<select id="formName9" name="blockUnits" onchange="addInput()">
<option selected="selected" value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<form>
<div id="newAdd"> </div>.
</form>
JAVASCRIPT
function addElement() {
var element = document.createElement("input"); //creating input
element.setAttribute("value", "");//setting its value
element.setAttribute("name", "newInput");//naming the input
var foo = document.getElementById("newAdd");
foo.appendChild(element);//appendign the value into the parant div
}
function addInput(){
document.getElementById("newAdd").innerHTML="";//clearing the div
var noInp=parseInt(document.getElementById("formName9").value);
while(noInp>0)
{
addElement();
noInp--;
}
}
here is the JSFIDDLE
You'd make use of the on change event listener:
$('select#formName9').on('change', function() {
/* Remove the existing input container, if it exists. */
$('form#container').remove();
/* Get the selected value and create the new container. */
var val = $(this).val()
$container = $('<form id="container"></form>');
/* Loop through creating input elements based on value. */
for(i=0;i<val;i++)
{
/* Create the new input element. */
var $input = $('<input type="text"/>');
/* Append this input element to the container. */
$input.appendTo($container);
}
/* Add container to the page. */
$container.insertAfter($(this));
})
JSFiddle example.
You could then expand upon this to add a default input based on the initially selected option:
Extended JSFiddle.
$('select#formName9').on('change', function() {
var ddVal=$(this).val();
for(i=0;i<ddVal.length;i++)
{
$("#FORMPOSITION").append("<input type='text' name='ddG"+i+"' id='ddVL"+i+"'>");
}
});
consider the quotes before executing.
I tried and worked. Try it:
$(document).ready(function() {
$('#formName9').change(function() {
var number = parseInt($('#formName9').val());
if(number == 3) {
alert('3 HERE');
}
});
});
Here's a sort of dynamic example using jQuery and CSS. I've provided a working jsFiddle.
This is the basic idea, you can work off of this and add more inputs if needed.
HTML:
<select id="formName9" name="blockUnits">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="form1" class="hiddenForm form">Form 1</div>
<div id="form2" class="hiddenForm form">Form 2</div>
<div id="form3" class="hiddenForm form">Form 3</div>
<div id="form4" class="hiddenForm form">Form 4</div>
<div id="form5" class="hiddenForm form">Form 5</div>
jQuery:
$("#form1").show()
$("#formName9").change(function () {
var form = "#form" + $(this).val();
$(form).siblings(".hiddenForm").hide()
$(form).show();
});
CSS:
.form {
padding: 10px;
border: 1px dotted #000;
margin: 5px;
}
.hiddenForm {
display: none;
}
You can use Ajax call, and add the response to the DOM, or directly add the DOM using JS.
For direct DOM, somethink like (using jQuery):
$('#formName9').on('change', function() {
var selected = $(this).val();
$('#aDomElement').empty();
for (var i=1; i<=selected; i++) {
$('#aDomElement').append(
$('<div id="'+i+'">').html(
$('<input>').attr('name', 'input'+i).attr('type', 'text')
)
);
}
});
Where aDomElement is the ID of an existing HTML element.