Menyerahkan borang menggunakan htmx, hx-post menggunakan laluan semasa tindakan, sambil menggantikan hx-post dengan atribut tindakan saya mendapat laluan yang betul.
https://imgur.com/a/Vh3snub
Ini tidak menghantar ke laluan yang betul:
<form hx-post="/signup" class="form" id="sign-up-form" name="signupform" hx-trigger="submit" hx-encoding="multipart/form-data" hx-swap="none" hx-target="this"> <div class="p-4"> <h5>Sign Up</h5> <label>Username:</label> <input class="form-control" autocomplete="username" type="text" name="usernamesignup" placeholder="Username" oninput="checkForValidSignUpSubmission()" required id="usernamesignupinput" /> </div> <div class="p-4"> <label>Email:</label> <input class="form-control" type="email" name="emailsignup" autocomplete="email" placeholder="[email protected]" oninput="checkForValidSignUpSubmission()" required id="emailsignupinput" maxlength="64" /> </div> <div class="p-4"> <label>Password:</label> <input class="form-control" type="password" name="passwordsignup" autocomplete="new-password" placeholder="Password" oninput="checkForValidSignUpSubmission()" required id="passwordsignupinput" /> </div> <div class="p-4"> <label>Confirm Password:</label> <input class="form-control" type="password" autocomplete="new-password" placeholder="Password" oninput="checkForValidSignUpSubmission()" required id="confirmpasswordsignupinput" name="confirmpasswordsignup" /> </div> <div class="p-4"> <label>Pick a profile picture</label> <input id="pfpimage" type="file" accept="image/*" name="pfpformfile" required /> </div> </form>
Ini menghantar ke laluan yang betul:
<form action="/signup" class="form" id="sign-up-form" name="signupform" hx-trigger="submit" hx-encoding="multipart/form-data" hx-swap="none" hx-target="this"> <div class="p-4"> <h5>Sign Up</h5> <label>Username:</label> <input class="form-control" autocomplete="username" type="text" name="usernamesignup" placeholder="Username" oninput="checkForValidSignUpSubmission()" required id="usernamesignupinput" /> </div> <div class="p-4"> <label>Email:</label> <input class="form-control" type="email" name="emailsignup" autocomplete="email" placeholder="[email protected]" oninput="checkForValidSignUpSubmission()" required id="emailsignupinput" maxlength="64" /> </div> <div class="p-4"> <label>Password:</label> <input class="form-control" type="password" name="passwordsignup" autocomplete="new-password" placeholder="Password" oninput="checkForValidSignUpSubmission()" required id="passwordsignupinput" /> </div> <div class="p-4"> <label>Confirm Password:</label> <input class="form-control" type="password" autocomplete="new-password" placeholder="Password" oninput="checkForValidSignUpSubmission()" required id="confirmpasswordsignupinput" name="confirmpasswordsignup" /> </div> <div class="p-4"> <label>Pick a profile picture</label> <input id="pfpimage" type="file" accept="image/*" name="pfpformfile" required /> </div> </form>
Saya menambah butang serah secara dinamik dan ia berfungsi dalam kedua-dua kes jadi saya tidak bersusah payah menambahkannya pada kod dalam siaran.
Apabila bertukar antara log masuk dan pendaftaran, saya mengalih keluar borang daripada div induk. Atas sebab tertentu ini keliru dengan atribut htmx. Sebaliknya, saya menogol paparan borang antara Tiada dan Diwarisi untuk memastikan fungsi tetap utuh
Atas ialah kandungan terperinci hx-post tidak menggunakan tindakan (laluan) yang betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!