2016-10-03 9 views
-1

<input>の値を別の値にコピーしようとしました。JQueryが1入力から別の入力にコピーできません

これはJSFiddleで動作しますが、ローカルサーバーで試しても機能しません。

何が間違っていますか?

https://jsfiddle.net/1emrxsLw/

JS:完全なHTML

$('#do').click(function() { 
    $('#three').val($('#one').val()); 
}); 

$('#four').keyup(function() { 
    $('#six').val($('#four').val()); 
}); 

$('#seven').blur(function() { 
    $('#nine').val($('#seven').val()); 
}); 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<title>Untitled 1</title> 
</head> 

<body> 
<h1>Button Click</h1> 
<form id="form1"> 
    <input id='one' type='text' /> 
    <input id='two' type='text' /> 
</form> 

<form id="form2"> 
    <input id='three' type='text' /> 
</form> 

<input type='button' id="do" value="Copy" /> 

<h1>Insta-Copy(TM)</h1> 
<form id="form1"> 
    <input id='four' type='text' /> 
    <input id='five' type='text' /> 
</form> 

<form id="form2"> 
    <input id='six' type='text' /> 
</form> 



<h1>On Blur</h1> 
<form id="form1"> 
    <input id='seven' type='text' /> 
    <input id='eight' type='text' /> 
</form> 

<form id="form2"> 
    <input id='nine' type='text' /> 
</form> 
</body> 

<script type="text/javascript"> 
$('#do').click(function() { 
    $('#pDate1').val($('#fdatea').val()); 
}); 

$('#four').keyup(function() { 
    $('#six').val($('#four').val()); 
}); 

$('#seven').blur(function() { 
    $('#nine').val($('#seven').val()); 
}); 
</script> 

</html> 
+0

あなたが使用して ' '$( '#do')の'#three'ではなく '#pDate1'をクリックしてください。click()' –

+0

あなたのフィドルはうまく見えます。 –

+0

@Mosheが言及しているエラーとは別に、HTMLにはさらに多くのエラーがあります。スクリプト要素は、頭部または体内でのみ発生する可能性があります。フォーム要素にはアクション属性が必要です。 Doctypeの選択によって引き起こされるいくつかのエラー –

答えて

2

まず、idはそのページに一意であると仮定したHTMLページ内の属性、あなたが持つことができませんページ内に複数のID値があります。例えば:

<form id="form1"> 
    <input id='four' type='text' /> 
    <input id='five' type='text' /> 
</form> 

と:

<form id="form1"> 
    <input id='seven' type='text' /> 
    <input id='eight' type='text' /> 
</form> 

フォームは、同一のID値を持ち、それは悪い習慣です。

第2に、あなたは実際に使用しているjavascriptファイルに投稿しましたか?

私はあなたのための最初のjsスクリプトテスト:

$('#do').click(function() { 
    $('#three').val($('#one').val()); 
}); 

$('#four').keyup(function() { 
    $('#six').val($('#four').val()); 
}); 

$('#seven').blur(function() { 
    $('#nine').val($('#seven').val()); 
}); 

正常に動作します。しかし

、それはのように、存在しないIDの値を参照するので、あなたが仕事をしませんHTMLページの最下部に掲載秒のjsファイル:#pDate1#fdatea

関連する問題