4 replies

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