Jqueryのボタンから変数を渡す

Question

テーブルを持つモーダルボックスにフォームを作成しました。表の行をクリックすると、親ページの郵便住所フォームが入力されます。すべてが（StackOverflowの助けを借りて）すごく行き渡っていましたが、その後、住所用の2番目のボタンを追加する作業がありました。

私は2番目のボタンを追加し、同じフォームにリンクされている、今私は、最初のボタンが唯一の私が指定したフォームフィールドへの書き込みを行うように、変数を渡す方法が必要になり、第二ボタンのと同じ。

ご協力いただければ幸いです。

コード - JSフィドルの例は、 - http://jsfiddle.net/clintongreen/rc2Ky/

私はテーブルとモーダルボックスでフォームを作成しました。表の行をクリックすると、親ページのフォームが入力されます。テーブルと

モーダルボックス

<div id="modal_form" title="Address Search"> 
<form id="address_search"> 
<ul> 
    <li><label for="name">Search by street description</label> 
     <input type="text" name="street_description" id="street_description" /> 
     <input type="button" id="search_button" class="form_button" value="Search"></li> 
</ul> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
       <tbody><tr> 
       <td width="200px"><a href="#">Street</a></td> 
       <td width="200px"><a href="#">Suburb</a></td> 
       <td width="200px"><a href="#">City</a></td> 
       </tr> 
       <tr id="row1"> 
       <td class="address_street">Harambee Road</td> 
       <td class="address_suburb">Onerai</td> 
       <td class="address_city">Onerai Rural</td> 
       </tr> 
       <tr id="row2"> 
       <td class="address_street">Hutchinson Road</td> 
       <td class="address_suburb">Mt Wellington</td> 
       <td class="address_city">Auckland City</td> 
       </tr> 
       <tr id="row3"> 
       <td class="address_street">Kauri Road</td> 
       <td class="address_suburb">Westfordshire</td> 
       <td class="address_city">Palmerston North</td> 
       </tr> 
     </tbody></table><!-- /table#table-data --> 
    </form> 
</div><!-- /div#modal_form --> 

Javascriptのフィールドが移入され

<!-- TO OPEN THE MODAL BOX --> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#find_address').click(function(){ 
$('#modal_form').dialog('open'); 
}); //end click handler 
$('#find_address1').click(function(){ 
$('#modal_form').dialog('open'); 
}); //end click handler 
}); //end ready event 
</script> 

<!-- FOR FIRST BUTTON --> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#table-data tr').click(function() { 
     var curRowId = $(this).attr("id"); 
     $('#street_name').val($('#' + curRowId + ' td.address_street').text()); 
     $('#suburb').val($('#' + curRowId + ' td.address_suburb').text()); 
     $('#city').val($('#' + curRowId + ' td.address_city').text()); 
    $("#modal_form").dialog('close'); 
    }); 
    }); 
</script> 

<!-- FOR SECOND BUTTON --> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#table-data tr').click(function() { 
     var curRowId = $(this).attr("id"); 
     $('#street_name1').val($('#' + curRowId + ' td.address_street').text()); 
     $('#suburb1').val($('#' + curRowId + ' td.address_suburb').text()); 
     $('#city1').val($('#' + curRowId + ' td.address_city').text()); 
    $("#modal_form1").dialog('close'); 
    }); 
    }); 
</script> 

フォーム

<form id="profile"> 
<ul> 
<!-- FIRST BUTTON SECTION --> 
<li><label for="street_number">Street Number</label><input id="street_number" type="text" placeholder="Street Number" name="street_number" ><input type="button" class="form_button" id="find_address" value="Find Address"></li> 
<li><label for="street_name">Street Name</label><input id="street_name" type="text" placeholder="Street Name" name="street_name" disabled="disabled" ></li> 
<li><label for="suburb">Suburb</label><input id="suburb" type="text" placeholder="Suburb" name="suburb" disabled="disabled" ></li> 
<li><label for="city">City</label><input id="city" type="text" placeholder="City" name="city" disabled="disabled" ></li> 

<!-- SECOND BUTTON SECTION --> 
<li><label for="street_number">Street Number</label><input id="street_number" type="text" placeholder="Street Number" name="street_number" ><input type="button" class="form_button" id="find_address1" value="Find Address"></li> 
<li><label for="street_name1">Street Name</label><input id="street_name1" type="text" placeholder="Street Name" name="street_name1" disabled="disabled" ></li> 
<li><label for="suburb1">Suburb</label><input id="suburb1" type="text" placeholder="Suburb" name="suburb1" disabled="disabled" ></li> 
<li><label for="city1">City</label><input id="city1" type="text" placeholder="City" name="city1" disabled="disabled" ></li> 

<li><input type="submit" id="submit" value="Save"></li> 
</ul> 
</form> 

Answer 1

私はまた、テーブルのクラスを変更しなければならなかった、ボタンのクリックでTDのクラスを変更することでこの問題を解決するために管理。私が使用したコードは以下の通りです。

コード

<script type="text/javascript"> 
$(document).ready(function() { 
$('#find_address').click(function(){ 
$('#modal_form').dialog('open'); 
$('table#table-data_postal').attr('id', 'table-data'); 
$('td.address_street_postal').removeClass("address_street_postal").addClass("address_street"); 
$('td.address_suburb_postal').removeClass("address_suburb_postal").addClass("address_suburb"); 
$('td.address_city_postal').removeClass("address_city_postal").addClass("address_city"); 
$('td.address_code_postal').removeClass("address_city_postal").addClass("address_code"); 
$('label#suburb_search').css('display','none'); 
$('label#street_search').css('display','inline'); 
$('input#street_description').css('width','330px'); 
}); //end click handler 
$('#find_address_postal').click(function(){ 
$('#modal_form').dialog('open'); 
$('table#table-data').attr('id', 'table-data_postal'); 
$('td.address_street').removeClass("address_street").addClass("address_street_postal"); 
$('td.address_suburb').removeClass("address_suburb").addClass("address_suburb_postal"); 
$('td.address_city').removeClass("address_city").addClass("address_city_postal"); 
$('td.address_code').removeClass("address_code").addClass("address_code_postal"); 
$('label#suburb_search').css('display','none'); 
$('label#street_search').css('display','inline'); 
$('input#street_description').css('width','330px'); 
}); //end click handler 
}); //end ready event 
</script> 

Answer 2

2番目のボタンをクリックしていることがわかるように、各行に2番目のボタンがあり、それに応じて必要なアクションを実行する必要があります。今あなたがしているのは、各tr要素にクリックハンドラを付けることです。クラスsecondButtonの2番目のボタンがある場合、次のコードを試してみましょう。

//This code will attach a click event handler to the second button on each row 
$('#table-data tr .secondButton').click(function() { 
     var curRowId = $(this).closest('tr').attr("id"); 
     $('#street_name1').val($('#' + curRowId + ' td.address_street').text()); 
     $('#suburb1').val($('#' + curRowId + ' td.address_suburb').text()); 
     $('#city1').val($('#' + curRowId + ' td.address_city').text()); 
    $("#modal_form1").dialog('close'); 
    });