Javascript function to send alert firing regardless of value returned

问题

The function created to send an alert based on a radio box's value returning as null is firing and sending alert while radio box has a value that should not be null. Somewhere else on the page is a function that hides the tables these radios appear on, and is what initially made this task out of my reach. If this div didn't hide, and these tables weren't generated dynamically then it could have been solved by adding a required attribute to the radio. This actually works as long as the div is showing, however breaks when hidden. I've essentially been tasked to take the long way around making this radio required.

Here is the javascript

<script type="text/javascript">
$(function validate() {
$(document).submit(function() {
  <%For z = 0 to TotalUnits - 1%>
  if ($("input[name='checkradio<%=z%>']:checked").length == 0)
    alert("Select Yes or No for Needs Repair checkbox <%=z%>");
    return false;
  }
  <%Next%>
  $("submitbutton").click(function() {
    $("#formID").submit();
document.getElementsByName("checkradio").addEventListener('click', 
validate);  
});
});
});
</script>

Here is the HTML

<label id="checklabel" name="checklabel">The Vehicle Requires Repair</label>"


<label id="yesradio">
<input type="radio" ((name="checkradio" & z)) value="1" id="Radio1"> Yes</label>
<label id="noradio">
<input type="radio" ((name="checkradio" & z)) value="0" id="Radio0"> No</label>

Here is the script that hides the div (I cleaned the concat. but left the meat in its own tags)

<script>

<%for z = 0 to TotalUnits - 1%>

    $( document ).ready(function() {
    $("div.section<%=z%>").hide();
    });


<%next%>

</script>
<%response.write(TmpString)%>

Here is my submit button (stripped off the label)

<input value="Submit" type="submit" id="submitbutton" name="submitbutton" 
onsubmit="validate()">

The alert should only fire when the submit button is pressed and the value of the radio is null.

回答1:

Because each radio button is a control it is own right, you need to check if any of the controls that are linked together (via the name attribute) are checked.

Firstly, getElementsByName() returns an array (notice the s on Elements), so there is no .value for you to check.

(Oh, and be aware that having multiple <label id="yesno"> is invalid, as elements need to have a unique id attribute. In this case you're probably best just removing the id="yesno" completely.)

But it's a lot, lot easier to do this via jQuery...

<script type="text/javascript">
  $(function() {
    $(document).submit(function() {
      <%For z = 0 to TotalUnits - 1%>
      if ($("input[name='checkradio<%=z%>']:checked").length == 0)
        alert("Select Yes or No for Needs Repair checkbox <%=z%>");
        return false;
      }
      <%Next%>
      $("submitbutton").click(function() {
        $("#formDVIR").submit();
      });
    });
  });
</script>

By using the selector of input[name='checkradio<%=z%>']:checked you're asking jQuery to find all input controls with a name of checkradio1 (or whatever z is) and only those which are checked. If the length of the resultant jQuery object is more than 1 you know at least one is selected

回答2:

push me or so

const myId=document.getElementById(“myId”); myId.addEventListener(“click”, function () { alert(“message and stuff”)});

来源：https://stackoverflow.com/questions/58454746/javascript-function-to-send-alert-firing-regardless-of-value-returned

标签

javascript

jquery

html

asp-classic