Передача переменной из кнопки в Jquery

Question

Я создал форму в модальном поле с таблицей. При нажатии на строку таблицы она заполняет форму почтового адреса на родительской странице. Все шло гладко (с помощью StackOverflow), но потом я получил задачу добавить вторую кнопку для адреса улицы.

Я добавил вторую кнопку и связал ее с той же формой, теперь мне нужен способ передать переменную, чтобы первая кнопка записывала только поля, указанные мной, и то же самое для второй кнопки.

Любая помощь будет оценена.

Код - пример JS Fiddle - 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 -->

1020 * 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

У вас должна быть вторая кнопка в каждом ряду, чтобы вы знали, что нажимаете вторую кнопку, и затем вы можете предпринять необходимые действия соответственноТеперь, что вы делаете, это прикрепляете обработчик кликов к каждому элементу tr.Допустим, у вас есть вторая кнопка с классом secondButton, вы можете попробовать следующий код:

 //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');
    }); 

Answer 2

Мне удалось решить эту проблему, изменив классы тд с помощью нажатия кнопки, мне также пришлось изменить класс таблицы. Код, который я использовал ниже.

Код

<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>