Funkcja dodawająca dynamiczne pole input

0

Jestem początkująca. Proszę o pomoc, podpowiedź, nakierowanie. Szukałam i nie znalazłam.
Czy w JavaScript (nie mówie o Angular i jQuery) jest funkcja, dzięki której użytkownik może dodać i usunąć pole input jak poniżej na obrazku?

W Angular jest to ng-click="addItem()

0

Możesz z tymi inputami zrobić wszystko co tylko chcesz (usunać, skopiować, dodać), wystarczy poszukać odpowiedniej metody

Usuwanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
Dodawanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/append
Kopiowanie: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

0

Xarviel napisał(a):

Możesz z tymi inputami zrobić wszystko co tylko chcesz (usunać, skopiować, dodać), wystarczy poszukać odpowiedniej metody

Usuwanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
Dodawanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/append
Kopiowanie: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

To chyba nie to bo ja potrzebuje coś takiego, że użytkownik ma 2 pola input żeby sumować liczby, ale on potrzebuje sumować 4 liczby, a nie 2. W związku z tym klika przycisk dodaj pole 2x. Dzięki temu może sumować 4 liczby z 4 pól.

Czy jest do tego jakaś funkcja, ale bez Api bo nie znam Api? Jestem początkująca więc proszę o prostą funkcje.

0

Xarviel napisał(a):

Możesz z tymi inputami zrobić wszystko co tylko chcesz (usunać, skopiować, dodać), wystarczy poszukać odpowiedniej metody

Usuwanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
Dodawanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/append
Kopiowanie: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

<!DOCTYPE html>
<html lang="pl">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="sumaIII.js"></script>
</head>
 
<body>
    <form id="oblicz" action="" method="post">
        <div>
            <h3>Suma</h3><br>
            <p>A + B + ....</p>
            <input type="text" id="a"><br><br>
            <input type="text" id="b"><br><br>
            <input type="text" id="c"><br><br>
            <span id="s"> = </span><br><br>
            <input type="button" value="Dodaj Pole" onclick="dodaj_pole()">
            <input type="button" value="Suma" onclick="sumuj()">
            <input type="reset" value="RESETUJ" onclick="resetuj()">
        </div>
    </form>
 
</body>
 
</html>

function sumuj() {
    const a = document.getElementById('a').value;
    const b = document.getElementById('b').value;
    const s = parseFloat(a) + parseFloat(b); // dodawanie
    document.getElementById('s').innerHTML =  '=' + ' ' + s;
    return false;
}
function resetuj () {

    document.getElementById('s').innerHTML = '';

}

function dodaj_pole(){
    const c = document.getElementById('c');
    c.append('c');
}

Błagam pomóż nie działa i nie wyskakuje żaden błąd.

1

Marta Długa napisał(a):

<input type="text" id="a"><br><br>
<input type="text" id="b"><br><br>
<input type="text" id="c"><br><br>

O wiele łatwiej będzie Ci się stylizować aplikacje jeśli zamiast znaczników <br> będziesz używać innych znaczników np <div>, <section>, <aside>, <header>, <footer>, <p> ... i klas CSS

.form-row {
  margin-bottom: 15px;
}

 <div class="form-row">
   <input type="number">
 </div>

 <div class="form-row">
   <input type="number">
 </div>

Marta Długa napisał(a):

<input type="button" value="Dodaj Pole" onclick="dodaj_pole()">
<input type="button" value="Suma" onclick="sumuj()">
<input type="reset" value="RESETUJ" onclick="resetuj()">

Tego zapisu onclick="dodaj_pole()" też nie powinnaś używać i zamiast tego proponuje przerzucić się na metodę addEventListener https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Poprawiając wszystkie błędy w htmlu formularz powinien wyglądać mniej więcej tak, bez żadnych znaczników <br>, oraz atrybutów onclick="dodaj()" i tym podobnych
.

<form id="calculator">
  <div class="dynamic-inputs">
     <div class="form-row">
       <input type="number">
     </div>
    
     <div class="form-row">
       <input type="number">
     </div>
  </div>
  
  <div class="form-row" id="summary"></div>
  
  <div class="form-buttons">
    <button class="btn" id="add-field-button">Dodaj pole</button>
    <button class="btn" id="remove-field-button">Usuń pole</button>
    <button class="btn" id="calc-button">Oblicz wynik</button>
    <button class="btn" id="reset-button">Resetuj wynik</button>
  </div>
</form>

Jeśli chodzi o skrypt do obsługi formularza to zrobiłem to w taki sposób

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

// Na samym wstępie pobieramy obecny formularz
const form = document.querySelector('#calculator');

