Как обьеденить параметры get-запроса из двух форм

Question

У меня есть две формы: поисковая форма и форма фильтров. Поисковая форма находится в шапке сайта, а форма фильтров в боковой панеле.

Поисковая форма

<form action="/catalog" method='GET' className={[styles['search'], containerClassName].join(' ')}>
    <input {...inputProps} type="search" className={[styles['search__input'], inputClassName].join(' ')} name='search' placeholder="Пошук..."/>
    <button className={[styles['search__btn'], buttonClassName].join(' ')}>
        <img src="/static/images/layout/search.png" alt="Пошук" className={styles['search__btn-img']} />
    </button>
</form>

Форма фильтров

<form action="" method='GET' className={styles.sidbar__filter}>
    <h3 className={styles['sidbar__filter-title']}>Ціна</h3>
    <div className={styles['sidbar__filter-wrapper']}>
        <div className={styles['sidbar__filter-block']}>
            <label htmlFor="from" className={styles['sidbar__filter-label']}>Від</label>
            <input id="from" type="text" value={minPrice} onChange={ handleChangeMinRange} className={styles['sidbar__filter-input']} name='min'/>
        </div>
        <div className={styles['sidbar__filter-block']}>
            <label htmlFor="to" className={styles['sidbar__filter-label']}>До</label>
            <input id="from" type="text" value={maxPrice} onChange={ handleChangeMaxRange}  className={styles['sidbar__filter-input']} name="max"/>
        </div>
    </div>
    <div className={styles['sidbar__filter-slider']}> 
        <div className={styles['sidbar__filter-track']}>
            <div ref={progress} className={styles['sidbar__filter-progress']}></div>
        </div>
        <input type="range"  id="min-value" min='0' max='10000' value={minPrice} onChange={handleChangeMinRange}  className={[styles['sidbar__filter-range'], styles['sidbar__filter-range--min']].join(' ')}/>
        <input type="range"  id="max-value" min='1' max='10000' value={maxPrice} onChange={handleChangeMaxRange} className={[styles['sidbar__filter-range'], styles['sidbar__filter-range--max']].join(' ')}/>
    </div>
    <div className={styles['sidbar__filter-title']}>Тільки в наявності:</div>
    <Checkbox inputProps={{name: 'empty', checked: empty, id: "empty-products"}} onChange={handleChangeEmppty} text='Так' />
    <button className={styles['sidbar__filter-btn']}>Застосувати</button>
</form>

Как можно сложить параметры GET-запроса этих двух форм?

Answer 1

Примерно так:

var formData1 = new FormData(form1);
var formData2 = new FormData(form2);
for (const pair of formData1.entries()) {
  formData2.append(pair[0], pair[1]);
}

Answer 2

Как обьеденить параметры get-запроса из двух форм

Например так...

document.querySelector('button').addEventListener('click', _ => {
  const url = ['find', 'user'].reduce((url, f) => (
    url.searchParams.set(f, document.querySelector(`[name=${f}]`).value), url
  ), new URL('http://test'))
  console.log(url)
})

<form>
  <input name='find' />
</form>
<form>
  <input name='user' />
</form>
<button>Тест</button>

БЛОГ НА HUSL

Как обьеденить параметры get-запроса из двух форм

Ответы (2 шт):