Oto kod formularza, który mam:

<form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1">
    Grid Width:
    <input type="number" id="inputWidth" name="width" min="1" value="1">
    <input type="submit">
</form>

Muszę zatwierdzić te wejścia za pomocą osobnego pliku JS:

function getGridValues() {                                                                                                                                                
const inputHeight = document.getElementById('inputHeight').value;
const inputWidth = document.getElementById('inputWidth').value;
const colorPicker = document.getElementById('colorPicker').value;
console.log(`Height: ${inputHeight}, Width: ${inputWidth}, Color: ${colorPicker}`);
}

document.getElementById('submit').addEventListener("click", getGridValues());

Problem polega na tym, że za każdym razem , że klikam przesyłać, przeładowuje stronę i wysyła wartości domyślne. Jeśli zmienię wartości bez przesłania, jestem w stanie pobrać te nowe wartości za pomocą konsoli JS.

Zbadam wiele na tej rzeczy, ale wszystko sugeruje roztwory jQuery / ajax, ale mogę pracować z HTML / CSS / JS.

Jaki jest problem? Jak mogę to naprawić?

Dziękuję z góry.

0
Ronny C. 5 czerwiec 2018, 06:12

4 odpowiedzi

Najlepsza odpowiedź

Zapobiegaj domyślnym zachowaniu submit przy użyciu event.preventDefault. Następnie użyj AJAX, aby przesłać wartość formularza.

Również w AddEventlistener podczas mocowania zdarzenia nie musisz natychmiast połączyć getGridValues, więc uniknąć () po nazwie funkcji

function getGridValues(e) {
  e.preventDefault();
  const inputHeight = document.getElementById('inputHeight').value;
  const inputWidth = document.getElementById('inputWidth').value;
  console.log(`Height: ${inputHeight}, Width: ${inputWidth}`);

  // Here use ajax to submit the value
}

document.getElementById('submit').addEventListener("click", getGridValues);
<form id="sizePicker">
  Grid Height:
  <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
  <input type="number" id="inputWidth" name="width" min="1" value="1">
  <input type="submit" id="submit">
</form>
3
brk 5 czerwiec 2018, 03:19

Dodanie event.preventDefault(); to sposób na to, ale nie może zatrzymać strony, aby przeładować, jeśli użytkownik naciśnij "Enter" zamiast kliknąć przycisk Prześlij.

Dodanie action="javascript:void(0);" do formularza uniemożliwi oba.

0
Hank Phung 5 czerwiec 2018, 04:08

Spróbuj z następującymi zmianami w swoim kodzie.

<input type="button" onclick="return getGridValues();">

A skrypt jest,

function getGridValues() {                                                                                                                                                
   const inputHeight = document.getElementById('inputHeight').value;
   const inputWidth = document.getElementById('inputWidth').value;
   const colorPicker = document.getElementById('colorPicker').value;
   console.log(`Height: ${inputHeight}, Width: ${inputWidth}, Color: 
   ${colorPicker}`);
   return false;
}
0
Arulraj 5 czerwiec 2018, 03:49

Możesz użyć zapobiegania

function getGridValues(event) {        
     event.preventDefault();                                                                                                                                        
     const inputHeight = document.getElementById('inputHeight').value;
     const inputWidth = document.getElementById('inputWidth').value;
     const colorPicker = document.getElementById('colorPicker').value;
     console.log(`Height: ${inputHeight}, Width: ${inputWidth}, Color: ${colorPicker}`);
}

document.getElementById('submit').addEventListener("click", getGridValues);
0
Luke101 5 czerwiec 2018, 03:25