ph-page-submitter attribute

When the value of an element changed, will summit the current page with changed value.

<input
  name="abc"
  ph-config="name::abc,delay::1500"
  ph-page-submitter="query|pjax"
/>

For sortby:

<div
  ph-config="sortbyParam::sortby,sortby::name,multipleSortby::false"
  ph-page-submitter="query|pjax"
></div>

Change the value of the form field and watch the url change.

search field

Type to search

<label
  >Type to search
  <input
    type="search"
    name="search"
    ph-page-submitter="pjax"
    ph-config="delay::1500"
    ph-qs-to-value
  />
</label>

Using Alpine

<input
  type="search"
  x-data="ph"
  name="alpineinput"
  x-init="qsToValue('alpineinput')"
  @input.debounce.1000ms="pjax('hello')"
/>

select field

Select size

5 10 20 </select> </label>

<label
  >Select size
  <select
    name="size"
    ph-page-submitter="pjax"
    ph-qs-to-value="_:5"
  >
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="20">20</option>
  </select>
</label>

Using Alpine

Select a value a b

<select
  id="selector1"
  name="selector1"
  x-data="ph"
  x-init="qsToValue('selector1')"
  @input.debounce="pjax"
>
  <option
    value=""
    disabled
  >
    Select a value
  </option>
  <option value="a">a</option>
  <option value="b">b</option>
</select>

Checkbox field

all

<label
  >all
  <input
    type="checkbox"
    name="all"
    ph-page-submitter="pjax"
    ph-qs-to-value="_:true"
  />
</label>
<label>Type to search</label>

Using Alpine

all

<label
  >all
  <input
    type="checkbox"
    x-data="ph"
    name="alpineinput1"
    x-init="qsToValue('alpineinput1')"
    @input.debounce.1000ms="pjax"
  />
</label>
<label>Type to search</label>

submitter types

type PjaxRequestType = "query" | "pjax";

If you need more controll, consider using ph-ajax attribute.

extra attributes for this helper:

name	descriptio	link
ph-qs-to-value	if you’d like to sync the submitter and the query string at client side.

ph-qs-to-value

The syntax is qn:default,value|innerHTML|attributes.

• qn:default Query name and default value
• value or innerHTML or attribute to set from the Query parameter from the url