Html - my javascript function couldn't worl with input and label

LewisLimLewisLinYitzhe
January 30, 2024
122 views
1 vote
2 Answers

function feedback() {
    //check for empty input
    if (document.myForm.uname.value == "") {
        alert("Please fill in your name.");
        document.myForm.uname.focus();
        return false;
    }

    if (document.myForm.email.value == "") {

        alert("Please provide your password within 8 to 16 characters.");
        document.myForm.email.focus();
        return false;
    }

    if (document.myForm.yes.checked == false)
        if (document.myForm.no.checked == false) {
            alert("Please select your gender.");
            return false;
        } else if (document.myForm.yes.checked == true)
            if (document.myForm.no.checked == true) {
                return false;
            }

    if (document.myForm.channel.value == "") {
        alert("Please select from where you hear about us!");
        document.myForm.channel.focus();
        return false;
    }

    return (true);
}

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    background-color: #bde5d2;
    font-family: 'Poppins', sans-serif;
    background-repeat: no-repeat;
    background-image: url('images/dodgeball-player-painted-vector.jpg');
    padding: 0;
    background-size: cover;
    background-position: center;
}

.textup {
    text-align: center;
    color: rgb(11, 118, 11);
    font-weight: 700;
}

i {
    margin-right: 3px;
}




.form-box {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(36, 67, 40, 0.8);
    padding: 15px;
    border-radius: 8px;
    width: 500px;
    margin: 0 auto; /* Center the form horizontally */
    margin-top: 10%; /* Adjust the top margin as needed */
    opacity: 0.7;
}


form {
    max-width: 400px;
    margin: 0 auto;
}

.radio-group {
    display: flex;
    margin-bottom: 16px;
}

input[type="radio"] {
    margin-left: 8px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
    color: green;
    font-weight: 600;
}

input,
textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 12px;
    box-sizing: border-box;
    border-radius: 10px;
}

button {
    background-color: #368b44;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    width: 100%;
    font-size: 15px;
    transition: .2s linear;
    opacity: 1 !important;
}

    button:hover {
        background-color: #0a6808;
        border: none;
        transform: translateY(-10px);
        opacity: 1 !important;
    }

