document.querySelector('#submit').onclick = () => {
document.querySelectorAll('.merge').forEach((select) => {
const option = document.createElement('option');
option.innerHTML = document.querySelector('#text-get').value;
document.querySelector('.merge').append(option);
})
return false;
};
<select id="task" class="merge">
</select>
<select id="task2" class="merge">
</select>
<form>
<input type="text" id="text-get">
<input type="submit" id="submit">
</form>
I would like to add option in both the drop down but with same input tag
value.
There is something wrong with JavaScript code.it is not adding to any.
You are close. Try this way :
const selects = document.querySelectorAll('.merge'), // Caching elements so the DOM won't be queried constantly
input = document.querySelector('#text-get');
document.querySelector('#submit').onclick = () => {
selects.forEach(select => {
let option = document.createElement('option');
option.innerHTML = input.value;
select.append(option)
});
return false;
};
<select id="task" class="merge">
</select>
<select id="task2" class="merge">
</select>
<form>
<input type="text" id="text-get">
<input type="submit" id="submit">
</form>
Related
I have below code where I add new form after clicking button. If I put some values into the fields everything is reseted. I would like to prevent that.
I tried e.preventDefault() and return false but it's not working as I would like to.
Additionally after clicking 'add button' I am taking data from json file.
Please see my code here. Any help will be appreciated.
// add new product to the list
const newLocal = document.querySelector('.add-product-button');
const addNewProduct = newLocal;
const listProduct = document.querySelector('.products-list');
const changeVisibility = document.getElementById('change-visibility');
let productCounter = 1;
addNewProduct.addEventListener('click', e => {
e.preventDefault();
productCounter++;
generateTemplate();
changeVisibility.style.display = 'block';
});
const generateTemplate = (e) => {
const html = `
<li>
<div class="first-product-indicator">
<div class="first-product-border-line"></div>
<div class="product-number">${productCounter}</div>
</div>
<form action="" method="get" class="form-product">
<select name="product-type" id="product-type" class="" required>
<option value="" disabled selected hidden>Typ Produktu</option>
<option value="produkt" >PRODUKT GOTOWY</option>
<option value="materiały" >MATERIAŁY POMOCNICZE</option>
<option value="surowce" >SUROWCE</option>
</select>
<div class="product-container">
<select name="product" id="product" class="option-field product-list" required>
<option value="" disabled selected hidden>Produkt</option>
</select>
<i class="fas fa-plus-circle add-product"></i>
</div>
<div class="form-price">
<input type="number" id="quantity" name="quantity" placeholder="Ilość">
<input type="number" id="netto" name="netto" placeholder="Netto">
<input type="number" id="brutto" name="brutto" placeholder="Brutto">
</div>
<div class="form-total-price">
<input type="number" id="netto-total" name="netto-total" placeholder="Wartość netto">
<input type="number" id="brutto-total" name="brutto-total" placeholder="Wartość brutto">
</div>
</form>
</li>
`;
listProduct.innerHTML += html;
// populate product select field with values from json file (finished_good.json)
let newProductElement = document.querySelector('.products-list').lastElementChild;
let dropdownProductAdd = newProductElement.querySelector('.product-list');
dropdownProductAdd.length = 0;
let defaultOptionProductAdd = document.createElement('option');
defaultOptionProductAdd.text = 'Produkt';
dropdownProductAdd.add(defaultOptionProductAdd);
dropdownProductAdd.removeIndex = 0;
const urlProductAdd = 'finished_good.json';
const requestProductAdd = new XMLHttpRequest();
requestProductAdd.open('GET', urlProductAdd, true);
requestProductAdd.onload = function() {
if (requestProductAdd.status === 200) {
const dataProductAdd = JSON.parse(requestProductAdd.responseText);
let optionProductAdd;
for (let i = 0; i < dataProductAdd.length; i++) {
optionProductAdd = document.createElement('option');
optionProductAdd.text = dataProductAdd[i].name;
dropdownProductAdd.add(optionProductAdd);
}
} else {
// Reached the server, but it returned an error
}
}
requestProductAdd.onerror = function() {
console.error('An error occurred fetching the JSON from ' + urlProductAdd);
};
requestProductAdd.send();
e.preventDefault();
};
I have this submit button on my form with a jQuery action to open a window depending on the users choice. However, I just want the window to open if the fields are filled. I have this code and I want to merge it with an if.
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
window.open($('#chkveg').val());
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="http://formmail.kinghost.net/formmail.cgi" method="POST">
<input name="nome" type="text" class="nome" id="nome" required width="100%" placeholder="Nome:">
<input name="cpf" type="text" class="cpf" id="cpf" placeholder="CPF:">
<div style="clear:both"></div><br/>
<input name="nascimento" type="text" class="nascimento" id="nascimento" placeholder="Data de nascimento:">
<select id="chkveg">
<option value="https://pag.ae/7ULKPL7TH">Associados Ancord + C.Dados = R$700,00</option>
<option value="https://pag.ae/7ULKQ8Zm2">Associados Ancord = R$800,00</option>
<option value="https://pag.ae/7ULKQLB9m">Associados Entidades Apoiadoras + C.Dados = R$800,00</option>
</select>
<input id="btnget" class="submit-btn" type="submit" value="INSCREVER-SE">
</form>
For exemple:
IF (#FORM).REQUIRED = TRUE {
(#BUTTON).WINDOWOPEN
}
Thanks
Because you using a submit button you will need to return false, in case if you don't want to do anything. Before that, you need also to check if your required field are empty or not. (i.e. $(your field).val() === "" then it's empty, if all you need have, then call the window.open() function.
Note: you can merge multiple fields for checking ie: $(".your_field1, .your_field2, .your_field3").val() === "" however this is an OR operation.
One possible solution:
$(function() {
$('#btnget').click(function() {
let isEmpty = false;
$('#data_form input,textarea,select').filter(':visible').each(function(i) {
if ($(this).val() === "") {
isEmpty = true;
return false;
}
});
if (isEmpty) {
return false;
}
window.open($('#chkveg').val());
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="data_form" action="http://formmail.kinghost.net/formmail.cgi" method="POST">
<input name="nome" type="text" class="nome" id="nome" required width="100%" placeholder="Nome:">
<input name="cpf" type="text" class="cpf" id="cpf" placeholder="CPF:">
<div style="clear:both"></div><br/>
<input name="nascimento" type="text" class="nascimento" id="nascimento" placeholder="Data de nascimento:">
<select id="chkveg">
<option value="https://pag.ae/7ULKPL7TH">Associados Ancord + C.Dados = R$700,00</option>
<option value="https://pag.ae/7ULKQ8Zm2">Associados Ancord = R$800,00</option>
<option value="https://pag.ae/7ULKQLB9m">Associados Entidades Apoiadoras + C.Dados = R$800,00</option>
</select>
<input id="btnget" class="submit-btn" type="submit" value="INSCREVER-SE">
</form>
If you want only for the required fields, than use filter('[required]:visible') instead of filter(':visible').
Have problem to display select on change attribute id.
PHP:
<form action="" class="form-inline">
<div class="form-group">
<select name="kategorijos" id="kategorijos" class="category form-control" onchange="fetch_select_category(this.value);">
<option value=""></option>
FOREACH
</select>
</div>
<div class="form-group">
<fieldset disabled>
<select id="disabledSelect" name="subcategories" class="subcategory form-control" onchange="fetch_select_product(this.value);" required>
<option value="" disabled selected>Select Subcategory</option>
</select>
</fieldset>
</div>
<div class="form-group">
<td><input type="text" name="gramai" class="form-control" value=""></td>
</div>
<div class="form-group" id="kalb">
<input type='text' name='1[]' value="-" disabled>
<input type='text' name='12[]' value="-" disabled>
<input type='text' name='123[]' value="-" disabled>
<input type='text' name='1234[]' value="-" disabled>
</div>
</form>
My jquery code:
$("select").on('change', function() {
var status = $('select').attr('id');
alert(status);
});
var categoryId = 0;
var category = 0;
var product = 0;
var disableId = 0;
$("#add").click(function () {
categoryId = categoryId + 1;
category = category + 1;
product = product + 1;
disableId = disableId + 1;
$("#item").append('<div class="col-xs-12"><form action=""
class="form-inline"><div class="form-group"><select name="kategorijos"
**....... same code as above (php)**
});
When I select the first row it alerts value. But then I add new row with add button, and then change second select the alert don't work, and I don't get the select id. Where can be the problem? Maybe it doesn't work with append html ?
You need to use event delegation for dynamically generated element and also use this instead of 'select' to get the id of dropdown.
$(document).on('change', 'select', function() {
var status = $(this).attr('id');
alert(status);
});
How can I show the value of the selected items in the textbox using javascript?
// MY LIST
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="show_value();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" />
I came up with this javascript code
function showgroup_id () {
$('#selectedvalue').val(selectedvalue);
var myList = document.getElementById('list');
var selected-value = selectedItem;
var selectedGroupIds = [];
for (var i = 0; i < myList.length; i++) {
if (myList[i].selected) {
selectedselectedItem.push(myList[i].value);
}
}
}
When I tried, it doesn't work.. anyone can help me please?
You can use onchange event to change the textbox content with changing select element.
HTML :
<select id="selectBox">
<option>A</option>
<option>B</option>
</select>
<input type="text" id="messageTextBox" />
javaScript :
var selectBox = document.getElementById("selectBox");
selectBox.onchange = function(){
var textbox = document.getElementById("messageTextBox");
textbox.value = this.value;
};
jsFiddle
Your Solution :
HTMl :
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="showgroup_id();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" style="width: 55%;" />
javaScript/jQuery :
function showgroup_id () {
var result = "";
var selectedItem = $('#selectedvalue').val(selectedvalue);
var myList = document.getElementById('list');
var selectedValues = selectedItem;
var selectedGroupIds = [];
for (var i = 0; i < myList.length; i++) {
if (myList[i].selected) {
//selectedselectedItem.push(myList[i].value);
//alert(myList[i].text);
result = result + " " + myList[i].text;
$("#selectedvalue").val(result);
}
}
}
jsFiddle
Try this :
give some id to button and remove onclick
<button id="getValue" type="button" value="Get Value">Get Value</button>
bind onclick event to button as shown below
$('#getValue').click(function(){
var text = $('#list option:selected').text();
$('#selectedvalue').val(text);
});
Try this,
<html lang="us">
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<script>
function show_value()
{
$("#selectedvalue").val($("#list").val());
}
</script>
</head>
<body>
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="show_value();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" style="width: 55%;" />
</body>
replace your javascript code with the following:
function show_value() {
document.getElementById("selectedvalue").value = document.getElementById( "list" )[ (document.getElementById( "list" )).selectedIndex ].text;
}
The show_value() function will be called when the button is clicked. Inside the function, I have set the value of the textbox with the value of the select list.
function show_value()
{
$("#selectedvalue").val($("#list").val());
}
I have a section with a lot of blocks (I'll use only two on this example). The situation is: I have a <div> with a <input>, a <select> group and <radio> buttons. After filling all of them and clicking on "Grab" button, the script will show an alert with this values.
But if you fill more then one block, the last one doesn't grab the radios. It always returns "undefined". If you leave the first blocks with empty radios and fill the last one, the info on the alert screen will show the last one, however it's wrong.
What I'm doing wrong?
Here is the JSFiddle
JavaScript
$(document).ready(function(){
var contentArray = '';
$('button').click(function() {
$('.option_group').each(function(i) {
var NotEmptyTextBoxes = $('input:text').filter(function() { return this.value !== ""; });
var NotEmptyCombo = $('option:selected').filter(function() { return this.text !== ""; });
NotEmptyTextBoxes.each(function() {
name = this.name;
val = this.value;
var combo = $('#c_'+name).val();
var radio = $('input[name=r_'+name+']:checked', '#theform').val();
contentArray = contentArray+name+'='+"'"+val+"'"+","+"'"+combo+"'"+","+radio+";"+"|";
radio = '';
});
alert(contentArray);
contentArray = '';
return false;
});
});
});
HTML
<form id ="theform">
<div class="option_group" id="bloco">
<input type="text" placeholder="Cargo" name="cargo" id="carga"/>
<select class="filtercombo" id="c_cargo">
<option>like</option>
<option>=</option>
<option>!=</option>
<option><</option>
<option><=</option>
<option>></option>
<option>>=</option>
<option>is null</option>
<option>is not null</option>
<option>in</option>
<option>not in</option>
<option>between</option>
<option>contains</option>
<option>not like</option>
</select>
<input type="radio" value="up" name="r_cargo">
<input type="radio" value="down" name="r_cargo">
<input type="radio" value="flat" name="r_cargo">
</div><!-- #end of option_group -->
<div class="option_group" id="bloco">
<input type="text" placeholder="provider" name="provider" id="provider"/>
<select class="filtercombo" id="c_provider">
<option>like</option>
<option>=</option>
<option>!=</option>
<option><</option>
<option><=</option>
<option>></option>
<option>>=</option>
<option>is null</option>
<option>is not null</option>
<option>in</option>
<option>not in</option>
<option>between</option>
<option>contains</option>
<option>not like</option>
</select>
<input type="radio" value="up" name="r_provider1" />
<input type="radio" value="down" name="r_provider2" />
<input type="radio" value="flat" name="r_provider3" />
</div><!-- #end of option_group -->
<button type="button">grab</button>
</form>
You have different names for your last group of radios r_provider1, r_provider2, r_provider3, they should all have the same name 'r_provider'.