// Oraz listę potrzebnych rzeczy
const dynamicInputs = form.querySelector(':scope .dynamic-inputs');       // Pojemnik z listą inputów
const summary = form.querySelector(':scope #summary');                    // Podsumowanie formularza
const addButton = form.querySelector(':scope #add-field-button');         // Przycisk do dodawania
const removeButton = form.querySelector(':scope #remove-field-button');   // Przycisk do usuwania
const calcButton = form.querySelector(':scope #calc-button');             // Przycisk do obliczania sumy
const resetButton = form.querySelector(':scope #reset-button');           // Przycisk do resetowania

// Wyłączamy działanie formularza, żeby nie było zbędnego przeładowania strony po wysłaniu
form.addEventListener('click', (e) => {
  e.preventDefault();
});

// Tutaj jest dodawanie nowego pola
addButton.addEventListener('click', () => {
  // Tworzymy element div
  const row = document.createElement('div'); 
  
  // Dodajemy do niego klasę .form-row
  row.className = 'form-row';

  // Tworzymy element input
  const input = document.createElement('input');
  // Ustawiamy element na typ number
  input.type = 'number';

  // Dodajemy input do elementu div
  row.appendChild(input);

  // Dodajemy element div do listy inputów
  dynamicInputs.appendChild(row);
});

// Usuwanie ostatniego pola z listy
removeButton.addEventListener('click', () => {
  // Pobieramy ostatni wiersz z listy
  const lastRow = dynamicInputs.querySelector(':scope .form-row:last-child');

  // Sprawdzamy, czy udało się pobrać prawidłowy element
  if (lastRow) {
    // i jeśli tak to usuwamy
    lastRow.remove();
  }
});


// Dodawanie wartości z wszystkich pól
calcButton.addEventListener('click', () => {
  // Początkowa wartość
  let value = 0;

  // Pobieramy wszystkie inputy i robimy po nich pętle
  for (const input of dynamicInputs.querySelectorAll(':scope input')) {
    // Wartość "input.value" jest oznaczona jako tekst, więc musimy zamienić ją na liczbę
    const inputValue = parseFloat(input.value, 10);

    // Sprawzamy, czy udało się zamienić na prawidłową liczbę
    if (!isNaN(inputValue)) {
      // i jeśli tak to dodajemy
      value += inputValue;
    }
  }

  // Na sam koniec wypisujemy wynik
  summary.innerHTML = `Wynik wynosi ${value}`;
});


// Przycisk do resetowania formularza
resetButton.addEventListener('click', () => {
  // Pobieramy wszystkie inputy z formularza i robimy po nich pętle
  for (const input of dynamicInputs.querySelectorAll(':scope input')) {
    // Kasujemy wprowadzoną liczbę
    input.value = '';
  }

  // i kasujemy tekst z podsumowania
  summary.innerHTML = '';
});

Edit: @Marta Długa tylko teraz ten skrypt musisz dodać pod koniec sekcji <body>, a nie w <head jak teraz.

  <script src="..."></script>
</body>
</html>

Bo przy metodach querySelector itd wyskoczy błąd, że nie można pobrać określonego elementu.

Najpierw musi załadować się cała strona, a na samym końcu skrypt js.

0

@Xarviel: Proszę o pomoc, podpowiedź. Prubuje na razie tylko możliwość dodawania pól, tak aby użytkownik mógł dodać sobie tyle pól ile potrzebuje.
Niestety pomimo, że nie wyskakuje błąd nie dodają się pola. Nie wiem gdzie mam błąd.

<!DOCTYPE html>
<html lang="pl">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="sumaIII.js"></script>
</head>
 
<body>
    <form id="oblicz" action="" method="post">
        <div>
           <div>
             <input type="number">
           </div>
          
           <div>
            <input type="number" id="pole_dodaj">
          </div>
        </div>
        
        
        <div>
          <button id="dodaj_pole">Dodaj pole</button>
          <button id="usun_pole">Usuń pole</button>
          <button id="wynik">wynik</button>
          <button id="reset">Resetuj</button>
        </div>
      </form>
      
</body>
 
</html>

const dodaj_pole = document.getElementById('dodaj_pole');
dodaj_pole.addEventListener('click', Dodaj_Pole);

function Dodaj_Pole(){
    document.getElementById('pole_dodaj').innerHTML += pole_dodaj;
}

0

Marta Długa napisał(a):

 <input type="number" id="pole_dodaj">

function Dodaj_Pole(){
    document.getElementById('pole_dodaj').innerHTML += pole_dodaj;
}

Pobierasz pole input i do niego próbujesz dodać nowe pole, więc dlatego nie działa.

Nie wiem, czy wiesz, ale znacznik input nie może posiadać w sobie żadnych innych elementów HTML, tekstu i takie zapisy są nieprawidłowe

<!-- TO WSZYSTKO JEST ŹLE -->

<input>
  Tutaj jakiś tekst
</input>

<input>
  <p>
    Tutaj jakiś tekst
  </p>
</input>

<input>
  <input>
