답변 1개
아래의 코드 참고를 해보세요..
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
.radio-group {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.radio-group label {
flex: 1;
text-align: center;
padding: 10px;
background-color: #f0f0f0;
cursor: pointer;
}
.radio-group input[type="radio"] {
display: none;
}
.radio-group input[type="radio"]:checked + span {
background-color: #0056b3;
color: white;
}
.input-group {
margin-bottom: 15px;
}
.phone-inputs {
display: flex;
gap: 10px;
}
.phone-inputs input {
flex: 1;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #0056b3;
color: white;
border: none;
cursor: pointer;
}
input, select {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
document.getElementById('registrationForm').addEventListener('submit', function(e) {
e.preventDefault();
var phone1 = document.getElementById('phone1').value;
var phone2 = document.getElementById('phone2').value;
var phone3 = document.getElementById('phone3').value;
var fullPhone = phone1 + '-' + phone2 + '-' + phone3;
// 여기서 fullPhone을 서버로 전송하거나 필요한 처리를 수행합니다.
console.log('Full Phone:', fullPhone);
// 폼 제출 로직...
alert('폼이 제출되었습니다. 전화번호: ' + fullPhone);
});
======================================
body {
font-family: Arial, sans-serif;
}
.container {
width: 300px;
margin: 0 auto;
}
.tab {
display: flex;
cursor: pointer;
}
.tab div {
flex: 1;
padding: 10px;
text-align: center;
background: #ddd;
}
.tab div.active {
background: #007bff;
color: white;
}
.form-group {
margin: 15px 0;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input[type="text"], .form-group input[type="tel"] {
width: calc(33.33% - 6px);
display: inline-block;
margin-right: 3px;
padding: 8px;
box-sizing: border-box;
}
.form-group input[type="text"]:last-child, .form-group input[type="tel"]:last-child {
margin-right: 0;
}
.checkbox-group {
display: flex;
align-items: center;
}
.checkbox-group input[type="checkbox"] {
margin-right: 10px;
}
.submit-btn {
background: #007bff;
color: white;
padding: 10px;
text-align: center;
cursor: pointer;
margin-top: 15px;
}
function toggleTab(tabName) {
document.querySelectorAll('.tab-option').forEach(el => el.classList.remove('active'));
if (tabName === 'personalRehab') {
document.querySelectorAll('.tab-option')[0].classList.add('active');
} else {
document.querySelectorAll('.tab-option')[1].classList.add('active');
}
}
function handleSubmit(event) {
event.preventDefault();
const phone1 = document.getElementById('phone1').value;
const phone2 = document.getElementById('phone2').value;
const phone3 = document.getElementById('phone3').value;
const fullPhoneNumber = `${phone1}-${phone2}-${phone3}`;
// Create a hidden input field to hold the full phone number
const hiddenPhoneInput = document.createElement('input');
hiddenPhoneInput.type = 'hidden';
hiddenPhoneInput.name = 'phone';
hiddenPhoneInput.value = fullPhoneNumber;
// Append the hidden input to the form
event.target.appendChild(hiddenPhoneInput);
// Submit the form
event.target.submit();
}
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인