We Keep Coding

Submit form data from selected radio button option only

I am working on a form where a user selects an option from radio buttons.
Then depending on option, a view of text fields appears. The user then inputs the required data and submits the form.
The options have different options and such data submitted should be different.
My challenge is how to submit only data from the selected radio button fields.
Anyone kindly help. Thank you
$(function () {
$('input[type="radio"]').on("click",function () {
$(".selections").hide(); // hide them all
if (this.value=="both") $(".selections").show(); // show both
else $("#"+this.value).show(); // show the one with ID=radio value
});
$('.selections input[type="checkbox"]').on("click",function() {
$(this).next().toggle(this.checked); // hide if not checked
});
$('.selections input[type="text"]').each(function() { // initialise
$(this).toggle($(this).prev().is(":checked"));
});
});
.selections { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" name="bill_type" value="percentage">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<!-- flat_rate radio button option -->
<div id="flat_rate" class="selections">
<input type="hidden" name="bill_type" value="flat_rate">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at">
</div>
<!-- variable radio button option -->
<div id="variable" class="selections">
<input type="hidden" name="bill_type" value="variable">
<div class="form-group">
<label for="limit" class="col-md-4 control-label">Limit</label>
<div class="col-md-4">
<input id="limit" placeholder="10" type="number" class="form-control" name="limit" autofocus>
</div>
</div>
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" name="send_at">
<br/>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>

You should try to use Bootstrap Tabs [imho], but if you want to go with radios...
Disabling all inputs will prevent them from being submited:
$("#div :input").attr("disabled", true);
or
$('#div').find('input, textarea, button, select').attr('disabled','disabled');
Code from this post

Firstly you don't need same field repeatedly.Try like this
$(function () {
$('input[name="billing"]').on('change',function(){
$('#bill_type').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" id="bill_type" name="bill_type" value="">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
After submission you can do whatever based on the value of bill_type.

Jquery: Loading some other URL on click of a button

I'm working on a project which includes some JQuery and AJAX. I have also implemented a feature of JQuery autofill. The code of form is shown below:
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-primary" id="addendt">Add Endorsement</button>
<button class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>
The Autofill is implemented on the textbox with ID "endtpolnumber". When I click on textbox with ID "findpolinfo" it should alert "asdf". But, on contrary it is redirecting me to to this URL
"http://localhost/dis/home/login?endtpolnumber=31-125&endtefffrom=&endtno=&endtamt=&endtdesc="
My JQuery code is as below:
$('#findpolinfo').click(function () {
alert('asdf');
});
Does anyone have any idea, where am i going wrong?
All positive suggestions are welcomed...
Thanks in advance...

Because the default behavoiur of <button> if it is inside form is submit
what's the standard behavior when < button > tag click? will it submit the form?
add
type="button"
if you don't want this button to submit form

Button has a default behaviour to submit the form. You can use return false to stop that form submission. Below is code to help you out. Just enter the policy number and click on the 'Find Policy' button:
$('#findpolinfo').click(function () {
alert($("#endtpolnumber").val());
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-primary" id="addendt">Add Endorsement</button>
<button class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>

based on W3schools if you want to add button just for clicking,You can add type="button" to your button attributes.just like this:
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button type="button" id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="button" class="btn btn-primary" id="addendt">Add Endorsement</button>
<button type="button" class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>

ng-disabled in Angular JS

I have a modal popup with few mandatory fields.
<form name="myReferenceDataForm" role="form" ng-submit="AddNewGroupMembershipReferenceRecord()" style="margin: 10px">
<div class="form-group row">
<div style="padding-bottom:5px; padding-top:5px; ">
<label for="GroupCode" class="col-sm-4 form-control-label">
Group Code <span class="requiredRed">*</span>
</label>
<div class="col-sm-8">
<input ng-model="referenceAddRecord.groupCode" class="form-control" id="GroupCode" type="text">
</div>
</div>
</div>
<div class="form-group row">
<div style="padding-bottom:5px; padding-top:5px; ">
<label for="GroupName" class="col-sm-4 form-control-label">
Group Name <span class="requiredRed">*</span>
</label>
<div class="col-sm-8">
<input ng-model="referenceAddRecord.groupName" id="GroupName" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group row">
<label for="GroupType" class="col-sm-4 form-control-label">Group Type </label>
<div class="col-sm-8">
<select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceAddRecord.populateGroupTypeDetails(selGroupType)" ng-options="groupType.value for groupType in referenceAddRecord.groupTypes track by groupType.id" ng-model="referenceAddRecord.groupType"></select>
</div>
</div>
Only above 3 fields groupName , groupCode are mandatory.
If they exist or not filled I want to have the submit button in the page disabled.
So , I did ...
<input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" ng-disabled="!(referenceAddRecord.groupCode || referenceAddRecord.groupName)|| addReferenceDataGroupNameExists() || addReferenceDataGroupCodeExists()" />
But it is not working . Even Only the whether the fields are filled that check is failing. Whenever I enter only one field it is getting enabled.
<input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" ng-disabled="!(referenceAddRecord.groupCode || referenceAddRecord.groupName)" />
What am I doing wrong here ?

Check out this plunker
<input type="submit" id="submit" ng-disabled="!(referenceAddRecord.groupName && referenceAddRecord.groupCode)" value="Submit" />

How can I take data from one an input field of one form and use it to populate the same input type in a different form using JQuery?

I have 2 sign up forms on a site. One is at the top that opens up in a modal and is a multi step form starting at the input for the email address.The code for that form is as follows:
<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="signup-updates-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="#" role="form" method="post" action="sendform.php">
<!-- #first_step -->
<div id="step_one">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"></p></span></button>
<h4 class="modalsignup-title white" id="signup-updates-modal">Step 1 / 4 Option Care Information Updates</h4>
</div>
<div class="modal-body">
<p>Want to learn more about Option Care home infusion services? Please provide your email address to receive custom information and updates.</p>
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label" for="email_address">Email Address</label>
<div class="col-md-9">
<input type="email" class="form-control" id="email_address" placeholder="Email" name="signupemail" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_one_submit">Next Step</button>
</div>
</div>
<!-- #second_step -->
<div id="step_two" data-toggle="tab">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"></p></span></button>
<h4 class="modalsignup-title white" id="signup-updates-modal">Step 2 / 4 Option Care Information Updates</h4>
</div>
<div class="modal-body">
<p>Please tell us more about yourself, so we can send you the right information.</p>
<div class="form-group">
<label class="control-label" for="step_two_radio">I am a:</label>
<!-- <label class="control-label" for="step_two_radio">I am a:</label> -->
<div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" placeholder="p2radio1" value="PatientOrCaregiver">
Patient or Caregiver</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="ClinicianOrReferrer">
Clinician or Referrer</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="PotentialRecruit">
Job Applicant</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios4" value="PharmaceuticalPartner">
Pharmaceutical Partner </label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios5" value="PayerPartner">
Payer Partner </label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios6" value="Other">
Other </label>
<div class="voffset2"></div>
<input type="text" class="form-control" id="other_I_a" placeholder="About you"/>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left btn-arrowback btn-previous" id="step_two_previous" >Previous Step</button>
<button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
<!-- <button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_two_submit">>Continue</button> -->
<button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_two_submit">Continue</button>
</div>
</div>
<!-- #THRID STEP -->
<!-- #THRID STEP -->
<div id="step_three">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"></p></span></button>
<h4 class="modalsignup-title white" id="signup-updates-modal">Step 3 / 4 Option Care Information Updates</h4>
</div>
<div class="modal-body">
<p>So that we can better assist you, please tell us if you are a current Option Care home infusion patient.</p>
<div class="form-group">
<label class="control-label" for="inputEmail3">Are you a current customer of Option Care?</label>
<div>
<label class="radio-inline">
<input type="radio" name="step_three_radio" id="inlineRadio1" value="CustomerYes">
Yes </label>
<label class="radio-inline">
<input type="radio" name="step_three_radio" id="inlineRadio2" value="CustomerNo">
No </label>
<label class="radio-inline">
<input type="radio" name="step_three_radio" id="inlineRadio3" value="NotApplicable">
Not applicable </label>
<!-- <input type="text" class="form-control" id="messagestep3" /> -->
<div id="messagestep3"></div>
</div>
<!-- <div id="messagestep3"></div> -->
</div>
<div class="form-group" id="step_three_b">
<label class="control-label" for="inputEmail4">You’ve indicated that you are not a current Option Care home infusion patient. Are you interested in using Option Care home infusion services in the next 6 months?</label>
<div>
<label class="radio-inline">
<input type="radio" name="step_three_radio2" id="inlineRadio4" value="InterestedYes">
Yes </label>
<label class="radio-inline">
<input type="radio" name="step_three_radio2" id="inlineRadio5" value="InterestedNo">
No </label>
<div id="messagestep3b"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left btn-arrowback btn-previous" id="step_three_previous" >Previous Step</button>
<button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_three_submit">Continue</button>
</div>
</div>
<!-- #fourth_step -->
<div id="step_four">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"></p></span></button>
<h4 class="modalsignup-title white" id="signup-updates-modal">Step 4 / 4 Option Care Information Updates</h4>
</div>
<div class="modal-body">
<p>Select the therapeutic service(s) you are interested in learning more about. Please check all that apply.</p>
<div class="form-group">
<label class="control-label" for="inputEmail3">If you are interested in a specific therapeutic area, please select it from the list below:</label>
<div>
<div class="checkbox">
<label>
<input type="checkbox" value="AntiInfectives">
Anti-infectives (AI)</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Bleeding disorders" name="step_four_checkbox">
Bleeding disorders (BD)</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="HeartFailure" name="step_four_checkbox">
Heart failure (HF)</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Immunoglobulin" name="step_four_checkbox">
Immunoglobulin (IG)</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="NutritionSupport" name="step_four_checkbox">
Nutrition support (NS)</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="OtherTherapeutic" name="step_four_checkbox">
Other </label>
<div class="voffset2"></div>
<input type="text" class="form-control" id="other_therapeutic_area" name="" value="" placeholder="So that we may better assist you, please tell us what services you are interested in."/>
</div>
<div id="step-four-input"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left btn-arrowback btn-previous" id="step_four_previous" >Previous Step</button>
<!-- <button type="button" class="btn btn-default pull-left" id="step_four_previous">Previous Step</button> -->
<button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-arrow btn-nextstep" id="step_four_submit" value="insert">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /Modal HTML -->
Next I have a second sign up form at the bottom of the site in a call to action that has only the email input and when the button is clicked opens the modal to the second form. The code for that form is a follows:
<form action="sendform.php" method="post" name="contact-form" class=" indline-form" id="main-contact-form">
<div class="form-group">
<input type="email" name="signupemail" id="bottomemail" required="required" class="form-control" value="Enter your email address..."
onfocus="(this.value == 'Enter your email address...') && (this.value = '')"
onblur="(this.value == '') && (this.value = 'Enter your email address...')" />
<button required="required" class="btn btn-arrow">Subscribe</button>
</div>
</form>
Now my question is is there any JQuery or javascript I can use to take the value from the bottom sign up form's email input field and place it into the signup form in the modal at the top's email input field?

Have you tried this?
jQuery('#email_address').val(jQuery('#bottomemail').val());

Fetch the value from first field
var value = $("#idFirstElement").val();
and set the value to second field.
$("#IdSecondField").val(value);

$('#email_address,#bottomemail').keyup(function() {
$('#email_address,#bottomemail').val($(this).val());
});
This will keep the two inputs in sync by copying the value of the one being changed to both of them.

Try:
$('#bottomemail').on('input', function() {
$('#email_address').val( this.value );
});
As in the demo below:
$(function() {
$('#bottomemail').on('input', function() {
$('#email_address').val( this.value );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="signup-updates-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="#" role="form" method="post" action="sendform.php">
<!-- #first_step -->
<div id="step_one">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"></p></span></button>
<h4 class="modalsignup-title white" id="signup-updates-modal">Step 1 / 4 Option Care Information Updates</h4>
</div>
<div class="modal-body">
<p>Want to learn more about Option Care home infusion services? Please provide your email address to receive custom information and updates.</p>
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label" for="email_address">Email Address</label>
<div class="col-md-9">
<input type="email" class="form-control" id="email_address" placeholder="Email" name="signupemail" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_one_submit">Next Step</button>
</div>
</div>
<!-- ........ -->
<!-- ........ -->
</div>
</div>
<form action="sendform.php" method="post" name="contact-form" class=" indline-form" id="main-contact-form">
<div class="form-group">
<input type="email" name="signupemail" id="bottomemail" required="required" class="form-control" value="Enter your email address..."
onfocus="(this.value == 'Enter your email address...') && (this.value = '')"
onblur="(this.value == '') && (this.value = 'Enter your email address...')" />
<button required="required" class="btn btn-arrow">Subscribe</button>
</div>
</form>

I like Skymt's idea of using keyup, but to give my 2 cents worth, here's what I was talking about in my comments on the question. I've used the click of a button to show functionality you could do as Peterson say's and use blur:
HTML:
<form action="">
<label for="">Input 1</label><input id="input1" type="text">
<button id="trigger">Trigger</button>
</form>
<form action="">
<label for="">Input 2</label><input id="input2" type="text">
</form>
jQuery:
$(document).ready(function(){
$('#trigger').on('click', function(){
var value = $('#input1').val();
$('#input2').val(value);
return false;
});
});
Fiddle - https://jsfiddle.net/dg8u3ng1/

Post from form submit is empty if input values from jQuery

I have a form where values may be given manually, or from a a predefined set from a dropdown.
When the dropdown is used. The values are filled with $.val(). When the from is submitted, the post has no parameters.
My HTML for the form:
<form class="form-horizontal" role="form" action="/android/test/connection/form/" method="post">
<div class="control-group has-feedback">
<label for="name" class="control-label">Servernaam</label>
<div class="controls">
<input type="text" disabled="disabled" id="name" name="name" value="" />
</div>
</div>
<div id="ipAddress-row" class="control-group error">
<label for="ipAddress" class="control-label">IP adres</label>
<div class="controls">
<input type="text" id="ipAddress" name="ipAddress" value="" />
</div>
</div>
<div id="tcpPort-row" class="control-group error">
<label for="tcpPort" class="control-label">Poort</label>
<div class="controls">
<input type="text" id="tcpPort" name="tcpPort" value="" />
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn">Reset</button>
</div>
</div>
</form>
and the dropdown
<div id="serverDropdown" class="offset1 btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span>Known Servers</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li role="presentation">
<a role="menuitem" href="#" tabindex="-1">Server 1</a>
<input type="hidden" name="ipAddress" value="127.0.0.1" />
<input type="hidden" name="tcpPort" value="8600" />
<input type="hidden" name="protocol" value="2" />
</li>
</ul>
</div>
And the javascript for filling the input:
$('#serverDropdown ul li a').click(function() {
var item, inputs;
removeErrors();
item = $(this).parent();
$('#name').val($(this).text());
$('#ipAddress').val($(item).find('input[name=ipAddress]').val());
$('#tcpPort').val($(item).find('input[name=tcpPort]').val());
$('#protocol').val($(item).find('input[name=protocol]').val());
});