Question

0

381

Views

In flexbox, submit button is not working properly. How to fix it?

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>

I want to make a form in which the values can't go blank. If somebody clicks on button without entering the values, the alert box pops up. to design it, I have used flex property. but now the JavaScript is not working. Can somebody explain why it is so?

almost 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

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

It's not related to the flexbox, that's happened because you check if the formname value is equal to empty space, but it should be an empty string formName.trim() === "" or 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

381

In flexbox, submit button is not working properly. How to fix it?

1 answers

0

Find remote jobs

Andres GPT