Agregar la entrada del usuario a una matriz y actualizar la lista de opciones

Question

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>

javascript html css

1

Jyrto 19 sep. 2019 a las 16:12

Answer 1

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/]

1

Senthur Athiban 19 sep. 2019 a las 14:24

Answer 2

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>

1

Rafael Perozin 19 sep. 2019 a las 13:42

Answer 3

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.

1

sssurii 19 sep. 2019 a las 13:37

Answer 4

¡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>

1

Adnane Ar 19 sep. 2019 a las 13:41

Agregar la entrada del usuario a una matriz y actualizar la lista de opciones

4 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript