const events = ["change","focusout"]
let props = {}
let ar_checked = []
events.forEach((event)=>{
  document.querySelector("#ajax-contents").addEventListener(event,(e)=>{
      setProps()
      setValue()
      e.preventDefault
  })
})

function setProps(){
  const forms = document.getElementsByClassName("form-control")
  let prop
  ar_checked = []
  for(let form of forms){
    const name = form.name //選択フォームのnameプロパティ
    prop = name.replace(/^(\S+\[)(\S+)(\])$/g,"$2")      
    props[prop] = form.value
  }
}

async function setValue() {
  const response = await post('cities/search', { body: {q:props} })
  if (response.ok) {
    console.log("OK")
    let promise = response?.text; //jsonを格納
    //Promiseから値を呼び出す（※Promiseについては後述で補足）
    promise.then(data =>{
      if(data != ""){
        const content = JSON.parse(data).container
        const pager = JSON.parse(data).pager
        document.getElementById("ajax-response-wrapper").innerHTML = content
        document.getElementById("pager").innerHTML = pager
      }
      return false
    })    
  }
}
