vendredi 16 septembre 2022

Pass checkbox and text input to url for fetch for displaying data back to html

I need to pass text values and checkbox values to a URL for a fetch request when the button is pressed and then display it on my HTML using basic Javascript.

So far I have been able to pass on text values but not the checkboxes. They seem to always be "on"?

html
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" id="number" value="True">Numbers
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" id="character" value="ture"> Special characters
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" id="uppercase" value="ture">Uppercase
      </label>
    </div>
    <div class="passwordbox">
      <input id="passlen" class="pass-len-box" placeholder="Enter password length">
      <button class="generatorPass" id="genratorPass">Generate</button>
      <br>
      <p id="dispPassword"></p>
    </div>
  </div>
JS
document.querySelector("#genratorPass").addEventListener("click", () => {
  const user_input_text = document.querySelector("#passlen");
  const user_input_number = (document.getElementById("number").value = "True");
  const user_input_character = (document.getElementById("character").value =
    "True");
  const user_input_uppercase = (document.getElementById("uppercase").value =
    "True");
  request(
    user_input_text,
    user_input_number,
    user_input_character,
    user_input_uppercase
  );
});
const passworldEl = document.getElementById("dispPassword");

request = (
  user_input_text,
  user_input_number,
  user_input_character,
  user_input_uppercase
) => {
  let url = `https://passwordinator.herokuapp.com?len=${user_input_text.value}&num=${user_input_number.value}&char=${user_input_character.value}&caps=${user_input_uppercase.value}`;
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      console.log(data.data);
      document.querySelector("#dispPassword").innerHTML = data.data;
    });
};

Passing info to a password generator https://github.com/fawazsullia/password-generator

Code example fetch('https://ift.tt/rtodGKY) .then((res)=> res.json()) .then((data) => console.log(data))

fetch('https://ift.tt/uPq8McH) On resolving generates a 18 digit password with characters, alphabets, uppercase letters and numbers




Aucun commentaire:

Enregistrer un commentaire