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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何創建一個提交按鈕,在 URL 上附加一個值并在提交后轉到該 URL?

如何創建一個提交按鈕,在 URL 上附加一個值并在提交后轉到該 URL?

月關寶盒 2023-09-21 16:21:18
因此,基本上,要求是用戶在文本字段中輸入一個值,然后單擊“提交”后,他將被重定向到具有基于其輸入值的 URL 的頁面,例如:用戶輸入:測試點擊提交后就變成了一個URL: http: //test.example.com然后重定向到該 URL我一直在嘗試使用以下代碼:<script>    function resetId(){  var idInput = document.getElementById("id");  var suffix=".example.com";            alert("Value before submit:" + idInput.value);}</script><form action="#" method="post" onsubmit="resetId();return false" >    <input type="text" name="id" value="domain" id="id"><br>    <input type="submit"></form>我能夠將其附加為后綴,但隨后我也感到困惑,因為這是 URL,我需要整個內容,所以我認為有更好的方法來實現這一點,而不是做我已經做的事情。抱歉,我是編碼新手,并且仍在學習新概念。
查看完整描述

2 回答

?
猛跑小豬

TA貢獻1858條經驗 獲得超8個贊

有很多方法可以實現它。

利用模板字符串和提示的單行方法(創建一個彈出窗口,提示用戶輸入某些內容)。

window.location.replace(`http://${prompt('Input:')}.example.com`)

使用形式及其onsubmit屬性(您的方法)。請注意,對于 ES6,請使用let或const而不是var

function resetId(){

? ? const idInput = document.getElementById("id");

? ? const url = `http://${idInput.value}.example.com`;

? ? alert("Value before submit: " + url);

? ? window.location.replace(url);

}

<form action="#" method="post" onsubmit="resetId();" >

? ? <input type="text" name="id" value="domain" id="id">

? ? <input type="submit">

</form>

一種不使用表單而是使用按鈕的方法。

// Same as above

function resetId(){

? ? const idInput = document.getElementById("id");

? ? const url = `http://${idInput.value}.example.com`;

? ? alert("Value before submit: " + url);

? ? window.location.replace(url);

}

<div>

? ? <label for="id">Input:</label>

? ? <input type="text" name="id" value="domain" id="id">

</div>

<button onclick="resetId()">submit</button>

注意:不要<br />在表單中使用新行,而是考慮對每行使用<label>并<input>包裹在<div>如下所示的內容中:


<div>

? ? <label for="something">Something:</label>

? ? <input type="text" name="something" id="something" />

</div>


查看完整回答
反對 回復 2023-09-21
?
MM們

TA貢獻1886條經驗 獲得超2個贊

只需替換這行代碼

<form action="#" method="GET" onsubmit="resetId();return false" >


查看完整回答
反對 回復 2023-09-21
  • 2 回答
  • 0 關注
  • 139 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號