I need help with a code. Apparently, it seems like a simple problem. I want to make a script so that when the user clicks the button, it shows the accordion. I was even able to write something that worked, but I wanted to open an accordion for each card separately. I think it's the "this" tag, but the problem is that ".find" doesn't find the accordion because it's not in the same group as the button.
See my code, you will understand better.
$('#fuelAccordion').click(function() {
$(this).find('.cardAccordion').slideToggle('show');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card fuelCard">
<div class="flex">
<div class="col">
<div class="flex">
<div>
<i class="fas fa-angle-down pointer" id="fuelAccordion"></i>
</div>
</div>
</div>
</div>
<div class="cardAccordion">
<div class="flex">
<div class="inputGrid">
<div>
<label for="placa">Litros</label>
<select class="form-control">
<option value="5">5 Lts</option>
</select>
</div>
<div>
<label for="placa">Valor total</label>
<input type="text" class="form-control" value="R$38,46" disabled />
</div>
</div>
<button class="btn btn-primary">Adicionar</button>
</div>
</div>
</div>
You need to use parents because this not find .cardAccordion inside #fuelAccordion
$('#fuelAccordion').click(function () {
$(this).parents('.fuelCard').find('.cardAccordion').slideToggle('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card fuelCard">
<div class="flex">
<div class="col">
<div class="flex">
<div>
<i class="fas fa-angle-down pointer" id="fuelAccordion">Test</i>
</div>
</div>
</div>
</div>
<div class="cardAccordion">
<div class="flex">
<div class="inputGrid">
<div>
<label for="placa">Litros</label>
<select class="form-control">
<option value="5">5 Lts</option>
</select>
</div>
<div>
<label for="placa">Valor total</label>
<input type="text" class="form-control" value="R$38,46" disabled />
</div>
</div>
<button class="btn btn-primary">Adicionar</button>
</div>
</div>
</div>
Related
I Made a switch to toggle between 2 contact forms. Everytime when using the button, the second form jumps.
Take a look here:
https://imgur.com/G4kGqjl
Here is my js:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
$("#mail-form, #phone-form").fadeToggle();
});
And here my HTML:
<div class="div_switch">
<label>
<h1 class="switch_text">Email</h1>
</label>
<label class="switch">
<input name="checkbox" type="checkbox" value="checkbox">
<span class="slider round"></span>
</label>
<label>
<h1 class="switch_text">Rückruf</h1>
</label>
</div>
<div id="mail-form" class="mail-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="exampleFormControlTextarea1"></label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Deine Nachricht..."></textarea>
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden</button>
</div>
</form>
</div>
<div id="phone-form" class="phone-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden <span><i class="fas fa-arrow-right"></i></span></button>
</div>
</form>
</div>
I tried a couple of things. Setting the display of the parent div to absolute and some other css stuff i found on the webs but cant remember. But nothing helped.
I would really appreciate some help.
Thanks in advance!!
You should separate both forms and set a callback on your fadetoggle function (there's a completion event, use that to your favor). Try something like:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
if($("#mail-form").is(':visible')){
$("#mail-form").fadeToggle(function(){
$("#phone-form").fadeToggle();
});
} else {
$("#phone-form").fadeToggle(function(){
$("#mail-form").fadeToggle();
});
}
});
Also, check out the api:
http://api.jquery.com/fadetoggle/
I would go with #Mauricio Cárdenas' answer, but if you absolutly must have them fade at the same time, you can do this:
<style>
#parentDiv{position:relative}
#mail-form, #phone-form{position:absolute;top:0}
</style>
<div ID="parentDiv">
<div id="mail-form" class="mail-form">
//Your form code
</div>
<div id="phone-form" class="phone-form">
//Your form code
</div>
</div>
This sets both forms to absolute and places them at the same position. Adding the parent div set to relative assures the forms position won't be set by the body.
Getting a HTML select value and and input value from form submit ,
in here i get only undefined for the select value, and gives error on
Cannot read property 'target' of undefined
at RightcomponentComponent.push../src/app/rightcomponent/rightcomponent.component.ts.RightcomponentComponent.formSubmit
rightcomponent.component.html
<!--Form start-->
<form >
<div class="row">
<div class="form-group row">
<div style="margin-left: 60px;margin-right:50px ">
<select class="form-control" (ngModelChange)="onSelected($event)" id="sel1">
<option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="container set_buttons_div" >
<div class="form-group row">
<div class="col-xs-2">
<input class="form-control" id="ex1" type="text">
<br>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<a class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit(e)">
<i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
Buy
</a>
</div>
<br>
</form>
rightcomponent.component.ts
formSubmit(e){
var stock = this.onSelected(e);
console.log(stock);
var quantity = e.target.elements[0].value;
console.log(quantity);
}
onSelected(e){
var stock_company_name = e;
return stock_company_name;
}
I would have created component in this way, i dont know how to create a plunker / fiddler, but two way binding will work for you now. I created this way. :D
<!--Form start-->
<form #myForm="ngForm" novalidate>
<div class="row">
<div class="form-group row">
<div style="margin-left: 60px;margin-right:50px ">
<select class="form-control" (change)="onSelected($event)" id="sel1" name="stock" [(ngModel)]="Model.stockname">
<option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="container set_buttons_div" >
<div class="form-group row">
<div class="col-xs-2">
<input class="form-control" id="ex1" type="text" name="companyName" [(ngModel)]="Model.companyname">
<br>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<a class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit()">
<i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
Buy
</a>
</div>
<br>
</form>
rightcomponent.component.ts
// create an Object model with form fields as key
Model = {
stockname: '',
companyname: ''
}
formSubmit(){
console.log(this.Model);
}
Below is the attached picture of the form constructor. As you can see it has {{service.name}} in it instead o fthe name itself.
I have a form inside that I have two ng-repeats with custom filters on it and inside that I have an input field. I am trying to have a unique name for my input field by adding an index or by using a field from the html response. Regardless of that, when I have name="{{customitem.name}}" or name="{{$index}}" the form generates a constructor with {{customitem}} or {{$index}} instead of the value it self. Also this form turned on and off using ng-if.
<form name="selectServiceForm">
<div data-ng-show="showAddServices">
<section class="content-header">
<div class="row">
<div class="col-lg-5 col-sm-5">
<h1>
Services
<small>Add or Modify Services</small>
</h1>
</div>
<div class="col-lg-7 col-sm-7 text-right btn-container">
<button type="button" class="btn btn-primary btn-sm" data-ng-disabled="selectServiceForm.$invalid" data-ng-click="selectServiceForm.$valid && save(true)">
<i class=" fa fa-save"></i>
<span class="indent-xs">Save</span>
</button>
<button type="button" class="btn btn-primary btn-sm" data-ng-click="backToAddServices()">
<i class=" fa fa-arrow-circle-left"></i>
<span class="indent-xs">BACK</span>
</button>
</div>
</div>
</section>
<section class="content group-container">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="">Industry<sup style="color: red">*</sup></label>
<select class="form-control" id="select1" name="" data-ng-model="selectedIndustry" data-ng-change="onChangeIndustry(selectedIndustry)"
data-ng-options="industry.CategoryName for industry in Industry">
<option value="">Select Industry</option>
</select>
</div>
<div data-ng-show="isSecondLevelCategory">
<div class="form-group">
<label for="">
Category<sup style="color: red">*</sup>
</label>
<select class="form-control" id="selectCategory" name="" data-ng-model="selectedService" data-ng-change="showServices(selectedService)"
data-ng-options="service.CategoryName for service in ServiceTypes">
<option value="">Select Category</option>
</select>
</div>
</div>
</div>
</div>
<hr />
<div class="selectServ">
<div class="pad20B p-relative">
<div data-ng-repeat="item in innerCategoryList | orderBy: 'SortOrder'" class="">
<div class="form-row pad10B mrg0A pad0B mrg5T">
<label>
<input class="wauto float-left mrg5R" type="checkbox" data-ng-model="item.checked" data-ng-checked="item.checked" data-ng-click="categorySelected(item)" />
<strong class="float-left">{{item.CategoryName}}</strong>
</label>
</div>
<div data-ng-show="item.checked" style="padding-left: 25px" class="pad15L">
<div data-ng-repeat="service in serviceList | servicelistfilter:item.ShortName | orderBy: 'SortOrder' ">
<div class="form-row mrg0A pad10B">
<div class="row">
<div class="col-lg-8 col-md-6 col-sm-6">
<div class="service-amount-label pad5L mrg5T">
<label>
<input class="wauto float-left mrg5R" type="checkbox" data-ng-model="service.checked"
data-ng-checked="service.checked" data-ng-click="selectService(service)" />
<strong class="float-left">{{service.Name}}</strong>
</label>
</div>
</div>
<!--TAP-4394
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-amount float-right" data-ng-show="service.checked && !service.hideRange">
<input type="text" placeholder="$50" data-ng-model="featureDetail.minAmount" name="minAmount" data-ng-required="featureDetail.isSelected">
<span class="mrg5R mrg5T">$</span>
<decimal-text-box class="mrg5R" max-value="service.MaxAmount" min-value="'invalid'" min-max-error="service.minMaxError" input-placeholder="'$min'" input-class="'selectService'" input-value="service.MinAmount"></decimal-text-box>
<span class="dash mrg5R mrg5T">–</span>
<span class=" mrg5R mrg5T">$</span>
<decimal-text-box class=" " max-value="'invalid'" min-value='service.MinAmount' min-max-error="service.minMaxError" input-placeholder="'$max'" input-class="'selectService'" input-value="service.MaxAmount"></decimal-text-box>
<div data-ng-show="service.checked && !service.hideRange" class="new-error-style">
<span data-ng-show="service.minMaxError" class="font-white">min should not be greater than max</span>
</div>
</div>
</div>-->
<!-- <div class="col-lg-5">
<div data-ng-show="service.checked && !service.hideRange">
<span data-ng-show="service.minMaxError" class="font-red">min should not be greater than max</span>
</div>
</div>-->
</div>
</div>
<div class="form-row pad10B mrg0A service-custom-text"
data-ng-repeat="customitem in customServiceList | listfilter:service.ShortName "
data-ng-show="service.checked" data-ng-model="customServiceList" ng-init="">
<!--data-ng-click="showEditCustomService(customSvc.CustomText,customSvc.Amount)"-->
<div class="col-md-5 col-sm-5">
<span class="pad0L pointer" data-ng-click="removeCustomService(service,customitem.Id)"><i class="fa fa-fw fa-minus-circle"></i></span>
<input type="text" data-ng-model="customitem.CustomText" placeholder="Custom Service" class="selectService w40 mrg5Bxs" />
<span class="mrg20L">
<decimal-text-box min-value="'invalid'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'Amount'" input-class="'selectService w40 '" input-value="customitem.Amount"></decimal-text-box>
</span>
<textarea class="selectDescription" cols='60' rows='8' data-ng-model="customitem.CustomDescription" placeholder="Description (Optional)"></textarea>
</div>
<div ng-hide="businessModel.name == 'Book Now'">
<div class="center-bor" style="height: 231px;"></div>
<div class="float-left col-md-5 col-sm-5 activate-bundle-container gray">
<div class="activate-bundle-button" ng-hide="customitem.CustomServiceBundle && !customitem.isDeleteBundle" ng-click="activateBundle(customitem)">Activate Bundle Rates</div>
<div ng-show="customitem.CustomServiceBundle && !customitem.isDeleteBundle">
<div class="cancel-bundle-button" ng-click="cancelBundle(customitem)">Cancel</div>
<input name="customBundleQuantity" type="number" class="selectService mrg70T" placeholder="# of Bundles" ng-model="customitem.CustomServiceBundle.BundleQuantity" ng-change="change(customitem.CustomServiceBundle.BundleQuantity, customitem)" />
<div class="font-red" ng-if="selectServiceForm.customBundleQuantity.$error.pattern">Quantiy must be more than 1.</div>
<input type="number" step="0.5" name="{{service.name}}"
class="selectService mrg20T" placeholder="Price (per Unit)"
ng-model="customitem.CustomServiceBundle.BundlePrice"
ng-change="change(customitem.CustomServiceBundle.BundlePrice, customitem)" compare-price price-to-compare="customitem.Amount" />
<div class="font-red" ng-if="selectServiceForm.customBundlePrice.$error.priceValid">Bundle Price must be less than Original Price..</div>
<!--<decimal-text-box min-value="'2'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'# of Bundles'" input-class="'selectService mrg70T'" input-value="customitem.CustomServiceBundle.BundleQuantity" change="Change"></decimal-text-box>-->
<!--<decimal-text-box min-value="'1'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'Price'" input-class="'selectService mrg20T'" input-value="customitem.CustomServiceBundle.BundlePrice"></decimal-text-box>-->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9">
<div class="custom-service" data-ng-show="service.checked">
<div class="pad10B pad0T pad0L">
<i class="fa fa-fw fa-plus-circle"></i>Add a Service
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End of selectServiceForm-->
</div>
</section>
</div>
</form>
My project is using Angular v1.3.15, I know its an old version but it will be too much to jump forward from this version.
I have a card with buttons, generating dynamically after submitting form. I want to display the content on click of a button in the card with buttons toggle. And same process to the next step when I click on toggled buttons.
My problem is lets say I have 2 cards(Card1 and card2). When I click on buttons of 1 st card, the click functionality is applying for both the cards. But it should apply for card 1. This is the problem I am facing. Can anyone help on this?
Here is my code:
<template name ="workflow">
<div id="newActionCard" >
{{#each newaction}}
<div class="workflowcard">
<div class="module-card-small">
<div class="res-border"></div>
<div class="card-img">{{team}}</div>
<div class="res-content">
<div class=" newaction-name">{{action_title}}</div><hr>
<div class="newaction-des">{{description}}</div>
<!-- <div class=" due-on">Due on:{{d_date}}</div><hr>-->
</div>
<div class="due">
Due on:
<div>
<div class="day-stamp">{{weekday d_date}}</div>
<div class="date-stamp">{{date d_date}}</div>
<div class="month-stamp">{{month d_date}}</div>
</div>
</div>
{{> actioncardsubcontent}}
{{> requestextensioncard}}
</div>
<div class="btn-box">
<button type="button" class="cancelsub" >New Action</button>
<button type="submit" class="createbtnsub">Show Options</button>
</div>
</div>
{{/each}}
</div>
</div>
</template>
<template name="actioncardsubcontent">
<div class="subcontent" id={{_id}} >
<div class="modulepath"><div>{{module_list}}</div></div>
<div class="linkto"><div>Linked To: <div class="linkto-color">{{link}}</div></div></div>
<div class="description"><div>Notes:<br>{{description}}</div></div>
<div class="btn-box showoption">
<button type="button" class="hideoption">Hide Options</button>
<button type="submit" class="requestextension">Request Extension</button>
</div>
</div>
</template>
<template name="requestextensioncard" id={{_id}}>
<div class="reqext">
<fieldset class="form-group">
<div class="request-title">Request Extension:</div><br>
<textarea class="form-control" id="skills" name="description" placeholder="Description" required style="height: 100px;"></textarea>
</fieldset>
<fieldset class="form-group">
<select class="form-control m-b" name="lengthOfExt" required>
<option value="" selected="selected">Enter length of request </option>
<option>One Day</option>
</select>
</fieldset>
<div class="btn-box requestcard">
<button type="button" class="cancelrequest">Cancel Request</button>
<button type="submit" class="submitrequest">Submit Request</button>
</div>
</div>
</template>
and JS :
"click .createbtnsub" : function() {
$('#'+this._id).show();
}
"click .requestextension" : function(){
$('#'+this._id).show();
}
I want to display {{> actioncardsubcontent}} on click of "show options" buttton. and have to display {{> request extension}} template on click of "request Extenion" button.
I tried by giving dynamic id to both the templates but it's working fine with one template but not for other taking same id for both.
I am not sure if it will work or not but still you can give a try.
Instead of $('#'+this._id).show(); , You can simply try by $(this).show()
Also could not see _id property in this. May be you are referencing to only id.
Instead of using $(selector) to get the element, use this.$(selector). The different is that the second one only find elements which are contained inside your template instance. It is mentioned here.
Now try this code:
HTML:
<template name="workflow">
<div id="newActionCard">
{{#each newaction}}
{{> workflowcard}}
{{/each}}
</div>
</template>
<template name="workflowcard">
<div class="workflowcard">
<div class="module-card-small">
<div class="res-border"></div>
<div class="card-img">{{team}}</div>
<div class="res-content">
<div class=" newaction-name">{{action_title}}</div>
<hr>
<div class="newaction-des">{{description}}</div>
</div>
<div class="due">
Due on:
<div>
<div class="day-stamp">{{weekday d_date}}</div>
<div class="date-stamp">{{date d_date}}</div>
<div class="month-stamp">{{month d_date}}</div>
</div>
</div>
{{> actioncardsubcontent}}
{{> requestextensioncard}}
</div>
<div class="btn-box">
<button type="button" class="cancelsub">New Action</button>
<button type="submit" class="createbtnsub">Show Options</button>
</div>
</div>
</template>
<template name="actioncardsubcontent">
<div class="subcontent">
<div class="modulepath">
<div>{{module_list}}</div>
</div>
<div class="linkto">
<div>Linked To:
<div class="linkto-color">{{link}}</div>
</div>
</div>
<div class="description">
<div>Notes:<br>{{description}}</div>
</div>
<div class="btn-box showoption">
<button type="button" class="hideoption">Hide Options</button>
<button type="submit" class="requestextension">Request Extension</button>
</div>
</div>
</template>
<template name="requestextensioncard">
<div class="reqext">
<fieldset class="form-group">
<div class="request-title">Request Extension:</div><br>
<textarea class="form-control" name="description" placeholder="Description" required style="height: 100px;"></textarea>
</fieldset>
<fieldset class="form-group">
<select class="form-control m-b" name="lengthOfExt" required>
<option value="" selected="selected">Enter length of request </option>
<option>One Day</option>
</select>
</fieldset>
<div class="btn-box requestcard">
<button type="button" class="cancelrequest">Cancel Request</button>
<button type="submit" class="submitrequest">Submit Request</button>
</div>
</div>
</template>
JS:
Template.workflowcard.events({
'click .createbtnsub': function() {
this.$('.subcontent').show();
},
'click .requestextension': function() {
this.$('.reqext').show();
}
});
I'm currently looking for advice on some jQuery as I think I'm doing this incorrectly even though I'm getting the result I want.
I want to change the value of an input to the value of the closest input with a class of .milestone when it's changed. The input which I want to change is the holding input and I want it to the equal value of the revised input on change. Below is the HTML which I can't change unfortunately as this is a product.
<div class="container area dform_section_area6">
<div class="box box13 two">
<div class="dform_section_box13">
<div style="clear: both;" data-type="html" data-name="business_case_approved_pmr" id="dform_widget_html_business_case_approved_pmr" data-active="true" class="dform_widget dform_widget_type_html dform_widget_business_case_approved_pmr">
<p>Business Case Approved</p>
</div>
</div>
</div>
<div class="box box14 two">
<div class="dform_section_box14">
<div data-type="date" data-name="bc_approved_planned_pmr" data-active="true" data-agentonly="false" class="container dform_widget dform_widget_field dform_widget_type_date dform_widget_bc_approved_planned_pmr dform_widget_bc_approved_planned_bc">
<div>
<label for="dform_widget_bc_approved_planned_pmr">Planned</label>
</div>
<div>
<input id="dform_widget_bc_approved_planned_pmr" type="date" name="bc_approved_planned_pmr" data-mapfrom="bc_approved_planned_bc" class="dform_field_active">
</div>
</div>
</div>
</div>
<div class="box box15 two">
<div class="dform_section_box15">
<div data-type="select" data-name="bcapproval_on_target" data-active="true" data-agentonly="false" class="container dform_widget dform_widget_field dform_widget_type_select dform_widget_bcapproval_on_target dform_widget_">
<div>
<label for="dform_widget_bcapproval_on_target">On target?</label>
</div>
<div>
<select id="dform_widget_bcapproval_on_target" name="bcapproval_on_target" class="dform_field_active">
<option></option>
<option value="Yes" data-off="bc_approved_revised_pmr">Yes</option>
<option value="No" data-on="bc_approved_revised_pmr">No</option>
</select>
</div>
</div>
</div>
</div>
<div class="box box16 two">
<div class="dform_section_box16">
<div data-type="date" data-name="bc_approved_revised_pmr" data-active="false" data-agentonly="false" class="container dform_widget milestone mrevise dform_widget_field dform_widget_type_date dform_widget_bc_approved_revised_pmr dform_widget_">
<div>
<label for="dform_widget_bc_approved_revised_pmr">*Revised</label>
</div>
<div>
<input id="dform_widget_bc_approved_revised_pmr" type="date" name="bc_approved_revised_pmr" class="">
</div>
</div>
</div>
</div>
<div class="box box17 two">
<div class="dform_section_box17">
<div data-type="date" data-name="gate_3_actual1" data-active="true" data-agentonly="false" class="container dform_widget dform_widget_field dform_widget_type_date dform_widget_gate_3_actual1 dform_widget_">
<div>
<label for="dform_widget_gate_3_actual1">Actual</label>
</div>
<div>
<input id="dform_widget_gate_3_actual1" type="date" name="gate_3_actual1" class="dform_field_active">
</div>
</div>
</div>
</div>
<div class="box box18 last two">
<div class="dform_section_box18">
<div data-type="date" data-name="bc_approved_planned_bc" data-active="true" data-agentonly="false" class="container dform_widget param mrevise dform_widget_field dform_widget_type_date dform_widget_bc_approved_planned_bc dform_widget_">
<div>
<label for="dform_widget_bc_approved_planned_bc">holding</label>
</div>
<div>
<input id="dform_widget_bc_approved_planned_bc" type="date" name="bc_approved_planned_bc" class="dform_field_active">
</div>
</div>
</div>
</div>
</div>
I'm using the jQuery below to find the value of the input I want to update but I can't help but think that there must be a less long winded way to change this. I can't just reference the input's ID as I need to do this for 20+ fields.
$(this).parent().parent().parent().parent().next().next().find('.param').find('input').val()
This =
<input id="dform_widget_bc_approved_revised_pmr" type="date" name="bc_approved_revised_pmr" class="">
You can use closest() method instead and find recursive parent() element and then find child level element for siblings.
$(this).closest(".dform_section_area6").find('.param:last input').val()