.rounded {
    flex: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.logo {
    object-fit: cover;
    display: block;
    /* Make sure the image fills the container width */

    max-height: 200px;
    min-height: 200px;
    max-width: 200px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    width: auto;
}

.logoposition {
    right: 20px;
    position: absolute;
    top: 35px;
}

<h3 style="position:absolute;top:15%">
    <i class="fa-face-smile"></i>
    Upload your FeedBack form for us!!
</h3>
<div class="form-box">
    <div class="textup">

        It only takes two minutes!!
    </div>
    <br />
    <form name="myForm" onsubmit="return( feedback());">
        <label for="uname">

            Name
        </label>
        <input type="text" id="uname"
               name="uname" required>

        <label for="email">
            <i class="fa fa-solid fa-envelope"></i>
            Email Address
        </label>
        <input type="email" id="email"
               name="email" required>

        <label for="phone">
            <i class="fa-solid fa-phone"></i>
            Phone No
        </label>
        <input type="tel" id="phone"
               name="phone" required>

        <label>
            <i class="fa-solid fa-face-smile"></i>
            Do you satisfy with our service?
        </label>
        <div class="radio-group">
            <input type="radio" id="yes"
                   name="satisfy" value="yes" checked>
            <label for="yes">Yes</label>

            <input type="radio" id="no"
                   name="satisfy" value="no">
            <label for="no">No</label>
        </div>

        <label for="msg">
            <i class="fa-solid fa-comments"
               style="margin-right: 3px;"></i>
            Write your Suggestions:
        </label>
        <textarea id="msg" name="msg"
                  rows="4" cols="10" required> 
        </textarea>
        <button type="submit">
            Submit
        </button>
    </form>
</div>
<div class="logoposition">
    <img src="images/WhatsApp Image 2024-01-27 at 12.37.00_0f8d14e3.jpg" class="logo" />
</div>

i expect that the alert will pop up. But it does not work and it seems like the function can’t call out. Other than that, the logo can be displayed fully. it shows that there still have some side cant display.I put it into a <div> box and change the border radius Any suggestion and What’s the problem??

Answers

    function feedback() {
        //check for empty input
        if (document.forms[0].uname.value == "") {   <------🔴
            alert("Please fill in your name.");
            document.forms[0].uname.focus();<------🔴
            return false;
        }

        if (document.forms[0].email.value == "") {<------🔴

            alert("Please provide your password within 8 to 16 characters.");
            document.forms[0].email.focus();<------🔴
            return false;
        }

        if (document.forms[0].yes.checked == false)<------🔴
            if (document.forms[0].no.checked == false) {<------🔴
                alert("Please select your gender.");
                return false;
            } else if (document.forms[0].yes.checked == true)<------🔴
                if (document.forms[0].no.checked == true) {<------🔴
                    return false;
                }

        if (document.forms[0].channel.value == "") {   <------🔴
            alert("Please select from where you hear about us!");
            document.forms[0].channel.focus();   <------🔴
            return false;
        }

        alert("submited");
    }

You are using the name of form which may not possible. Use methods specified in w3schools (opens in new tab) for more info.

You should pass the event and the form to the inline onsubmit attribute’s function call.

Also, you should access the form elements by their name relative to the form that’s passed into the event handler.

If you do not want the form to actually submit, you should jut call event.preventDefault().

// Preset values by their ID
window.uname.value = 'Bob';
window.email.value = '[email protected]';
window.phone.value = '555-555-5555';
window.no.checked  = true;

function feedback(event, form) {
  event.preventDefault();
  
  if (form.elements.uname.value === "") {
    alert("Please fill in your name.");
    form.elements.uname.focus();
    return false;
  }

  if (form.elements.email.value === "") {
    alert("Please provide your password within 8 to 16 characters.");
    form.elements.email.focus();
    return false;
  }

  if (form.elements.satisfied === 'no') {
    alert("Please select your gender.");
    return false;
  }

  // (form.elements.channel.value === "") {
  //alert("Please select from where you hear about us!");
  //form.elements.channel.focus();
  //  return false;
  //

  console.log('Submitting...');
  return true;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #bde5d2;
  font-family: 'Poppins', sans-serif;
  background-repeat: no-repeat;
  background-image: url('images/dodgeball-player-painted-vector.jpg');
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
}

.textup {
  display: flex;
  justify-content: center;
  color: rgb(11, 118, 11);
  font-weight: 700;
}

i {
  margin-right: 3px;
}

.form-box {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(36, 67, 40, 0.8);
  padding: 15px;
  border-radius: 8px;
  width: 500px;
  opacity: 0.7;
}

form {
  max-width: 400px;
  margin: 0 auto;
}

.radio-group {
  display: flex;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  color: green;
  font-weight: 600;
}

input,
textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  box-sizing: border-box;
  border-radius: 10px;
}

button {
  background-color: #368b44;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  width: 100%;
  font-size: 15px;
  transition: .2s linear;
  opacity: 1 !important;
}

button:hover {
  background-color: #0a6808;
  border: none;
  transform: translateY(-10px);
  opacity: 1 !important;
}

.rounded {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.logo {
  object-fit: cover;
  display: block;
  /* Make sure the image fills the container width */
  max-height: 200px;
  min-height: 200px;
  max-width: 200px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  width: auto;
}

.logoposition {
  right: 20px;
  position: absolute;
  top: 35px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<h3>
  <i class="fa fa-face-smile"></i>
  Upload your feedback form for us!!
</h3>
<div class="form-box">
  <div class="textup">
    It only takes two minutes!!
  </div>
  <form name="myForm" onsubmit="feedback(event, this)">
    <label for="uname">Name</label>
    <input type="text" id="uname" name="uname" required>
    <label for="email">
      <i class="fa fa-solid fa-envelope"></i>
      Email Address
    </label>
    <input type="email" id="email" name="email" required>
    <label for="phone">
      <i class="fa-solid fa-phone"></i>
      Phone No
    </label>
    <input type="tel" id="phone" name="phone" required>
    <label>
      <i class="fa-solid fa-face-smile"></i>
      Are you satisfied with our service?
    </label>
    <div class="radio-group">
      <input type="radio" id="yes" name="satisfied" value="yes" checked>
      <label for="yes">Yes</label>
      <input type="radio" id="no" name="satisfied" value="no">
      <label for="no">No</label>
    </div>
    <label for="msg">
      <i class="fa-solid fa-comments" style="margin-right: 3px;"></i>
      Write your Suggestions:
    </label>
    <textarea id="msg" name="msg" rows="4" cols="10" required> </textarea>
    <button type="submit">Submit</button>
  </form>
</div>
<div class="logoposition">
  <img src="images/WhatsApp Image 2024-01-27 at 12.37.00_0f8d14e3.jpg" class="logo" />
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – my javascript function couldn't worl with input and label

Answers