Form submission issue

Hey, trying to figure out some htmx/form problem.

<form 
            hx-post={`/tierlists/${tierlistId}/grades`}
            hx-target-4xx="#errors"
            hx-target-5xx="#errors"
            hx-swap="beforeend"
        >
            <input value={"1"} hidden="true" name="cardNumber" />
            <div>{LetterGrades.map((g) => 
                <label for={`grade-${g}`}><input type="radio" id={`grade-${g}`} name="letterGrade" value={g} />{g}</label>
            )}</div>
            <button type="submit">Grade</button>
        </form>
        <div id="errors">errors go here</div>

<form 
            hx-post={`/tierlists/${tierlistId}/grades`}
            hx-target-4xx="#errors"
            hx-target-5xx="#errors"
            hx-swap="beforeend"
        >
            <input value={"1"} hidden="true" name="cardNumber" />
            <div>{LetterGrades.map((g) => 
                <label for={`grade-${g}`}><input type="radio" id={`grade-${g}`} name="letterGrade" value={g} />{g}</label>
            )}</div>
            <button type="submit">Grade</button>
        </form>
        <div id="errors">errors go here</div>

When I submit the form, the page does a full refresh, the input values are appended to URL, and my POST request is not hit on my server. Anyone have ideas on how to resolve/troubleshoot? Curl works on expected route, the hx-post attribute in devtools looks correct

Solution:

are you sure htmx (from script tag) is loaded on your page? it would be responible for stopping the default behavior...

Jump to solution

2 Replies

Solution

whatplan•15mo ago

are you sure htmx (from script tag) is loaded on your page? it would be responible for stopping the default behavior

RichOP•15mo ago

No, well yes I am sure Now, that you say that and I'm thinking about it. I forgot this is not on the home page where I added it. Need to move it to a base layout that everything can use

Gaming

Programming

Form submission issue