Maison > Article > développement back-end > hx-post n'utilise pas la bonne action (chemin)
使用 htmx 提交表单,hx-post 使用操作的当前路径,同时用操作属性替换 hx-post 我得到正确的路径。
https://imgur.com/a/Vh3snub
这不会发送到正确的路径:
<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>
这确实发送到正确的路径:
<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>
我动态添加了提交按钮,该按钮在这两种情况下都有效,因此我没有费心将其添加到帖子中的代码中。
在登录和注册之间切换时,我从父 div 中删除了表单。由于某种原因,这与 htmx 属性混淆了。相反,我将表单的显示在“无”和“继承”之间切换,以保持功能完好
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!