The problem that javascript cannot be applied depending on whether the URL parameter is-CodePudding

There are a drop down list (select option) to select whether to is_recruiting, a radio option to select 'Total' or 'Period', and input tag of 'from_date' and 'to_date' to set the date when selecting 'Period'.

When the radio option is centered and 'Total' is selected, the date input tag is prevented from being input, and the recruiting option can be selected. Conversely, if the 'Period' is selected, the recruiting option is blocked and the period(from_date & to_date) can be set.

<form action="/chart" method="GET">
    <select name="is_recruiting" id="is_recruiting" >
        <option value="A" {% if is_recruiting == "A" %} selected {% endif %}>A</option>
        <option value="B" {% if is_recruiting == "B" %} selected {% endif %}>B</option>
        <option value="ALL" {% if is_recruiting == "ALL" %} selected {% endif %}>ALL</option>
    </select>
    <div  style="display: inline">
      <label><input type="radio" name="optionRadios" value="total" {% if option_radio != 'period' %} checked {% endif %}/> Total </label>
    </div>
    <div  style="display: inline">
      <label><input type="radio" name="optionRadios" value="period" {% if option_radio == 'period' %} checked {% endif %}/> Period : </label>
        <input autocomplete="off"  name="from_date" id="fromDate" value={{from_date|default_if_none:''}}>
        <label> ~ </label>
        <input autocomplete="off"  name="to_date" id="toDate" value={{to_date|default_if_none:''}}>
    </div>
    <button  type="submit">Submit</button>
</form>


<script>
    $('input[type=radio][name=optionRadios]').on('click',function () {
    var chkValue = $('input[type=radio][name=optionRadios]:checked').val();
    var recruitingSelect = document.getElementById("is_recruiting");

    if(chkValue == 'total'){
        $( '#fromDate' ).attr('disabled', 'disabled').val('');
        $( '#toDate' ).attr('disabled', 'disabled').val('');

    }
    elif(chkValue == 'total'){
        $( '#fromDate' ).removeAttr('disabled');
        $( '#toDate' ).removeAttr('disabled');
    }

    if(chkValue == 'period'){
        recruitingSelect.disabled = true;
    }
    else {
        recruitingSelect.disabled = false;
    }
});
</script>

If there are no is_recruiting or optionRadios, from_date, to_date parameters in the url, the above JavaScript code works normally, but if you select an option and submit once and include parameters in the url, the JavaScript is not applied. What's wrong?

http://127.0.0.1:8000/chart/ -> JavaScript applied http://127.0.0.1:8000/chart/?is_recruiting=A&optionRadios=total -> JavaScript not applied

CodePudding user response：

Your Javascript is most likely breaking because elif doesn't exist in JavaScript. Use else if(...) instead. Also, you seem to have a typo in the else if logic: you are checking for chkValue == 'total' for a second time (after the first if). I'm guessing the correct conditional would be chkValue != 'total'.

Also, since ES6 it is suggested that you use type-safe checking with === and !==. These operators will check for the datatype of the parameters when comparing both sides of the operation.