[Laravel] javascript로 페이지 이동없이 update구현하기

show페이지와 edit페이지를 나누는게 뭔가 불편함을 느껴서 합쳐보고자 생각한 기능이있다

1. show페이지에서 수정 버튼을 누른다

2. disable되어있던 input태그들이 disable = false 되면서 입력이 가능해진다

3. 그와 동시에 수정 버튼은 수정 완료 버튼으로 바뀌고 type도 submit으로 변경된다

4. 수정을 마치고 완료버튼을 누르면 show와edit페이지를 합치는 결과가 나온다

 

라는 가설로 진행한 기능이였다

show 화면

수정을 누른 화면(edit역할)

이렇게 input태그가 활성화되고 입력이가능해진다

 

하지만 이부분에서 문제가 발생했는데

js코드를 짜던중 

<script type="text/javascript">

  function edit(){
    var username = document.getElementById('username');
    var email = document.getElementById('email');
    var modify = document.getElementById('modify');

    username.disabled=false;
    email.disabled=false;
    username.focus();
    modify.innerText = '수정완료';
    modify.className = "-mt-2 text-md font-bold text-white bg-indigo-700 rounded-full px-5 py-2 hover:bg-indigo-900";
    modify.setAttribute('type','submit');
  };



</script>

이렇게 초기 코드를 구성하니 버튼이 눌림과 동시에 submit도 되어버리는 경우가 발생했고 이를 해결하기 위해 이것저것 알아보니 button을 누르고 js가 작동하면서 type이 submit으로 바뀌니 submit이 원클릭에 되어버리는 경우인거 같았다.

흐름이 이러하다고 생각했다

button클릭(type=button인 상태) -> js코드 작동(type=submit으로 바뀜) -> 버튼type에 따라 기능 작동

이런 순서여서 submit이 작동된다고 판단했고 type를 바꿔주기보단 onclick속성을 추가해서 변경하는 방법을 채용해봤다

<script type="text/javascript">

  function edit(){
    var username = document.getElementById('username');
    var email = document.getElementById('email');
    var modify = document.getElementById('modify');

    username.disabled=false;
    email.disabled=false;
    username.focus();
    modify.innerText = '수정완료';
    modify.className = "-mt-2 text-md font-bold text-white bg-indigo-700 rounded-full px-5 py-2 hover:bg-indigo-900";
    modify.setAttribute('onclick','update();');
  };
  function update(){
    var modify = document.getElementById('modify');
    modify.setAttribute('type','submit');
  }


</script>

이렇게 하니 문제가 해결되었다.