How can i prevent jquery add a string to url?

So i got a problem that when i click a submit button of a form, my action attribute link was added a new line that i don’t want it

Here is modal that contain the form:

<!--modal-->
<div class="modal fade" id="changepass" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel2">Password changing</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form action="" id="passchange">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-password-toggle">
                            <label class="form-label" for="basic-default-password12">Enter New
                                Password</label>
                            <div class="input-group">
                                <input type="password" class="form-control"
                                    id="basic-default-password12"
                                    placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                    aria-describedby="basic-default-password2" name="newpass" />
                                <span id="basic-default-password2"
                                    class="input-group-text cursor-pointer"><i
                                        class="bx bx-hide"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary"
                        data-bs-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-primary btn-ok">Yes</button>
                    <!--Get id function-->
                </div>
            </form>
        </div>
    </div>
</div>
<!--/modal-->

Here is the button when i click, it will open modal box:

<div class="card-header d-flex align-items-center justify-content-between">

    <h5 class="mb-0"><?=$detail['last_name']?>'s Information</h5>
    <small class="text-muted float-end"><button type="button" class="btn btn-primary"
            data-id="<?=$detail['id']?>" onclick="changepassword(this)">Change
            password</button></small>
</div>

Here is jquery i’m using to pass a php value to the modal:

<script>

function changepassword(elm) {

    let id = $(elm).data('id');
    let modal = $('#changepass');
    $('#passchange').attr('action',
        `http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/${id}`);
    modal.modal('show');
}
</script>

So the link i want it to be on the url bar is (id is changable):

http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/id

here is the link that i don’t expect it to be:

http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/30?newpass=test

i want to call a php function and it will grab the input but the line "?newpass=test" prevent it to run.

>Solution :

Your form is using GET method to send data to server. Form with GET method will append a list of name/value pairs after the question mark (?) at the end of your URL and each one separated by an ampersand (&). You can change method to POST so you will get no data appended to the URL and sensitive data such as password changes should use POST.

<form action="" method="POST" id="passchange">

You can learn more about sending data to server in here