2

Actually I am using required attribute in all those input fields because they are mandatory. actually I am using conditional select option, if the user select yes then a mandatory input field appear that user must have to fill and in that case my submit button work and i move to the next page but when user slect no and no mandatory field appear, in that case when i click on submit button then it does not work. How can I fix this problem? I am using jquery.

$(document).ready(function() {
  Orientation();
  $("#to_check_recognition").change(function() {
    Orientation();
  });
});

function Orientation() {
  if ($("#to_check_recognition").val() == 'yes')
    $("#Average_orientation").show();
  else
    $("#Average_orientation").hide();
}
<title> Cycle Time Calculation INSIGNUM</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" onsubmit="return ValidateForm(this);" style="width: 1200px; margin:0px auto">
  <h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
  <hr><br>
  <p>Cycletime calcualation of module siyes between 5mil and 15mil</p>

  <table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
    <tr>
      <td style="width: 50%">
        <label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
        <select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
          <option value="" disabled selected> Please Select... </option>
          <option value="yes"> Yes</option>
          <option value="no"> No </option>
        </select><br><br>
      </td>
      <td style="width: 50%">
        <div id="Average_orientation" style="display: none;">
          <label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
          <input type="number" step="any" name="Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: right; height: 225px">
        <input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
      </td>
    </tr>
  </table>
</form>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
waqas
  • 23
  • 4
  • 1. missing ValidateForm; 2. I get console error when clicking on "no" 3. NEVER call anything in a form "submit" 4. Turn off HTML5 validation on hidden field https://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable – mplungjan Mar 03 '20 at 14:22

1 Answers1

1

The issue is because, although the field is hidden from view, it still has the required attribute set on it. As such the form cannot be submit. To fix this you need to add/remove that attribute when the field is shown/hidden.

Also note that your JS code should not be placed rather randomly in the middle of the table element. Put it either in the <head> or just before </body>.

Finally, do not use inline event attributes such as onclick and onsubmit. Use unobtrusive event handlers instead. Similarly, do not put your CSS inline in the HTML. It should be applied from a separate stylesheet.

With all that said, try this:

$(document).ready(function() {
  Orientation();

  $("#to_check_recognition").change(function() {
    Orientation();
  });

  $('form').on('submit', function(e) {
    console.log('form submitting...');
    if (!ValidateForm(this)) {
      e.preventDefault();
    }
  });
});

function Orientation() {
  var averageReqd = $("#to_check_recognition").val() === 'yes';
  $("#Average_orientation").toggle(averageReqd);
  $('input[name="Average_orientation"]').prop('required', averageReqd);
}

function ValidateForm() {
  // noop
}
form {
  width: 1200px;
  margin: 0px auto;
}

table {
  margin: 0px 40px;
}

table td {
  width: 50%;
}

#to_check_recognition {
  width: 350px;
  height: 35px;
  border-radius: 8px;
}

#Average_orientation {
  display: none;
}

span,
span {
  color: red;
}

#Average_orientation input {
  width: 350px;
  height: 25px;
  border-radius: 8px;
}

td.foo {
  text-align: right;
  height: 225px;
}

td.foo input {
  width: 200px;
  height: 50px;
  border-radius: 12px;
  color: blue;
  background: gold;
  cursor: pointer;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post">
  <h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
  <hr><br>
  <p>Cycletime calcualation of module siyes between 5mil and 15mil</p>

  <table border="0" cellpadding="18" cellspacing="10">
    <tr>
      <td>
        <label for="to_check_recognition">
          <b>
            Do you have to check Orientation? 
            <span>*</span>
          </b>
        </label><br><br>
        <select id="to_check_recognition" name="to_check_recognition" required>
          <option value="" disabled selected>Please Select...</option>
          <option value="yes">Yes</option>
          <option value="no">No</option>
        </select><br><br>
      </td>
      <td>
        <div id="Average_orientation">
          <label for="Average_orientation">
            <b>
              Average amount of orientation check per panel 
              <span>*</span>
            </b>
          </label><br><br>
          <input type="number" step="any" name="Average_orientation" required /><br><br>
        </div>
      </td>
    </tr>
    <tr>
      <td colspan="2" class="foo">
        <button type="submit">Click To Submit</button>
      </td>
    </tr>
  </table>
</form>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339