I have a UL with API generated LI's(users). Inside each user, there is a hidden container with inputs for adding tags to search by. These hidden containers are supposed to show on ONLY the selected user when you click a "+" pseudo-button.
I had it working to toggle the hide class, but it toggles on every generated class, and not the specific user I click on.
jQuery Code:
$(".fa-plus").on("click", (() =>{
$("#tag-container, #add-tag-input, #hideGrades",() => {
$(this).toggleClass("hidden");
});
}));
HTML code:
<div id="hideGrades">
<p class="card-text hidden">Grades: <%= grades %></p>
</div>
<div class="tag-container hidden" id="tag-container">
</div>
<div>
<input class ="hidden" type="text" value="" placeholder="Add a tag" id="add-tag-input" />
</div>
Full Div:
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title"><%=student["firstName"] + " " + student["lastName"] %> <i class="fas fa-plus"></i></h2>
<div>
<p class="card-text">Email: <%= student["email"] %></p>
<p class="card-text">Company: <%= student["company"] %></p>
<p class="card-text">Skill: <%= student["skill"] %></p>
</p>
<div id="hideGrades">
<p class="card-text hidden">Grades: <%= student["grades"] %></p>
</div>
<div class="tag-container hidden" id="tag-container">
</div>
<div>
<input class ="hidden" type="text" value="" placeholder="Add a tag" id="add-tag-input" />
</div>
</div>
</div>
</div>
Thanks!
You can amend your HTML you make it more easy and simply use jQuery functions like parent() and siblings() to show the items where you click at only and not all classes in your DOM.
Also you do not need to use arrow functions and this => in jQuery it will make things complicated.
You can simply use function to do the same thing.
Run snippet below to see working (Click on + sign so the hidden fields are displayed for each student)
$(".fa-plus").on("click", function(){
$(this).parent().siblings('.grades_section').toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">Student 1 <i class="fa fa-plus"></i></h2>
<div>
<p class="card-text">Email: Email
</p>
<p class="card-text">Company: Company
</p>
<p class="card-text">Skill: Skill
</p>
</p>
</div>
<div class="grades_section hidden">
<div id="hideGrades">
<p class="card-text ">Grades: grades</p>
</div>
<div class="tag-container" id="tag-container">
Some Data
</div>
<div>
<input class="add-tag-input" type="text" value="" placeholder="Add a tag" />
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">Student 2 <i class="fa fa-plus"></i></h2>
<div>
<p class="card-text">Email: Email
</p>
<p class="card-text">Company: Company
</p>
<p class="card-text">Skill: Skill
</p>
</p>
</div>
<div class="grades_section hidden">
<div id="hideGrades">
<p class="card-text ">Grades: grades</p>
</div>
<div class="tag-container" id="tag-container">
Some Data
</div>
<div>
<input class="add-tag-input" type="text" value="" placeholder="Add a tag" />
</div>
</div>
</div>
</div>
Related
I have 2 columns with same ID, each have 1 button. How to run a function when one button is clicked without changing other ID values?
Here is my code:
<div class="row">
<!--- column 1 ------>
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div id="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div id="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input id="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price();">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
<!--- column 1 ------>
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div id="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div id="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input id="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price();">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
</div>
Here is my function:
<script>
function price(){
var qty = document.getElementById("jmlh").value;
var prc = Math.ceil((1000000 / qty)/100)*100;
document.getElementById("hrg").innerHTML = prc;
document.getElementById("per").innerHTML = "/" + qty;
}
</script>
The problem here is that function only runs on 'column 1' & doesn't work on 'column 2'.
Where exactly am I going wrong?
id should be unique in the same document. Use classes or other attributes instead of id.
If you want centralized function to handle clicks, submit the clicked element itself to that function, so it would know which column was clicked:
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div class="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div class="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input class="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price(this);">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
function price(el){
const elContainer = el.closest(".container");// find parent
var qty = elContainer.querySelector(".jmlh").value;
var prc = Math.ceil((1000000 / qty)/100)*100;
elContainer.querySelector(".hrg").innerHTML = prc;
elContainer.querySelector(".per").innerHTML = "/" + qty;
}
Note, that all id were replaced by class attribute and in javascript instead of searching entire document with document.getElementById() it's now only searching children inside the .container element.
I am working on a simple to-do app.
I would like to add a new element after user clicks on enter in the input box, and nothing happen. I tried lot of ways, I will share the recent code. Do you have any suggestions? Thanks a lot.
UPDATE: It finally works.
UPDATE: It finally works.
UPDATE: It finally works.
$(document).ready(function() {
// Input - creating a new element //
$(':input').on('keypress', function(e) {
if (e.which == 13 && $('#text').val().length != 0) {
var input = ($this).val()
$('.elements').append('<div class="text-box"></div>');
// i would like to add other elements inside a div, but i need to first get it work. //
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<img src="img/bg-desktop-dark.jpg" alt="background">
</header>
<section>
<div class="container section-content">
<div class="headline">
<h1>TODO</h1>
<img src="img/icon-sun.svg" class="switcher" alt="switcher">
</div>
<div class="create">
<p class="circle"></p>
<form><input type="text" placeholder="Create a new todo" id="text"></form>
</div>
<div class="elements">
<div class="text-box">
<p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
<p class="text">Vytvořit todo appku</p>
</div>
<div class="text-box">
<p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
<p class="text">Vytvořit todo appku</p>
</div>
<div class="text-box">
<p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
<p class="text">Vytvořit todo appku</p>
</div>
</div>
<div class="bottom">
<p class="items-left">5 items left</p>
<div class="functions">
<p class="all">All</p>
<p class="active">Active</p>
<p class="completed">Completed</p>
</div>
<p class="clear">Clear completed</p>
</div>
</div>
</div>
</section>
You are very close, a few things to make this work are:
You are using a <form> tag which will (by default) try to submit a form on enter. If you aren't sending anything to a server you can just remove this html tag
($this) should be $(this) because you want to use the jquery constructor to create a jquery object from the this context.
You are just appending an empty div which you won't see on the screen. You have to add the input text to the body of the div.
$(document).ready(function() {
// Input - creating a new element //
$(':input').on('keypress', function(e) {
if (e.which == 13 && $('#text').val().length != 0) {
var input = $(this).val()
$('.elements').append(`<div class="text-box">${input}</div>`);
// i would like to add other elements inside a div, but i need to first get it work. //
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<img src="img/bg-desktop-dark.jpg" alt="background">
</header>
<section>
<div class="container section-content">
<div class="headline">
<h1>TODO</h1>
<img src="img/icon-sun.svg" class="switcher" alt="switcher">
</div>
<div class="create">
<p class="circle"></p>
<input type="text" placeholder="Create a new todo" id="text">
</div>
<div class="elements">
<div class="text-box">
<p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
<p class="text">Vytvořit todo appku</p>
</div>
<div class="text-box">
<p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
<p class="text">Vytvořit todo appku</p>
</div>
<div class="text-box">
<p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
<p class="text">Vytvořit todo appku</p>
</div>
</div>
<div class="bottom">
<p class="items-left">5 items left</p>
<div class="functions">
<p class="all">All</p>
<p class="active">Active</p>
<p class="completed">Completed</p>
</div>
<p class="clear">Clear completed</p>
</div>
</div>
</div>
</section>
This question already has answers here:
Have addEventListener on multiple of the same IDs
(2 answers)
Closed 2 years ago.
I have two radio buttons and I want to attach some functionality to them. But no matter how hard I try I can't attach anything to each of them. I tried to add a simple console log and it seems that the issue is the on click events do not work at all. the code is at the very end of the HTML code. What I'm missing and how to fix this...???
Here is the code: The Javascript is placed in a script tag at the end of the HTML code:
Note: I can log the radio buttons. as you see...
<!DOCTYPE html>
<!-- saved from url=(0043)http://thetheme.io/thesaas/demo/saas-2.html -->
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<!-- Styles -->
<link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.css" rel="stylesheet">
<link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/style.css" rel="stylesheet">
</head>
<body>
<!-- Main Content -->
<main>
<section id="section-pricing" class="section bg-gray">
<div class="container pricing-plans-regular">
<header class="section-header">
<h2>Affordable Pricing</h2>
<hr>
<p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
</header>
<div class="text-center my-7">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-round btn-outline-dark w-150 active focus">
<input id="pricing-toggle--regular" type="radio" name="pricing" value="monthly" autocomplete="off" checked=""> Monthly
</label>
<label class="btn btn-round btn-outline-dark w-150">
<input id="pricing-toggle--professional" type="radio" name="pricing" value="yearly" autocomplete="off"> Yearly
</label>
</div>
</div>
<div class="row gap-y text-center">
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Standard</p>
<br>
<h2 class="price text-success">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Unlimited searchable message archives</small><br>
<small>Unlimited apps and service integrations</small><br>
<small>10GB file storage per team member</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Plus</p>
<br>
<h2 class="price">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="12.5" data-yearly="120">12.5</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Everything in Free & Standard, and</small><br>
<small>SAML-based single sign-on (SSO)</small><br>
<small>Compliance Exports of all messages</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
</div>
</div>
<!-- Second one -->
<div class="container pricing-plans-individual">
<header class="section-header">
<h2>Affordable Pricing</h2>
<hr>
<p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
</header>
<div class="text-center my-7">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-round btn-outline-dark w-150 active focus">
<input id="pricing-toggle--regular" class="switch-input" type="radio" name="plan" checked=""> Monthly
</label>
<label class="btn btn-round btn-outline-dark w-150">
<input id="pricing-toggle--professional" class="switch-input" type="radio" name="plan"> Yearly
</label>
</div>
</div>
<div class="row gap-y text-center">
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Standard</p>
<br>
<h2 class="price text-success">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Unlimited searchable message archives</small><br>
<small>Unlimited apps and service integrations</small><br>
<small>10GB file storage per team member</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Scripts -->
<script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.js.download"></script>
<!-- <script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/script.js.download"></script>
-->
<script type="text/javascript">
document.querySelector(".pricing-plans-regular").setAttribute('style', 'display:none !important');
const toggleRegular = document.querySelector("#pricing-toggle--regular");
const toggleProfessional = document.querySelector("#pricing-toggle--professional");
console.log(toggleRegular, toggleProfessional);
toggleRegular.onclick = function() {
console.log('toggleRegular')
};
toggleProfessional.onclick = function() {
console.log('toggleProfessional')
};
</script>
</body>
</html>
You're using multiple ID instead of Class. IDs are meant to be unique.
Use class . selector
Use Element.querySelectorAll()
const toggleProfessional = document.querySelectorAll(".pricing-toggle--professional");
const togProf = (ev) => {
console.log(`${ev.target.name} says: ${ev.target.value}`);
};
toggleProfessional.forEach(el => el.addEventListener("change", togProf));
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="1"> aaa 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="2"> aaa 2</label>
<hr>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="1"> bbb 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="2"> bbb 2</label>
I'm trying to write a script that if a parent element has a chlid then add class onlick, here's what i've got so far. any help would be much appreciated, p.s i know much code is terrible: The parent element is ".pinGrid" and the child is "#pin" and the onclick is "#like"
NOTE: I'm trying to add the class to the child element. The pin boxes are on a for each loop.
JS:
$(document).ready(function(){
$("#like").click(function () {
$('.pinGrid').has( "#pin" ).toggleClass("pincard-checked");
});
});
HTML:
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin" id="pin1">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" name="c1" id="like">
<label></label>
</div>
<p class="pull-left"> </p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click</p>
</div>
</div>
</div>
</div>
You can just use the ID selector to get the child element, then use toggleClass() with the checked status
$(document).ready(function() {
$(".like").change(function() {
$(this).closest('.pin').toggleClass("pincard-checked", this.checked);
});
});
.pincard-checked {
background-color: lightgrey;
}
.pin {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
</div>
</div>
I am assuming that, if .pinGrid has #pin, you want to fire click() of #like, if thats so,
$(document).ready(function(){
$("#like").click(function () {
//YOUR ACTION
});
($('.pinGrid #pin').length>0)?$("#like").trigger("click"):alert("NOT FOUND");
//IF YOU WANT TO ADD CLASS
//($('.pinGrid #pin').length>0)?$("#pin").addClass("pincard-checked"):alert("NOT FOUND");
});
You need to use:
var pingrid= $('.pinGrid');
$("#like").click(function () {
if(pingrid.hasClass( "#pin" ))
pingrid.find('#pin').toggleClass("pincard-checked");
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.my_class {
color:red;
}
</style>
<script>
$(document).ready(function () {
$("#like").click(function () {
if ($('.pinGrid #pin1').length > 0) {
$('.pinGrid #pin1').toggleClass("my_class")
}
});
});
</script>
<body>
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin" id="pin1">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" name="c1" id="like">
<label></label>
</div>
<p class="pull-left"> </p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click</p>
</div>
</div>
</div>
</div>
</body>
</html>
You just need to replace
$('.pinGrid').has( "#pin" ).toggleClass("pincard-checked");
with
$('.pinGrid').find( ".pin" ).toggleClass("pincard-checked");
Here is the fiddle link
I'm using jQuery dialog to gather the informations from users then append to my desired div. This function works very well, but when comes to edit/update my contents, I have no ideas how to do.
Front-Ends HTML
<li class="description_panel">
<a id="editPanel" href="#"></a>
<a id="closeBtn" href="#" class="closeButton"></a>
<div class="panel_title">
<h2>**Subscribe Here!**</h2>
</div>
<div class="panel_img">
<img width="320px" src="link_to_img_url"/>
</div>
<div class="panel_description">
<p>My paragraph 1</p>
<p>My paragraph 2</p>
</div>
</li>
Edit Panel
<div id="edit-dialog-form" title="Edit Panel">
<form id="formUpdatePanel">
<div class="form-group">
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel title::</h5>
<input style="margin-bottom:20px;" id="updatePanelTitle" class="form-control input-lg" name="title" placeholder="Panel Title" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>URL to image: </h5>
<input style="margin-bottom:20px;" id="updatePanelImageURL" class="form-control input-lg" name="imageURL" placeholder="Link to Image URL" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel description:</h5>
<textarea id="updatePanelDescription" rows="5" cols="50" style="width:312px"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
JQuery
$('#editPanel').click(function(){
editDialog.dialog("open");
});
var editDialog = {...};
function updateDialog {
}
How to retrieve all the inputs values and textarea value and display in the dialog input box and update/overwrite the contents again.