Passing a variable from a button in Jquery

Question

I created a form in a modal box with a table. When you click on a table row it populates a postal address form on the parent page. Everything was going swimmingly (with the help of StackOverflow) but then I got the task of adding a second button for a street address.

I have added the second button and linked it to the same form, now I need a way to pass a variable so the first button only writes to the form fields I specify, and the same for the second button.

Any help will be appreciated.

The code - JS Fiddle example - http://jsfiddle.net/clintongreen/rc2Ky/

I have created a form in a modal box with a table. When you click on a table row it populates a form on the parent page.

Modal Box with table

<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 where the fields are populated

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

ShankarSangoli · Accepted Answer · 2011-08-22 05:32:46Z

2

You should have a second button on each row so that you will know you are clicking on second button and then you can take the required action accordingly. Now what you are doing is attaching a click handler on each tr element. Let say you have a second button with class secondButton you can try the below code.

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

answered Aug 22, 2011 at 5:32

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Clinton Green Over a year ago

Hi Shankar, thanks but adding buttons to the table row is unfortunately not an option. I need it to activate from the click on the <tr> Any thoughts on passing a variable from the button click to make it know where it should write the data? Cheers

ShankarSangoli Over a year ago

In that case you cannot differentiate between 2 clicks on the same row.

Clinton Green Over a year ago

Hi, sorry if I'm being a pain but what I want to do is open modal box with button#1, and update fields only in form#1, this modal will close on click.But if I click button#2 I want to open the same modal but update fields only in form#2. Please let me know if this is not possible, thanks for all your effort, cheers

ShankarSangoli Over a year ago

So you mean you have these 2 buttons on each row?

Clinton Green Over a year ago

Hi, no the buttons are on the parent form where the fields are populated. I have a button for street address and another for postal address. When I click the button it opens a modal dialog with the table inside. When I click the table row, it changes the value of the text fields in the parent form. Thanks

|

Clinton Green · Accepted Answer · 2011-08-23 20:51:30Z

I managed to solve this by changing the classes of the td with the button click, I also had to change the class of the table. The code I used is below.

The Code

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

Collectives™ on Stack Overflow

Passing a variable from a button in Jquery

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related