使用htmx提交表单,hx-post使用操作的当前路径,而用action属性替换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@example.com" 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>

does发送到正确的路径:

<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@example.com" 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>

我动态添加了Submit按钮,它在两种情况下都有效,所以我没有费心将其添加到POST中的代码中.

推荐答案

在登录和注册之间切换时,我从父div中删除了表单.由于某些原因,这会扰乱htmx属性.相反,我将窗体的显示切换为无继承(&A;A),以保持功能的灵活性

Html相关问答推荐

卸载伪元素 destruct 了CSS

风格规则应该适用于响应图像的哪些方面?哪种规则适用于<;图片和gt;,哪种规则适用于<;img>;?

我的Django应用程序中出现模板语法错误

HTML中的ARIA标签:在元素内部还是外部?(&Q;

使用bash从html表格中提取表格

如何制作';在第';页中搜索;是否发现多个元素中的单词?

带有图像的虚线边框

四开:如何右对齐 PDF *和* HTML 中的文本

Angular中如何向单选按钮添加验证

BeautifulSoup用名称列表的findall无法找到另一个目标后面的目标

如何只为 Navbar 中的一个元素提供动画,其余元素没有使用 css 的动画

如何让一个 div 始终贴在容器的边缘?

如何将自定义图像插入 Shiny plot header?

子 div 在父 div 中溢出

文本溢出:省略号不适用于 flexbox

如何通过可见文本使用 Selenium 定位元素

每次按下按钮时减小字体大小的 jquery 函数

在不扭曲图像的情况下将图像放入灵活的 Div 框内

下拉菜单项在页面加载时显示,需要隐藏直到悬停

如何使用 :hover zoom 重叠图像?