고수님들 &option= 이것을 지우고싶어요
본문
아래 라디오버튼을 누르면 기존 주소 끝에 A, B, C, 주소가 뭍는데 &option= 이것도 따라 붙습니다.
기존주소를 건드리지말고 끝에 A, B, C, 이것만 붙을 수 는 없나요?
<input type="radio" name="option" value="A" id="optionA" <?php if ($selectedOption === "A") echo "checked"; ?>>
<label for="optionA">A</label>
<input type="radio" name="option" value="B" id="optionB" <?php if ($selectedOption === "B") echo "checked"; ?>>
<label for="optionB">B</label>
<input type="radio" name="option" value="C" id="optionC" <?php if ($selectedOption === "C") echo "checked"; ?>>
<label for="optionC">C</label>
<script>
const options = document.getElementsByName("option");
options.forEach(function(option) {
option.addEventListener("change", function() {
const selectedValue = this.value;
if (selectedValue !== "") {
const baseUrl = window.location.href.split("?")[0];
const searchParams = new URLSearchParams(window.location.search);
searchParams.set("option", selectedValue);
const newUrl = baseUrl + "?" + searchParams.toString();
window.location.href = newUrl;
}
});
});
</script>
답변 5
작업하시는 페이지가 어디인가요?
option.addEventListener("change",
change보다는 click이 나아 보입니다.
현재 페이지를 알면
window.location.href를
Php로 지정하고 끝에 A~C만 붙여 줄 수 있습니다.
주소에 stx= <=== 이게 마지막 나오는 것이 맞다면 script내용 모두 삭제하고 다음 코드만 넣으세요
location.href = location.href +$('input[name=option]:checked').val();
<input type="radio" name="option" value="A" id="optionA" >
<label for="optionA">A</label>
<input type="radio" name="option" value="B" id="optionB">
<label for="optionB">B</label>
<input type="radio" name="option" value="C" id="optionC">
<label for="optionC">C</label>
<script>
const options = document.getElementsByName("option");
options.forEach(function(option) {
option.addEventListener("change", function() {
const selectedValue = this.value;
if (selectedValue !== "") {
const baseUrl = window.location.href.split("?")[0];
const searchParams = new URLSearchParams(window.location.search);
const newUrl = baseUrl + "?" + selectedValue.toString();
window.location.href = newUrl;
}
});
});
</script>
이렇게 하시면 됩니다.
!-->
<input type="radio" name="option" value="A" id="optionA" >
<label for="optionA">A</label>
<input type="radio" name="option" value="B" id="optionB">
<label for="optionB">B</label>
<input type="radio" name="option" value="C" id="optionC">
<label for="optionC">C</label>
<script>
const options = document.getElementsByName("option");
options.forEach(function(option) {
option.addEventListener("change", function() {
const selectedValue = this.value;
if (selectedValue !== "") {
const baseUrl = window.location.href.split("?")[0];
const searchParams = new URLSearchParams(window.location.search);
const newUrl = baseUrl + "?" + searchParams.toString()+selectedValue.toString();
window.location.href = newUrl;
}
});
});
</script>
으로 하시면 됩니다.
!-->
<?php
$selectedOption = isset($_REQUEST['stx']) == true ? $_REQUEST['stx'] : '';
?>
<input type="radio" name="option" value="A" id="optionA" <?php if ($selectedOption === "A") echo "checked"; ?>>
<label for="optionA">A</label>
<input type="radio" name="option" value="B" id="optionB" <?php if ($selectedOption === "B") echo "checked"; ?>>
<label for="optionB">B</label>
<input type="radio" name="option" value="C" id="optionC" <?php if ($selectedOption === "C") echo "checked"; ?>>
<label for="optionC">C</label>
<script>
const options = document.getElementsByName("option");
options.forEach(function(option) {
option.addEventListener("change", function() {
const selectedValue = this.value;
if (selectedValue !== "") {
const baseUrl = window.location.href.split("?")[0];
const searchParams = new URLSearchParams(window.location.search);
// searchParams.set("option", selectedValue);
searchParams.set("stx", selectedValue);
const newUrl = baseUrl + "?" + searchParams.toString();
window.location.href = newUrl;
}
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.