AmazonのProduct Advertising API利用サイトで商品検索ができない

Question

###前提・実現したいこと
Amazon の Product Advertising API を利用したCD情報サイト C LIFE MUSIC STORE（http://c-lifemusic.com/）を運営しています。Product Advertising API は取り込める商品情報の件数に制限があるため、あるアーティストについて欠けた商品があった場合は手動で商品情報を登録する仕組みになっています。具体的な手順は以下の通りです。

1. アルバムを追加したいアーティストの「編集」ボタンをクリックし、編集画面を開く

（以降の作業はユーザー登録が必要になります）

2. 「リストにないアルバムを追加する」ボタンをクリックし、アルバムの追加画面を開く

3. 追加したいアルバムがAmazon.co.jpで扱われているかどうか調べるため、アルバムタイトルを入力し、「Amazon.co.jpで検索」ボタンをクリックする

4. 扱われていれば、検索結果の中から該当する商品すべてを選択
5. オリジナル原盤発売日等の情報を入力し、登録する

ところが、この3のところの検索が機能しません。以下、検索ボタンをクリックしたとき、Chromeのデベロッパーツールに表示されるエラーメッセージを引用します。

###発生している問題・エラーメッセージ

Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught TypeError: Cannot read property 'value' of null
    at throwAmazonsearchReq (http://c-lifemusic.com/js/addalbum.js:9:129)
    at HTMLInputElement.onclick (http://c-lifemusic.com/edit/addalbum/?id=6100:50:174)
    throwAmazonsearchReq @ addalbum.js:9
    onclick @ ?id=6100:50

###該当のソースコード

http://c-lifemusic.com/js/addalbum.js より
var asin_list = [];
var bgc_selected = 'orange';
var bgc_notselected = '#eee';

function throwAmazonsearchReq(id){
	var errorText = 'エラーが発生しました。しばらくしてから再度お試しください。';
	$('amazon_container').innerHTML = ''
	asin_list = [];
	parms = 'type=amazonsearch' + '&id=' + id + '&title=' + $('id_name').value + '&csrfmiddlewaretoken=' + $('csrfmiddlewaretoken').value;
	new Ajax.Request('/ajax/', {
		method: 'get',
		asynchronous: true,
		parameters: parms,
		onSuccess:function(httpObj) {
			$('amazon_container').innerHTML = httpObj.responseText;
		},
		onFailure:function(){
			alert(errorText);
		}});
}
（以下略）

http://c-lifemusic.com/edit/addalbum/?id=6100 より
（以下、44行目から）
<form action="/edit/addalbum/?id=6100" method="post" id="albumform" onsubmit="return false;"><input type='hidden' name='csrfmiddlewaretoken' value='9MhtT9fwUAPqvxP2qDFPHzqY2Olgga9S' />
<table cellspacing="0" summary="アルバム情報">
<tr>
<td rowspan="6"><img id="album_img" src="/img/no_image_75.gif" alt="" width="75" height="75" />
<input type="hidden" name="image_url" id="image_url"></input></td>
<th>アルバムタイトル</th>
<td colspan="3"><input class="long" id="id_name" name="name" type="text" /><input type="button" onclick="throwAmazonsearchReq(6100);return false;" value="Amazon.co.jpで検索" /></td>
</tr>
（以下略）

Djangoテンプレートより上記該当部分を抜粋
<form action="/edit/addalbum/?id={{ artist.id }}" method="post" id="albumform" onsubmit="return false;">{% csrf_token %}
<table cellspacing="0" summary="アルバム情報">
<tr>
<td rowspan="6"><img id="album_img" src="/img/no_image_75.gif" alt="" width="75" height="75" />
<input type="hidden" name="image_url" id="image_url"></input></td>
<th>アルバムタイトル{{ album.name.errors }}</th>
<td colspan="3">{{ album.name }}<input type="button" onclick="throwAmazonsearchReq({{ artist.id }});return false;" value="Amazon.co.jpで検索" /></td>
</tr>

###試したこと
エラーが起きる前と後の Djangoテンプレートを比較すると、違いは formタグの後の {% csrf_token %} の有無のようなので、「csrf_token」でGoogle検索したところ、下記ページを発見。

http://docs.djangoproject.jp/en/latest/ref/contrib/csrf.html

この中に、{% csrf_token %} は「外部のサイトに対してリクエストを送るフォームについては使用すべきではありません」とあったのですが、Django、Pythonの知識に乏しいため、これ以上で手が出せないでいます。
それとも、それは無関係で Javascriptの問題でしょうか。

Answer 1

英語は赤点でしたが・・・
エラーメッセージを見る限りだと

404 出てます。

もうひとつは null から value プロパティを読むことができない。
コールスタック中に addalbum.js:9:129 がある。

で、９行目は
$('id_name').value
$('csrfmiddlewaretoken').value
と２か所 value を取ろうとしてるので、どちらかの $( string ) の結果が null なんでしょう。
$( string ) の戻り値を一度確認してください。

Comments

[Mr.Afternoon]

回答ありがとうございます。
404については、CSSの記述ミスが原因だったので修正しました。
初歩的な質問で申し訳ないのですが、「戻り値の確認」というのはどうすればいいのでしょうか。

[NOTEPAD]

alert とか window.console.log でプリントデバッグしてみたらどうでしょうか。
開発者ツールでブレークポイントを設定して止めてみた方がいいかもしれませんが。

[Mr.Afternoon]

console.log() でデバッグしてみようと思うのですが、() には何を入れればいいのでしょうか。試しに、id_name と csrfmiddlewaretoken を入れてみたところ、どちらも not defined でした。

[NOTEPAD]

なにを入れればいいのかは「確認したいもの」を入れたらいいですよ。

$('id_name') じゃなくて id_name を渡したら定義されてなくて当たり前だと思いますが。

$('id_name') を渡してその結果なら実際に $( string ) で未定義が返ってるのでしょう。

$ は何のライブラリ使ってるんでしょうか jQuery なら通常は id 指定の場合は # を頭につけますけど。