We Keep Coding

Remove all element that does not have specific descendandt element in jquery

So i have the following markup:
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount"></span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
there are multiple tr elements, but only some of them have the innermost span with "woocommerce-Price-amount" class. The other have nothing after the "festi-cart-product-price" classed span.
I'm trying to remove all the tr elements that does NOT have the "woocommerce-Price-amount" span inside it using jQuery.
jQuery( document ).ajaxComplete(function() {
jQuery(".festi-cart-product-price:not(:has(>span))").each(function(){
jQuery(this).parent('tr.festi-cart.item').hide();
});
});
I've been trying to use the :not selector, but it doesnt seem to produce anything. I'm really not sure where it goes wrong.
Can any of you spot where my code is going wrong, or if it's a completely hopeless approach to a simple solution?

Use .filter function to match elements with specific requirements.
Use $('tr').find('.woocommerce-Price-amount').length > 0 to check if element exists in tr.
Than simply do .hide() (or .remove()) to filtered elements.
$(document).ready(function() {
var hasWoo = $('.festi-cart-list tr').filter(function() {
return $(this).find('.woocommerce-Price-amount').length !== 0;
});
hasWoo.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">WOO</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">WOO</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
EMPTY
</span>
</td>
</tr>
</tbody>
</table>
</div>

You need to use .closest() method of jquery instead of .parent() method.

$('.btn').click(function(){
$('.festi-cart-item').each(function(){
var price = $(this).find('.festi-cart-product-price').children().hasClass('woocommerce-Price-amount');
if(!price)
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount"></span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn">remove</button>

You're so close, your selector is valid and select the festi-cart-product-price that have no span's :
$(".festi-cart-product-price:not(:has('>span'))")
You've just to go up to the parents tr using closest() then hide them :
selector.closest('tr').hide();
Check This fiddle using setTimeout() to see the effect .
Hope this helps.
$(function() {
var selector = $(".festi-cart-product-price:not(:has('>span'))");
selector.closest('tr').hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list" border=1>
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 1
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">p1</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 2
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 3
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 4
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">p4</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>

How about this.
$("tr:not(:has(>.woocommerce-Price-amount))").hide()
Not tested.
Comes from this question: How to select elements which do not have a specific child element with JQuery which is worth a read on this type of 'descendant without feature' question.

Javascript focus on previous row's first input

I have a form presented in a table and each row has two input fields and in the last row it has two buttons "add-more" and "submit"
<form>
<table>
<tbody>
<tr>
<td>
<table class="table no-border no-margin manage_admin_child_table">
<tbody>
<tr>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mcc]" id="operator_mcc_0" placeholder="MCC" tabindex="1">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mnc]" placeholder="MNC" tabindex="2">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td style="width:2%;"> </td>
</tr>
</tbody>
</table>
<span class="wrapper"></span>
</td>
</tr>
<tr>
<td>
<table class="table no-border no-margin manage_admin_child_table">
<tbody>
<tr>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mcc]" id="operator_mcc_0" placeholder="MCC" tabindex="3">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mnc]" placeholder="MNC" tabindex="4">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td style="width:2%;"> </td>
<td class="text-left" style="vertical-align: middle;">
<i class="fa fa-times"></i>
</td>
</tr>
</tbody>
</table>
<span class="wrapper"></span>
</td>
</tr>
<tr>
<td colspan="3">
<div class="widget_box_footer_section">
<i class="fa fa-plus"></i> Add More
<button type="submit" class="button meduim submit_button place-right" id="operator_submit" tabindex="7">
<i class="fa fa-paper-plane"></i> Submit
</button>
</div>
</td>
</tr>
</tbody>
</table>
</form>
when i click on add-more it adds the new row(there can be many rows, i have not included that javascript here i have hard-coded the form with two input rows) with two fields and a cross icon to remove that field.
and to remove that field i have a javascript function as
$(document).on('click','a.remove-operator-code',function() {
$(this).parents('tr').first().remove();
});
It is successfully removing that row, but i dont know where the focus is going , i want to fix this focus issue that when we remove the particular row, focus must go to the previous row's first input field

You need to use:
$(document).on('click','a.remove-operator-code',function() {
vat prevtr = $(this).closest('tr').prev();
if(prevtr.length)
prevtr.find('input:first').focus()
$(this).closest('tr').remove();
});

This will help you..
Demo:http://jsfiddle.net/ajnf988s/
$(document).on('click','a.remove-operator-code',function() {
$(this).parents('tr').prev('tr').find('input[type=text]:first').focus();
$(this).parents('tr').remove();
});

Retrieve a Value from a id based on tree structure

Goal:
When you press a specific button for instance button id="button_a", you should retrieve the value from id="a1" and then it should display as alert message.
Problem:
When you have a table between 100 and 200 rows, you cannot hard code the specific id name in the javascript.
Question:
How should you retrieve the value of the for instance id="a1" when you have pressed the button?
I have tried and learned that you use "previousSibling" (http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_previoussibling) but it more complicated that I have expected.
<table>
<tr>
<td><div id="a1"><div id="aa1">aa1</div></div></td>
<td><div id="a2"><div id="aa2">aa2</div></div></td>
<td><button id="button_a"></button></td>
<td></td>
</tr>
<tr>
<td><div id="b1"><div id="bb1">bb1</div></div></td>
<td><div id="b2"><div id="bb2">bb2</div></div></td>
<td><button id="button_b"></button></td>
<td></td>
</tr>
<tr>
<td><div id="c1"><div id="cc1">cc1</div></div></td>
<td><div id="c2"><div id="cc2">cc2</div></div></td>
<td><button id="button_c"></button></td>
<td></td>
</tr>
<tr>
<td><div id="d1"><div id="dd1">dd1</div></div></td>
<td><div id="d2"><div id="dd2">dd2</div></div></td>
<td><button id="button_d"></button></td>
<td></td>
</tr>
</table>

If I understand right you want the value of first div inside tr on button click. You can use:
$("button").on("click", function() {
var val = $(this) //referes to the dom element, in this case the button
.parents("tr") //get ancestor tr of the clicked element(button)
.find("td:first-child > div") //find first td that has direct child div
.text(); //get the text value of the div element
$(this).after("<span>" + val + "</span>");//for test purposes
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div id="a1">
<div id="aa1">aa1</div>
</div>
</td>
<td>
<div id="a2">
<div id="aa2">aa2</div>
</div>
</td>
<td>
<button id="button_a">Click!</button>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="b1">
<div id="bb1">bb1</div>
</div>
</td>
<td>
<div id="b2">
<div id="bb2">bb2</div>
</div>
</td>
<td>
<button id="button_b">Click!</button>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="c1">
<div id="cc1">cc1</div>
</div>
</td>
<td>
<div id="c2">
<div id="cc2">cc2</div>
</div>
</td>
<td>
<button id="button_c">Click!</button>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="d1">
<div id="dd1">dd1</div>
</div>
</td>
<td>
<div id="d2">
<div id="dd2">dd2</div>
</div>
</td>
<td>
<button id="button_d">Click!</button>
</td>
<td></td>
</tr>
</table>
References
.parents()
.find()
:first-child

With the jQuery you can navigate by tree easily. What you can do it the following:
$('#button_a').on('click', function(e) {
var div_a1 = $(this).closest('tr').find('div').first();
// and so on
}
Read more at jQuery documentation

input value doesn't changes -Jquery

I have a table which consists from two rows:
<table class="settings-edit-table">
<tbody>
<th scope="row"> Position</th>
<tr>
<td>
<div class="editable-select-holder editable-select-expanded">
<input type="text" name="position" id="position" value="Administrator-assistant"/>
<button type="button" class="editable-select-expander"></button>
<ul class="editable-select-options">
<li>Administrator-assistant</li>
<li>Chief Accountant</li>
<li>Chief Exeϲutive Officer</li>
<li>Chief Financial Officer</li>
</ul>
</div>
</td>
</tr>
<th scope="row">Language </th>
<td>
<div class="editable-select-holder editable-select-expanded">
<input type="text" name="language" id="preferredLanguage">
<button type="button" class="editable-select-expander"></button>
<ul class="editable-select-options">
<li id="en">English </li>
<li id="et">Estonian </li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
Here is Javascript:
$(document).on('click','.editable-select-expander', function() {
var $holder = $(this).parent();
$holder.toggleClass('editable-select-expanded');
$holder.on('click', 'li', function() {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
});
When I submit the form it says that language is not selected. Position selection works fine but language selection doesn't. I have no idea why. I you have any suggestions please provide

Verify your tags you need open and close(tr,th) look add quotes:
<table class="settings-edit-table">
<tbody>
<th scope="row"> Position</th>
<tr>
<td>
<div class="editable-select-holder editable-select-expanded">
<input type="text" name="position" id="position" value="Administrator-assistant"/>
<button type="button" class="editable-select-expander"></button>
<ul class="editable-select-options">
<li>Administrator-assistant</li>
<li>Chief Accountant</li>
<li>Chief Exeϲutive Officer</li>
<li>Chief Financial Officer</li>
</ul>
</div>
</td>
</tr>
</th> <!-- add -->
<th scope="row">Language </th>
<tr> <!-- add -->
<td>
<div class="editable-select-holder editable-select-expanded">
<input type="text" name="language" id="preferredLanguage">
<button type="button" class="editable-select-expander"></button>
<ul class="editable-select-options">
<li id="en">English </li>
<li id="et">Estonian </li>
</ul>
</div>
</td>
</tr>
</th> <!-- add -->
</tbody>
</table>

how to get the display the content of one page but clicking a button

i have a page having some contents plus a edit button So when you hit the edit button it will show the 2nd page. I want it as if both are in only one page. it will look like the last name(text area is converted into text field)Please tell me how to do it
the screen shot is
and the source code is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<label for="LastName">LastName</label>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<label for="FirstName">First Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<label for="DateofBirth">Date of Birth</label>
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<label for="LastName">Qualification</label>
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
</td>
<td>
<label for="RegistrationNo">Registration No</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<label for="CountryofRegistration">Country of Registration</label>
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<label for="PracticeName">Practice Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<label for="Phone">Phone</label>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<label for="Email">Email</label>
</td>
</tr>
<tr>
<td height="30">
<b></b>
</td>
<td align="right" >
<label for="Email"><input type="submit" class="button button-submit" value="Edit" /></label>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<label for="Address">Address</label>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<label for="Street">Street</label>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<label for="City">City</label>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<label for="State">State</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<label for="Country">Country</label>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<label for="PinCode">Pin Code</label>
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<label for="HowDoYouKnow">How Do You Know</label>
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<label for="Comments">Comments</label>
</td>
</tr>
</table><div align="center" style="padding-top: 30px">
</div>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<div class="space"></div> <div class="space"></div> <div class="space"></div> <div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<article id="article2">
<h2>Change Password</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<img src="medical.jpg" width="620" height="440" /></a>
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
when you hit the edit button the this should this display
![enter image description here][2]
the source code is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 50px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="LastName" type="text" value="<%=lastName %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="FirstName" type="text" value="<%=firstName %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<input name="DateofBirth" type="text" value="<%=DOB %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<input name="Qualification" type="text" value="<%=Qualification %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="RegistrationNo" type="text" value="<%=RegistrationNo %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<input name="CountryofRegistration" type="text" value="<%=CountryOfRegistration %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<input name="PracticeName" type="text" value="<%=PracticeName %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Phone" type="text" value="<%=Phone %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Email" type="text" value="<%=Email %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Image</b>
</td>
<td>
<input name="Image" type="file" />
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<input name="Address" type="text" value="<%=Address %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<input name="Street" type="text" value="<%=Street %>" />
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="City" type="text" value="<%=City %>" />
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="State" type="text" value="<%=State %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Country" type="text" value="<%=country %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<input name="PinCode" type="text" value="<%=PinCode %>" />
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<input name="HowDoYouKnow" type="text" />
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<textarea name="Comments" cols="15" rows="5" readonly></textarea>
</td>
</tr>
</table>
</div>
<br><br>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>

As Praveen said, you don't need two different pages, but two divs in the same page, and then use some javascript to switch between the display/visibility of the two. You can do this with two different classess per element, which the classes having different properties for display (display:none and display:block) or visibility (visibilty: hidden and visibility:visible).
JQuery toggle() method is a straightforward option:
http://api.jquery.com/toggle/
But mind that it toggles display, so it will affect your layout (display:none affects your layout, while visibility:hidden does not), which is something probably you don't want. One way to avoid this (but I am not 100% sure this is the best way to do it) is to insert each div (position:absolute) within another div (position:relative)

apply a css class which you want to display.By clicking on button show those fields only.

Just Make two div.. One div with the first image contents and second div with second image content. and once u clicked edit button just hide the first div and display second div.....