Html get para javascript · Ruiso

Basicamente, vc conseguirá pegar o value de cada input apenas envolvento tudo em um <form>...</form> e identificando com id no HTML, depois fazendo destructuring

<form>
    <div class="inputBox">
        <label for="dateStart" >Data de Inicio:</label>
        <input type="date" id="dateStart">
    </div>
    
    <div class="inputBox">
        <label for="dateEnd" >Data de Termino:</label>
        <input type="date"  id="dateEnd">
    </div>
</form>

no js:

const { dateStart, dateEnd } = form

console.log(dateStart.value) ///data em string
console.log(dateEnd.value) ///data em string

Reparei que vc está montando um modal...
Desta forma vou deixar um possível meio para se alcansar o resultado e dentro do modal, um form com oq vc perguntou, ressaltando uma questão para inputs com type diferente.

Com radio e checkbox é interessante fazer um get mais específico usando :cheked como:

 const inputRadio = document.querySelectorAll('input[name="inputRadio"]:checked')

e depois encadiando um metodo de for para incluir em um Array, já que a inputRadio armazena um Nodelist com o caminho do HTMLcollection:

    inputRadio.forEach(item => {
      arrInputRadioAndCheckedValue.push( item.value )
    })

Veja o exemplo completo:

https://github.com/felipefarinha/formModalTabNews

<!DOCTYPE html>
<html lang="PT-BR">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
  <title>TabNews</title>
</head>
<body>
  <div class="btnOpenModal">
    <h1>Abrir modal</h1>
  </div>

    <div class="wrap_Modal ">
      <div class="fade"></div>

      <div class="modal-content">

        <div class="btnClose"></div>
        
        <div class="modal-header">
          <h1>Nova Tarefa</h1>
        </div>

        <div class="modal-body">
          <fieldset>
            <form>
            
              <div class="inputBox">
                <label for="recipient-name" >Tarefa:</label>
                <input type="text" id="recipientName">
              </div>

              <div class="inputBox">
                <label for="dateStart" >Data de Inicio:</label>
                <input type="date" id="dateStart">
              </div>

              <div class="inputBox">
                <label for="dateEnd" >Data de Termino:</label>
                <input type="date"  id="dateEnd">
              </div>

              <div class="wrapInputDemo">

                <div class="inputDemoBox">
                  <label for="inputRadioOne" >input radio One</label>
                  <input type="radio" name="inputRadio" value="radioOne" id="inputRadioOne">
                </div>

                <div class="inputDemoBox">
                  <label for="inputRadioTwo" >input radio Two</label>
                  <input type="radio" name="inputRadio" value="radioTwo" id="inputRadioTwo">
                </div>

                <div class="inputDemoBox">
                  <label >input checkbox</label>
                  <input type="checkbox" name="dateCheckbox" value="checkboxOne"/>
                  <input type="checkbox" name="dateCheckbox" value="checkboxTwo"/>
                </div>
              
              </div>

            </form>
          </fieldset>

          <input type="submit" class="btnSubmit" value="Criar tarefa"/>
          
          <div class="output">
            <h3>output:</h3>
            <div class="message"></div>
          </div>

        </div>
      </div>
    </div>


</body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body { 
  width: 100%;
  height: 100vh;
  background-color: slategray;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: sans-serif;
}

body .btnOpenModal {
  padding: 1rem;
  background-color: black;
  color: white;
  border-radius: .25rem;
  cursor: pointer;
  position: relative;
}

body .btnOpenModal:hover{
  background-color: #222;
}

.wrap_Modal {
  visibility: hidden;
  display: flex;
}

.wrap_Modal .fade {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgb(0 0 0 / 80%);
}

.wrap_Modal .modal-content {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background-color: white;
  padding: 1rem;
  border-radius: .25rem;
}

.wrap_Modal .modal-content .btnClose  {
  background-image: url('./btnClose.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-color: red;
  position: absolute;
  top: -2rem;
  right: -2rem;
  z-index: 3;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
}


.modal-header h1{
  margin-bottom: 1rem;
}

.modal-body fieldset, .modal-body form{
  background-color: transparent;
  border: none;
  width: 100%;
  height: auto;
}

.modal-body form .inputBox{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: left;
}

.modal-body form .inputBox label{
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: .3rem;
}

.modal-body form .inputBox input{
  width: 100%;
  height: 2rem;
  margin-bottom: 1.5rem;
  border-radius: .25rem;
  outline: none;
  border: 1px solid rgb(128 128 128 / 50%);
  padding-left: 1rem;
}

.modal-body form .wrapInputDemo {
  display: flex;
  flex-direction: column;

}

.modal-body form .wrapInputDemo .inputDemoBox{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  margin-bottom: 1.5rem;
}

.modal-body form .wrapInputDemo .inputDemoBox label{
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: .3rem;
  margin-right: 1rem;
}

.modal-body form .wrapInputDemo .inputDemoBox input{
  width: 10%;
  height: 2rem;
  border-radius: .25rem;
  outline: none;
  border: 1px solid rgb(128 128 128 / 50%);
  padding-left: 1rem;
}

.modal-body .btnSubmit {
  background-color: green;
  padding: 1rem 2rem;
  border-radius: .25rem;
  border: none;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  transition: .2s all;
  margin-bottom: 4rem;
}
.modal-body .btnSubmit:hover {
  filter: opacity(.8);
}

.modal-body .output {
  padding: 1rem;
}

.modal-body .output .message {
  margin-top: 1rem;
  font-size: 1rem;
}

const wrapModal = document.querySelector('.wrap_Modal')

document
  .querySelector('.btnOpenModal')
  .addEventListener('click', ()=>{
    wrapModal.style.visibility = 'visible'
  })

let targetClassList = ''

wrapModal.addEventListener('click', (e)=>{
  targetClassList = e.target.classList[0]

  const classList = ['fade', 'btnClose']

  const containClassFade = classList.some(item => item === targetClassList)

  if (containClassFade) { wrapModal.style.visibility = 'hidden' }
})


document
  .querySelector('.btnSubmit')
  .addEventListener('click', (e) => {
    e.preventDefault()

    const arrInputRadioAndCheckedValue = []

    const form = document.querySelector('form')
    const inputRadio = document.querySelectorAll('input[name="inputRadio"]:checked')
    const inputCheckbox = document.querySelectorAll('input[name="dateCheckbox"]:checked')
    const outputMessage = document.querySelector('.output .message')


    const {recipientName, dateStart, dateEnd } = form
    
    inputRadio.forEach(item => {
      arrInputRadioAndCheckedValue.push( item.value )
    })

    inputCheckbox.forEach(item => {
      arrInputRadioAndCheckedValue.push( item.value )
    })

    const message =  `${recipientName.value}, ${dateStart.value}, ${dateEnd.value}`

    outputMessage.innerHTML = message + arrInputRadioAndCheckedValue.join(', ')
  })