recuperar valores

[John Hebert Trindade]

Boa noite pessoal, uma pessoa amiga ajudou me a preencher os campos selects conforme precisava, e os louvores são dele e não meu.

Mas preciso da vossa ajuda para o seguinte:

Conforme clico no botão cadastrar e é encontrado algum erro ou falta algum campo obrigatório, nos campos selects não recupera os dados que selecionei e nos outros campos sim.

Espero que alguém possa me ajudar.

Criamos uma view da seguinte forma:

 <div class="column">
<label for="adms_distrito_id" class="title-input">Distrito:<span class="text-danger">*</span> </label>
            <select class="input-adm" name="adms_distrito_id" id="adms_distrito_id" data-autofill data-target='#adms_concelho_id' data-href='load-concelhos/index'>
              <option value="">Carregando...</option>
            </select>
            <div class="content-adm-alert"></div>
          </div>
          <div class="column">
            <label for="adms_concelho_id" class="title-input">Concelho:<span class="text-danger">*</span> </label>
            <select class="input-adm" name="adms_concelho_id" id="adms_concelho_id" data-target='#adms_freguesia_id' data-href='load-freguesias/index'>
              <option value="">Selecione um Distrito</option>
            </select>
          </div>
          <div class="column">
            <label for="adms_freguesia_id" class="title-input">Freguesia:<span class="text-danger">*</span> </label>
            <select class="input-adm" name="adms_freguesia_id" id="adms_freguesia_id">
              <option value="">Selecione um Concelho</option>
            </select>
            </div>

e um arquivo js da seguinte forma:

const loadJson = async (url, method = 'get') => {
  const headers = {
    method
  }
  const retorno = { statusCode: 200, body: [] }
  const request = await fetch(url, headers)
  if (request.headers.get('content-type').includes('json')) {
    const data = await request.json()
    retorno.body = data
  } else {
    adms_distrito_id.nextElementSibling.innerHTML = await request.text()
  }
  return retorno
}
const fillSelect = (selector, data, callback) => {
  // define se select element to be feed
  const selectToFill = document.querySelector(selector)
  const selectOptions = []
  selectToFill.innerHTML = '<option value="">loading data...</option>'
  selectToFill.classList.remove('is-invalid')

  for (const obj of data) {
    const [key, val] = Object.keys(obj)
    selectOptions.push(`<option value="${obj[key]}">${obj[val]}</option>`)
  }

  if (selectOptions.length) {
    selectToFill.innerHTML = selectOptions.join()
    selectToFill.disabled = false
  } else {
    selectToFill.classList.add('is-invalid')
    selectToFill.disabled = true
    selectToFill.innerHTML = '<option value="">No registers found.</option>'
  }
  callback(selectToFill)
}
loadJson('/load-distritos/index').then((obj) => {
  for (const select of document.querySelectorAll('select[data-autofill]')) {
    fillSelect('#' + select.id, obj.body, (e) => {
      e.dispatchEvent(new Event('change'))
    })
  }
})

// Listen the changeEvent for all selects with [data-target][data-href]
const selectsToFillAnother = document.querySelectorAll('select[data-target][data-href]')

for (const select of selectsToFillAnother) {
  select.onchange = async ({ target }) => {
    const id = target.value
    const href = target.dataset.href
    const targetSelect = target.dataset.target
    const nextElement = targetSelect

    document.querySelector(targetSelect).innerHTML = '<option value="">loading data...</option>'

    let body = [{ id: '', value: 'Selecione um concelho' }]

    if (id) {
      body = await loadJson(`/${href}/${id}`).then(({ body }) => body)
    }

    fillSelect(targetSelect, body, (e) => {
      e.dispatchEvent(new Event('change'))
    })
  }
}

 

[Ivo Vicente]

Isto está dentro do tópico PHP vou dar ajuda com base num modelo que já usei.

Se falhar a validação do formulário copias os valores do $_POST para $_SESSION,

- Ao voltar para o formulário, dentro do formulário verificas se existem as váriaveis de sessão

- Se sim, pré-preenches os campos. Se forem selects, sabes o que estava selectionado consegues obter a lista e aplicar o selected

- Quando o formulário está todo ok, limpas as variaveis de sessão.

 

Assim por alto é um método funcional e que te pode resolver o problema, e não tens que fazer novas consultas ajax/fetch pelo javascript

Edited October 15, 2023 at 09:55 PM by Ivo Vicente