單選按鈕隱藏和顯示形式內容

我願在此基礎上建立國家登記表。默認地址格式爲默認輸入可見當客戶點擊的非英國單選按鈕，然後自動隱藏英國的形式和oppen非英國地址形式單選按鈕隱藏和顯示形式內容

我想我需要使用JavaScript或JQuery的實現此功能。

任何人都可以給我這個功能的建議。如果您認爲我的問題不可接受，請不要降低我的費率。如果你不喜歡，我可以刪除我的問題。

這裏是我的表單代碼

<form action="sent.php" name="form1" method="post"> 
 
    Name 
 
    <input type="text" name="name" /> 
 
    <br />UK 
 
    <input type="radio" name="from" value="UK"> 
 
    <br />Address Line 1 
 
    <input type="text" name="ad1" /> 
 
    <br />Address Line 2 
 
    <input type="text" name="ad2" /> 
 
    <br />Town 
 
    <input type="text" name="town" /> 
 
    <br />Post Code 
 
    <input type="text" name="post_code" /> 
 
    <br />EU 
 
    <input type="radio" name="from" value="UK"> 
 
    <br />Address Line 1 
 
    <input type="text" name="ad1" /> 
 
    <br />Address Line 2 
 
    <input type="text" name="ad2" /> 
 
    <br />Town 
 
    <input type="text" name="town" /> 
 
    <br />Post Code 
 
    <input type="text" name="post_code" /> 
 
    <br />Country 
 
    <input type="text" name="post_code" /> 
 
    <br /> 
 
</form>

來源

2011-11-01 Muhammed

我的廣告老虎機將開始您的JavaScript或jQuery功能，並回到StackOverflow當你有一個具體的問題。 –

你可以用除了在兩個不同的div的單選按鈕的所有輸入元素，因此你可以捕捉的單選按鈕和顯示更改事件相應地隱藏兩個div。

來源

2011-11-01 15:15:43

我覺得DIV應該會更好感謝您的建議 – Muhammed

我不認爲你需要顯示或隱藏一定的元素作爲表單元素似乎是兩個「形式」一樣，認爲：

<form action="sent.php" name="form1" method="post"> 

Name <input type="text" name="name" /><br/> 
UK <input type="radio" name="from" value="UK" >/EU <input type="radio" name="from" value="EU" ><br /> 

Address Line 1 <input type="text" name="ad1" /> <br /> 
Address Line 2 <input type="text" name="ad2" /> <br /> 
Town <input type="text" name="town" /> <br /> 
Post Code <input type="text" name="post_code" /> <br /> 

</form>

然後當你的「從要求「參數，你會知道他們來自哪個國家？

來源

2011-11-01 15:17:13

窗體很安靜很大這裏只是顯示了表格的一部分 – Muhammed

好的，下次可能會更具體一些，就像你添加了一個閉合窗體標籤:) –

您可以添加一個類來表示哪些元素是在英國的住址元素，哪些是歐盟或作爲ELODIE佩蒂特，回答他們包裹在一個div，然後顯示或隱藏取決於選中了哪個radion按鈕。
這裏是一個JSFiddle使用後一選項。

來源

2011-11-01 15:24:36

我發現它簡單的解決方案使用jQuery

與jQuery支持

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

下面是javascript代碼

$(document).ready(function() { 
    $("input[name$='from']").click(function() { 
     var test = $(this).val(); 
     $("div.desc").hide(); 
     $("#c" + test).show(); 
    }); 
}); 
</script>

這裏與格化膿的HTML代碼

<form action="sent.php" name="form1" method="post"> 
<label>UK <input type="radio" name="from" value="1" ></label><br /> 
<label>EU <input type="radio" name="from" value="2" ></label><br /> 
<div id="c1" class="desc"> 
Name <input type="text" name="name" /> <br /> 
Address Line 1 <input type="text" name="ad1" /> <br /> 
Address Line 2 <input type="text" name="ad2" /> <br /> 
Town <input type="text" name="town" /> <br /> 
Post Code <input type="text" name="post_code" /> <br /> 
</div> 
<div id="c2" class="desc" style="display:none;"> 
Address Line 1 <input type="text" name="ad1" /> <br /> 
Address Line 2 <input type="text" name="ad2" /> <br /> 
Town <input type="text" name="town" /> <br /> 
Post Code <input type="text" name="post_code" /> <br /> 
Country <input type="text" name="post_code" /> <br /> 
</div> 
</form>

來源

2011-11-02 10:09:39 Muhammed

單選按鈕隱藏和顯示形式內容

回答

相關問題