How can i prevent jquery add a string to url? - php

Question

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="············"
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.

Answer 1

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

Answer 2

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