首頁猿問如何使用 JavaScript...

如何使用 JavaScript 函數根據單選按鈕選擇使我的表單提交按鈕打開不同的 URL？

JavaScript

慕村9548890 2023-03-18 17:34:30

我是 JavaScript 的新手，如果這真的很簡單，我很抱歉......我想要完成的事情：有一個包含 10 個不同單選按鈕選項的表單。單擊“提交”按鈕時，應根據用戶的選擇將用戶重定向到新的 URL。這是我的 HTML 表單：<form onsubmit="myFunction()" class="final_question"> <div class="question-container"> <div class="form-box first-answer"> <label for="Option1">Option 1</label> <input type="radio" id="Option1" name="option"> </div> <div class="form-box second-answer"> <label for="Option2">Option 2</label> <input type="radio" id="Option2" name="option"> </div> <div class="form-box third-answer"> <label for="Option3">Option 3</label> <input type="radio" id="Option3" name="option"> </div> <div class="form-box fourth-answer"> <label for="Option4">Option 4</label> <input type="radio" id="Option4" name="option"> </div> <div class="form-box fifth-answer"> <label for="Option5">Option 5</label> <input type="radio" id="Option5" name="option"> </div> <div class="form-box sixth-answer"> <label for="Option6">Option 6</label> <input type="radio" id="Option6" name="option"> </div> <div class="form-box seventh-answer"> <label for="Option7">Option 7</label> <input type="radio" id="Option7" name="option"> </div> <div class="form-box eighth-answer"> <label for="Option8">Option 8</label> <input type="radio" id="Option8" name="option"> </div> <div class="form-box ninth-answer"> <label for="Option9">Option 9</label> <input type="radio" id="Option9" name="option"> </div> <div class="form-box tenth-answer"> <label for="Option10">Option 10</label> <input type="radio" id="Option10" name="option"> </div> <div class="form-box submit-button"> <input type="submit" class="final_question_submit" id="mysubmit"> </div> </div></form>

查看完整描述

3 回答

互換的青春

TA貢獻1797條經驗獲得超6個贊

表單與元素名稱一起使用

const

direction =

{

Option1: 'https://www.google.com"',

Option2: 'https://facebook.com',

Option3: 'https://www.instagram.com',

Option4: 'https://www.twitter.com',

Option5: 'https://www.stackoverflow.com',

Option6: 'https://www.w3cschools.com',

Option7: 'https://www.freecodecamp.org',

Option8: 'https://www.edabit.com',

Option9: 'https://www.scrimba.com"',

Option10: 'https://www.javascript.com'

}

, myForm = document.getElementById('my-form')

;

myForm.onsubmit=e=>

{

e.preventDefault()

if (myForm.option.value)

document.location = direction[ myForm.option.value ]

}

label, button {

display: block;

float: left;

clear: both;

width: 7em;

margin: .5em;

}

input[type=radio] {

float: right;

}

<label> Option 1 <input type="radio" name="option" value="Option1" > </label>

<label> Option 2 <input type="radio" name="option" value="Option2" > </label>

<label> Option 3 <input type="radio" name="option" value="Option3" > </label>

<label> Option 4 <input type="radio" name="option" value="Option4" > </label>

<label> Option 5 <input type="radio" name="option" value="Option5" > </label>

<label> Option 6 <input type="radio" name="option" value="Option6" > </label>

<label> Option 7 <input type="radio" name="option" value="Option7" > </label>

<label> Option 8 <input type="radio" name="option" value="Option8" > </label>

<label> Option 9 <input type="radio" name="option" value="Option9" > </label>

<label> Option 10 <input type="radio" name="option" value="Option10"> </label>

<button type="submit">submit</button>

</form>

反對回復 2023-03-18

天涯盡頭無女友

TA貢獻1831條經驗獲得超9個贊

使用value=""選項屬性
停止使用內聯on*=""屬性，就像您（希望）不使用內聯style=""屬性一樣。它很難調試，JS 應該只放在一個地方，那就是你的腳本標簽或文件。
查看文檔位置
看看 Event.preventDefault()
不要for=""在不需要的時候使用。
:checked在JS中使用偽選擇器.querySelector()

const EL_finalForm = document.querySelector("#final_question");

EL_finalForm.addEventListener("submit", (ev) => {

? ev.preventDefault();

? const EL_checked = EL_finalForm.querySelector('input[name="option"]:checked');

? if (!EL_checked) return alert("Select an option");

? document.location = EL_checked.value;

});

? <div class="question-container">

? ? <label class="form-box">

? ? ? ? <span>Option 1</span>

? ? ? ? <input type="radio" value="https://www.google.com" name="option">

? ? </label>

? ? <label class="form-box">

? ? ? ? <span>Option 2</span>

? ? ? ? <input type="radio" value="https://www.facebook.com" name="option">

? ? </label>

? ? <label class="form-box">

? ? ? ? <span>Option 3</span>

? ? ? ? <input type="radio" value="https://www.instagram.com" name="option">

? ? </label>

? ? <label class="form-box">

? ? ? <input type="submit" class="final_question_submit">

? ? </label>

? </div>

</form>

反對回復 2023-03-18

米琪卡哇伊

TA貢獻1998條經驗獲得超6個贊

嘗試使用：

window.open("https://your.url")

而不是使用：

document.getElementById('mysubmit').href = "https://www.javascript.com";

如果你想在同一個選項卡中打開窗口：

window.open("https://www.youraddress.com","_self")

反對回復 2023-03-18

3 回答
0 關注
145 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 JavaScript 函數根據單選按鈕選擇使我的表單提交按鈕打開不同的 URL？

如何使用 JavaScript 函數根據單選按鈕選擇使我的表單提交按鈕打開不同的 URL？

3 回答

添加回答

如何使用 JavaScript 函數根據單選按鈕選擇使我的表單提交按鈕打開不同的 URL？

如何使用 JavaScript 函數根據單選按鈕選擇使我的表單提交按鈕打開不同的 URL？