Question

0

379

Views

En flexbox, el botón Enviar no funciona correctamente. ¿Como arreglarlo?

 let formBtn = document.querySelector('#formBtn');

formBtn.addEventListener('click', function check_condition(){

let formName = document.querySelector('#formname').value;

if(formName == " "){
 alert("Kindly enter your name");
}

});

 .left-form{
 width: 60%;
 display: flex;
 flex-direction: column;
 gap: 16px;
 transition: all 0.6 ease;
}
.left-form h4{
 font-size: 26px;
}

.right-adrs{
 width: 40%;
 background-color: orange;
}

.form-inputs{
 padding: 12px 16px;
 color: lightgray;
 width: 90%;
}
#formBtn{
 width: 20%;
 padding: 16px 16px;
 background-color: #355E3B;
 color: white;
 border:#355E3B;
 cursor: pointer;
 
}

textarea{
 height: 100px;
 width: 90%;
}

 <div class="left-form">
 <h4>Get in touch</h4>
 <input type="text" class="form-inputs" id="formname" placeholder=" Name" />
 <input type="email" class="form-inputs formemail" placeholder=" Email"/>
 <input type="tel" class="form-inputs formtel" placeholder=" Phone number"/>
 <textarea placeholder=" Message"></textarea>
 <button type="submit" id="formBtn">Send Message</button>
 </div>

Quiero crear un formulario en el que los valores no puedan quedar en blanco. Si alguien hace clic en el botón sin ingresar los valores, aparece el cuadro de alerta. para diseñarlo, he usado la propiedad flex. pero ahora el JavaScript no funciona. ¿Alguien puede explicar por qué es así?

almost 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-09-30T13:27:25.056Z

No está relacionado con el flexbox , eso sucedió porque verifica si el valor del nombre del formname es igual al espacio vacío, pero debe ser una cadena vacía formName.trim() === "" o formName.length === 0 .

 let formBtn = document.querySelector('#formBtn');

formBtn.addEventListener('click', function check_condition(){
 let formName = document.querySelector('#formname').value;
 
 if(formName.trim() === ""){
 alert("Kindly enter your name");
 }
});

 .left-form{
 width: 60%;
 display: flex;
 flex-direction: column;
 gap: 16px;
 transition: all 0.6 ease;
}
.left-form h4{
 font-size: 26px;
}

.right-adrs{
 width: 40%;
 background-color: orange;
}

.form-inputs{
 padding: 12px 16px;
 color: lightgray;
 width: 90%;
}
#formBtn{
 width: 20%;
 padding: 16px 16px;
 background-color: #355E3B;
 color: white;
 border:#355E3B;
 cursor: pointer;
 
}

textarea{
 height: 100px;
 width: 90%;
}

 <div class="left-form">
 <h4>Get in touch</h4>
 <input type="text" class="form-inputs" id="formname" placeholder=" Name" />
 <input type="email" class="form-inputs formemail" placeholder=" Email"/>
 <input type="tel" class="form-inputs formtel" placeholder=" Phone number"/>
 <textarea placeholder=" Message"></textarea>
 <button type="submit" id="formBtn">Send Message</button>
 </div>

0

379

En flexbox, el botón Enviar no funciona correctamente. ¿Como arreglarlo?

1 answers

0

Find remote jobs

Andres GPT