[Form] 이메일주소 직접입력 / 선택 Option

#jQuery #이메일주소직접입력/선택 #이메일주소option

 

 

직접입력을 선택하면 select박스 우측에 text 인풋박스가 생성됩니다.

name값은 직접입력일 경우 text박스에 email[1]이 부여되며

다시 이메일을 선택하게되면 text박스가 사라지면서 select박스에 name값이 부여되는 방식입니다.

 

HTML

            <div class="frm-ipt-box frm-email-ipt-box">
              <div class="frm-ipt-line">
                <h3 class="ipt-tit frm-required">
                  이메일
                </h3>
                <div class="ipt-smallbox email-line">
                  <div class="front">
                    <input type="text" name="email[0]" class="n-ipt" required maxlength="30">
                    <span>@</span>
                  </div>
                  <div class="back" id="email_back">
                    <select name="email[1]" id="email_1" required class="n-ipt">
                      <option value="naver.com">naver.com</option>
                      <option value="hanmail.net">hanmail.net</option>
                      <option value="hotmail.com">hotmail.com</option>
                      <option value="nate.com">nate.com</option>
                      <option value="yahoo.co.kr">yahoo.co.kr</option>
                      <option value="empas.com">empas.com</option>
                      <option value="dreamwiz.com">dreamwiz.com</option>
                      <option value="freechal.com">freechal.com</option>
                      <option value="lycos.co.kr">lycos.co.kr</option>
                      <option value="korea.com">korea.com</option>
                      <option value="gmail.com">gmail.com</option>
                      <option value="hanmir.com">hanmir.com</option>
                      <option value="paran.com">paran.com</option>
                      <option value="text">직접입력</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>

 

jQuery

$(document).ready(function() {
  $('#email_1').change(function(){
    $("#email_1 option:selected").each(function () {
      if($(this).val()== 'text'){ 
        // 직접입력
        if($("#email_1_text").length === 0){
          $('#email_1').removeAttr('name required');
          $('#email_back').append('<input type="email" name="email[1]" class="email-txt n-ipt" id="email_1_text" maxlength="50" required>');
          $("#email_1_text").focus();
        }
      }else{ 
        $("#email_1_text").remove();
        $('#email_1').attr('name', 'email[1]');
      }
    });
  });
});

 

 

CSS

.frm-ipt-box .frm-ipt-line{
  display: flex;
  align-items: center;
  gap: 12px;
}
.frm-ipt-box .ipt-tit{
  width: 120px;
}
.frm-ipt-box .ipt-tit > span{
  font-size: 20px;
  font-weight: normal;
  letter-spacing: -0.8px;
  color: rgb(0, 0, 0);
  position: relative;
}
.frm-required::after{
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: rgb(230, 0, 18);
  border-radius: 100%;
  position: absolute;
  top: 0;
  right: -5px;
}
.frm-ipt-box .ipt-smallbox{
  width: calc(100% - 132px);
}
.n-ipt{
  width: 100%;
  background-color: rgb(248, 248, 248);
  outline: none;
  border: none;
  padding: 23px 37px;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: -0.8px;
  text-align: left;
  color: rgb(0, 0, 0);
}
.frm-ipt-box .ipt-smallbox.email-line{
  display: flex;
  gap: 13px;
  align-items: center;
  flex-wrap: wrap;
}
.frm-ipt-box .ipt-smallbox.email-line .front{
  width: 430px;
  position: relative;
}
.frm-ipt-box .ipt-smallbox.email-line .front .n-ipt{
  padding-right: 90px;
}
.frm-ipt-box .ipt-smallbox.email-line .front span{
  position: absolute;
  top: 50%;
  right: 62px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.8px;
  color: rgb(143, 143, 143);
}
.frm-ipt-box .ipt-smallbox.email-line .back{
  display: flex;
  align-items: center;
  gap: 10px;
}
.frm-ipt-box .ipt-smallbox.email-line .back .n-ipt{
  width: 219px;
}