2012-11-04 38 views
2

如何將輸入框(form name="form1")中的值回顯到輸入框(form name="form2"如何將輸入框(<form name =「form1」>)中的值回顯到輸入框(<form name =「form2」>)

我想出瞭如何在第一個窗體中回顯輸入內容以及如何使用div ..但我無法弄清楚如何從第一個窗體(form1)的輸入框中傳入inpus ..以第二種形式輸入到輸入框中(form2)。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
function FillBilling(f) { 
    f.billingname.value = f.shippingname.value; 
    f.billingcity.value = f.shippingcity.value; 
} 
function changeRadius1(){ 
    var name_input = document.getElementById('name_input').value; 
    document.getElementById('radius1').innerHTML = name_input; 
} 
function changeRadius2(){ 
    var city_input = document.getElementById('city_input').value; 
    document.getElementById('radius2').innerHTML = city_input; 
} 
</script> 

</head> 
<body> 
<b>Mailing Address FORM1</b><br><br> 
<form name="form1"> 
Name:<input type="text" name="shippingname" onkeyup="FillBilling(form1); changeRadius1()"> 
<br>City:<input type="text" name="shippingcity" onkeyup="FillBilling(form1); changeRadius2()"> 
<br><br> 
Name:<input type="text" id="name_input" class="name_input" name="billingname" onkeyup="FillBilling(form2)"><br> 
City:<input type="text" id="city_input" class="city_input" name="billingcity" onkeyup="FillBilling(form2)"> 
</form> 
<br> 
<P> 
<b>Billing Address FORM2</b><br><br> 
<form name="form2"> 
Name:<input type="text" id="name_input" class="name_input" name="billingname"><br> 
City:<input type="text" id="city_input" class="city_input" name="billingcity"> 
</form> 

<br><b>Billing Address TEXT</b><br><br> 
<div class="yourcode">Name: <span id="radius1"></span></div> 
<div class="yourcode">City: <span id="radius2"></span></div> 

</body> 
</html> 

我希望這不是一個愚蠢的問題..答案應該是明顯的..但我在JS的開頭..所以感謝您的幫助。

+0

備註:一個'id'在你的所有HTML文檔中必須是唯一的,這意味着你應該重新命名你的輸入'id's。 – sp00m

回答

1

我不是很確定你要完成什麼,但我想我可以幫助你:

當您在您的第二組字段的函數調用在Form1,FillBilling(窗口2)您正在調用您的FillBilling函數,而「f」是對form2的引用。 form2沒有名稱爲「shippingname」和「shippingcity」的輸入。這些正在返回undefined。

您需要重寫您的函數,以便訪問要更具體地修改的表單。

在編程時,爲了HTML的有效性和清晰度,您還應該嘗試不重用HTML名稱和ID。這些事情發生的結果。

0

下面是一個示例函數,用於將字段值從一個表單複製到另一個表單。如果它們都是text類型輸入並且具有相同的輸入名稱,它將只複製字段。

function copyForm(srcForm, destForm) { 
    var srcFields = srcForm.elements, destFields = destForm.elements, i, j; 
    for (i = 0; i < srcFields.length; i++) { 
    var srcField = srcFields[i]; 
    if (srcField.type && (srcField.type.toLowerCase() === 'text')) { 
     for (j = 0; j < destFields.length; i++) { 
     var destField = destFields[j]; 
     if (destField.type && (destField.type.toLowerCase() === 'text') && (destField.name === srcField.name)) { 
      destField.value = srcField.value; 
      break; 
     } 
     } 
    } 
    } 
} 

下面是一個例子使用複製基於所提供的HTML代碼form1form2。它會將billingnamebillingcity字段form1複製到form2的字段中。 formshippingnameshippingcity將不會被複制,因爲form2中沒有等效的一個。

var src, dest; 
src = document.getElementsByName('form1'); 
if (src.length) { 
    dest = document.getElementsByName('form2'); 
    if (dest.length) { 
    copyForm(src, dest); 
    } 
} 
相關問題