Entonces tengo esta página:
Tengo una lista que está hecha de elementos en la matriz. Si el usuario agrega nuevos alimentos, la entrada debe ir a la matriz y mostrar un nuevo elemento en la lista y el campo de entrada debe desaparecer. En este momento recibo un error 404.
¿Cómo puedo hacer esto?
// find elements
var banner = $("#banner-message")
var button = $("button")
var select = document.getElementById("selectFood");
var options = ["Pizza", "Hambruger", "Salad"];
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
function foodInput() {
boxvalue = document.getElementById('addedFood').value;
options.push(boxvalue);
}
function addFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #778899;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #A52A2A;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.addButton {
background: #A52A2A;
color: white;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
.hide {
display: none;
}
.show {
display: block;
}
.demo {
background: #A52A2A;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#myDIV {
background: #778899;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
display: none;
}
input[type=submit] {
background: #A52A2A;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<p>My favorite food</p>
<select id="selectFood">
<option>Select food</option>
</select>
<button>Choose</button>
<br>
<button id="addButton" onclick="addFunction();">
Add new food
</button>
</div>
<div id="myDIV">
<form onsubmit="return foodInput()">
<input type="text" id="addedFood" placeholder="Type food">
<input type="submit" value="Submit" onclick="addFunction()">
</form>
</div>
4 respuestas
En realidad, creo que el problema estaba en que el formulario intentaba volver a cargar la página HTML del violín al enviar.
Aquí está el enlace de trabajo del contenido modificado con un poco de optimización.
[https://jsfiddle.net/8rvax5z0/3/]
Podría rehacer por completo su código para modernizarlo y reducirlo, pero esta no es la idea de la pregunta, luego lo arreglé con esto:
- Llame al generador de opciones (para) cuando termine la matriz de inserción porque necesita mostrar la nueva matriz (seleccione opciones).
- Para hacerlo, debe crear una función que ejecute for y call en la primera carga y cada vez que se agreguen nuevos alimentos.
- Vacíe la selección antes de agregar opciones para evitar opciones duplicadas.
Ver el siguiente código:
// find elements
var banner = $("#banner-message")
var button = $("button")
var select = document.getElementById("selectFood");
var options = ["Select Food", "Pizza", "Hambruger", "Salad"];
function generateSeletc(foodArray) {
$('#selectFood').empty();
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
function foodInput(event) {
event.preventDefault();
boxvalue = document.getElementById('addedFood').value;
options.push(boxvalue);
generateSeletc(options);
}
function addFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
generateSeletc(options);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #778899;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #A52A2A;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.addButton {
background: #A52A2A;
color: white;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
.hide {
display: none;
}
.show {
display: block;
}
.demo {
background: #A52A2A;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#myDIV {
background: #778899;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
display: none;
}
input[type=submit] {
background: #A52A2A;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<p>My favorite food</p>
<select id="selectFood">
<option>Select food</option>
</select>
<button>Choose</button>
<br>
<button id="addButton" onclick="addFunction();">
Add new food
</button>
</div>
<div id="myDIV">
<form onsubmit="return foodInput(event)">
<input type="text" id="addedFood" placeholder="Type food">
<input type="submit" value="Submit" onclick="addFunction()">
</form>
</div>
Puede agregar un nuevo método para actualizar las opciones después de la entrada, como:
function refreshFoodInput(options) {
select.removeChild("option");
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
Luego llame a este método en foodInput método como
function foodInput() {
var boxvalue = document.getElementById('addedFood').value;
options.push(boxvalue);
refreshFoodInput(options);
}
Ahora todo su código será como:
// find elements
var banner = $("#banner-message")
var button = $("button")
var select = document.getElementById("selectFood");
var options = ["Pizza", "Hambruger", "Salad"];
refreshFoodInput(options);
function refreshFoodInput(options) {
select.removeChild("option");
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
function foodInput() {
var boxvalue = document.getElementById('addedFood').value;
options.push(boxvalue);
refreshFoodInput(options);
}
function addFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
Espero que lo hagas funcionar.
¡Disfrutar!
var options = ["Pizza", "Hambruger", "Salad"];
document.querySelector("form#addFoodForm").onsubmit=function(){
let existingFoods=document.querySelector("#selectFood");
const newFood=this.querySelector("input#addedFood").value;
const newFoodOption=document.createElement("option");
newFoodOption.setAttribute("value", newFood);
newFoodOption.innerHTML=newFood;
existingFoods.append(newFoodOption);
refreshFoodOptions(); // This function will add the new foods into the global 'options' array !
return false;
}
function refreshFoodOptions(){
const selectInpt=document.querySelector("#selectFood");
selectInpt.querySelectorAll("option[value]").forEach(function(food){
if(!in_array(food.value, options)) options.push(food.value);
});
console.log( options );
return options;
}
function in_array(key, array){
let exists=false;
array.forEach(function(arrayKey){
if(arrayKey==key) exists=true;
});
return exists;
}
<div id="banner-message">
<p>My favorite food</p>
<select id="selectFood">
<option>Select food</option>
</select>
<button>Choose</button>
</div>
<div id="myDIV">
<form id="addFoodForm">
<input type="text" id="addedFood" placeholder="Type food">
<input type="submit" value="Submit">
</form>
</div>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.