</input>

Musisz dodać atrybut id, albo klasę do jakiegoś elementu blokowego np diva

<div id="dynamic-inputs"></div>

przenieść do niego dwa pierwsze pola

<div id="dynamic-inputs">
  <div>
   <input type="number">
  </div>
 
 <div>
   <input type="number">
 </div>
</div>

i teraz po stronie javascriptu napisać kod, który dodaje nowe pole do znacznika #dynamic-inputs.

Początek skryptu miałaś dobry, ale zazwyczaj używa się angielskich nazw zmiennych i w javascripcie jest taka konwencja, żeby zmienne, funkcje, metody nazywać w taki sposób addField, czyli najpierw małe litery i kolejny wyraz z dużej. Bez żadnych dziwnych kresek add_field w środku nazwy.

const dynamicFields = document.getElementById('dynamic-inputs'); // Pobieramy znacznik <div id="dynamic-inputs">
const addFieldButton = document.getElementById('dodaj_pole');    // Pobieramy przycisk <button id="dodaj_pole">

addFieldButton.addEventListener('click', addField);

function addField(){
    dynamicFields.innerHTML += '<div><input type="number"></div>';

    // ewentualnie w taki sposób zamiast metody innerHTML

    const div = document.createElement('div');
    
    const input = document.createElement('input');
    input.type = "number";

    div.appendChild(input);

    dynamicFields.appendChild(div);
}

Tylko żeby to wszystko nam zadziałało to musimy zrobić jeszcze jedną rzecz. Standardowo jak wysyłamy formularz <form></form> to dana podstrona się odświeża, kasując wszystkie zmiany jakie zostały zrobione.

W javascripcie możemy to wyłączyć nadpisując event submit

 const form = document.getElementById('oblicz'); // Pobieramy nasz formularz

 form.addEventListener('submit', sendForm);

 function sendForm(event) {
   event.preventDefault(); // wyłączamy wysłanie formularza
 }

Tutaj na dole masz cały kod

<!DOCTYPE html>
<html lang="pl">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <form id="oblicz" action="" method="post">
      <div id="dynamic-inputs">
        <div>
         <input type="number">
        </div>
       
       <div>
         <input type="number">
       </div>
      </div>
      
      
      <div>
        <button id="dodaj_pole">Dodaj pole</button>
        <button id="usun_pole">Usuń pole</button>
        <button id="wynik">wynik</button>
        <button id="reset">Resetuj</button>
      </div>
    </form>
    
    <script src="sumaIII.js"></script>
</body>

</html>

const form = document.getElementById('oblicz'); // Pobieramy nasz formularz

form.addEventListener('submit', sendForm);

function sendForm(event) {
   event.preventDefault(); // wyłączamy wysłanie formularza
}

//

const dynamicFields = document.getElementById('dynamic-inputs'); // Pobieramy znacznik <div id="dynamic-inputs">
const addFieldButton = document.getElementById('dodaj_pole');    // Pobieramy przycisk <button id="dodaj_pole">

addFieldButton.addEventListener('click', addField);

function addField(){
    dynamicFields.innerHTML += '<div><input type="number"></div>';

    // ewentualnie w taki sposób zamiast metody innerHTML

    const div = document.createElement('div');
    
    const input = document.createElement('input');
    input.type = "number";

    div.appendChild(input);

    dynamicFields.appendChild(div);
}

0

@Xarviel: Dzięki. Analizuje kod.

Początek skryptu miałaś dobry, ale zazwyczaj używa się angielskich nazw zmiennych i w javascripcie jest taka konwencja, żeby zmienne, funkcje, metody nazywać w taki sposób addField, czyli najpierw małe litery i kolejny wyraz z dużej. Bez żadnych dziwnych kresek add_field w środku nazwy.

Wiem, wiem, ale niestety nie znam angielskiego i to moja pięta Achillesa, bo już piąty rok się uczę angielskiego i nie mogę się nauczyć. Mam kiepską pamięć.

0

@Xarviel: Czy <input type="reset" value="Reset" /> jest dobrym sposobem na resetowanie formularza? U mnie działa.

0

Marta Długa napisał(a):

@Xarviel: Czy <input type="reset" value="Reset" /> jest dobrym sposobem na resetowanie formularza? U mnie działa.

Jest okej, jeśli potrzebujesz skasować tekst wpisany do pól formularza.

0

<div id="inputGroup">
</div>

document.getElementById("inputGroup").appendChild("<label>Mój dodany tekst</label>")

https://developer.mozilla.org/pl/docs/Web/API/Node/appendChild
Pokombinuj z tym

Funkcja dodawająca dynamiczne pole input

Xarviel napisał(a):

Xarviel napisał(a):

Marta Długa napisał(a):

Marta Długa napisał(a):

Marta Długa napisał(a):

Marta Długa napisał(a):

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami