Dynamic jQuery input refreshes the page because of error

Question

I am making this input form through which users can add names of members in a team. I have four sets of input text fields. Initially, I let one of them be visible, and make the other three have hidden displays. Through javascript, I want the user to see a new set of these inputs by pressing the add member button. This works perfectly on my localhost. However, when I deploy it, the page reloads/refreshes itself whenever I press the add button. And in the console, it gives this error The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

function add(){
    if($('#total_chq').val() < 4){
        var index = parseInt($('#total_chq').val()) + 1;
        $('#member_' + index).show();
        $('#total_chq').val(index);
    }
}
function remove(){
    var last_no = $('#total_chq').val();
    if(last_no > 1){
        $('#member_' + last_no).hide();
        $('#total_chq').val(last_no - 1);
    }
}

<div id="member_container">
    <!-- first guy -->
    <div class="form-field">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
    <!-- second guy -->
    <div class="form-field" style="display: none;" id="member_2">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
    <!-- third guy -->
    <div class="form-field" style="display: none" id="member_3">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
    <!-- fourth guy -->
    <div class="form-field" style="display: none;" id="member_4">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
</div>
<input type="hidden" value="1" id="total_chq">
<button class="btn btn-outline-none" onclick="add()">
    <i class="fas fa-plus"></i> Add Member
</button>
<button class="btn btn-outline-none" onclick="remove()">
    <i class="fas fa-times"></i> Remove Member
</button>

How is your function add() being called? I don't see it in your html. Anyway looks like you need to call event.preventDeault when adding since this looks like normal submit behaviouw of maybe a wrapper form element. — Klaassiek, Apr 11 '21 at 03:19
It's not an error. And the refreshing has probably nothing to do with it. https://stackoverflow.com/questions/65094328/how-to-fix-content-security-policy-contains-an-invalid-source-error — yochanan sheinberger, Apr 11 '21 at 04:50
@yochanansheinberger thank you for your suggestion! I checked that out but how do I prevent it from refreshing? Are you suggesting it is because of another problem? — Steven Oh, Apr 11 '21 at 05:06
Yes. BTW you have a typo in all the last name input elements `type="texc"` — yochanan sheinberger, Apr 11 '21 at 05:20
@yochanansheinberger no, but I am using flask to store these inputs into the database. Thanks for spotting the typo :D — Steven Oh, Apr 11 '21 at 05:24
It's a long shot, but try use `event.preventDefault()` as @klaassiek suggested. — yochanan sheinberger, Apr 11 '21 at 05:32
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/230992/discussion-between-yochanan-sheinberger-and-steven-oh). — yochanan sheinberger, Apr 11 '21 at 05:32

Klaassiek · Accepted Answer · 2021-04-13T12:11:27.117

A couple of things might help. First make sure to use the type attribute and make sure to set it as button. As w3schools suggests:

Always specify the type attribute for the element. Different browsers may use different default types for the element.

If that doesn't do the trick, use event.preventDefault() in your add function. First add the event to the inline part:

<button onclick="add(event);" type="button">

Then adjust the first two lines of the add function, like so:

function add(event){
    event.preventDefault();

Dynamic jQuery input refreshes the page because of error

1 Answers1