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

hx-post

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

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>

hx-post

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

Form submission issue

Similar Threads

Form submission issue

Similar Threads

Similar Threads

Similar Threads