Home > Article > Backend Development > hx-post is not using the correct action (path)
Using htmx to submit the form, hx-post using the current path of the action, while replacing hx-post with the action attribute I get the correct path .
https://imgur.com/a/Vh3snub
This does not send to the correct path:
<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>
This indeed is sent to the correct path:
<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>
I added the submit button dynamically and it works in both cases so I didn't bother adding it to the code in the post.
When switching between login and registration, I removed the form from the parent div. For some reason this is confused with the htmx attribute. Instead, I toggle the form's display between None and Inherited to keep functionality intact
The above is the detailed content of hx-post is not using the correct action (path). For more information, please follow other related articles on the PHP Chinese website!