We Keep Coding

Why this jQuery parent("form") is not working

I made a form that links a button with from an attribute but it's not hiding the parent("form")
but when I try this it works
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
alert();
});
I don't know whats the problem with this code
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
$(this).parent("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
<div class="breadcrumb col-100">
<h2>UserProfile #<?=$_SESSION['Dname']?></h2>
<small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
</div>
<div class="card col-100 ">
<form method="post" editFormContent="#edit">
<table class="col-100">
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<label>
<td>First Name</td>
<td>
<span class="editFormSpan">Fname Lname</span>
</td>
</label>
</tr>
<tr>
<td colspan="2">Edit</td>
</tr>
</table>
</form>
</div>
</div>
Pls Help me Thanks

.parent() only selects the direct parent (one level up). .parents() will select all the way up the ancestor chain.
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
$(this).parents("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
<div class="breadcrumb col-100">
<h2>UserProfile #<?=$_SESSION['Dname']?></h2>
<small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
</div>
<div class="card col-100 ">
<form method="post" editFormContent="#edit">
<table class="col-100">
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<label>
<td>First Name</td>
<td>
<span class="editFormSpan">Fname Lname</span>
</td>
</label>
</tr>
<tr>
<td colspan="2">Edit</td>
</tr>
</table>
</form>
</div>
</div>

You can also use .closest() which will only select the nearest parent that matches instead of all parents.
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
$(this).closest("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
<div class="breadcrumb col-100">
<h2>UserProfile #<?=$_SESSION['Dname']?></h2>
<small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
</div>
<div class="card col-100 ">
<form method="post" editFormContent="#edit">
<table class="col-100">
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<label>
<td>First Name</td>
<td>
<span class="editFormSpan">Fname Lname</span>
</td>
</label>
</tr>
<tr>
<td colspan="2">Edit</td>
</tr>
</table>
</form>
</div>
</div>

You just need to add an id to your form and grab it with jquery, then calling .hide()
form id="myForm" ....
Add this script tag at the end of the body.
<script>
$(document).ready(function () {
$('#edit').click(function(e){
e.preventDefault();
$('#myForm').hide();
});
});
</script>
I think when we are using jquery, there is no need to make our life hard with complicated selectors.

Jquery "closest" and "find" functions returns "undefined"!

I want to get the value of first <td> of the row that the clicked element exist in it. here is the code I use:
The result is "undefined" when function is triggered. where do i wrong?
function verifyOfflinepayment() {
$("#verifying").show();
alert($(this).closest('tr').find('td').eq(0).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>$paymentId</td>
<td>
<a href='#modal$i'>مشاهده رسید</a>
</td>
<td onclick='verifyOfflinepayment()'>
$persian_date
</td>
<td>
<div class='pretty p-icon p-round p-pulse'>
<input type='checkbox' />
<div class='state p-success'>
<i class='icon mdi mdi-check'></i>
<label>تایید</label>
</div>
</div>
</td>
</tr>
</table>

try this
function verifyOfflinepayment(event) {
$("#verifying").show();
alert($(event).parent().find('td').eq(0).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>$paymentId</td>
<td>
<a href='#modal$i'>مشاهده رسید</a>
</td>
<td onclick='verifyOfflinepayment(this)'>
$persian_date
</td>
<td>
<div class='pretty p-icon p-round p-pulse'>
<input type='checkbox' />
<div class='state p-success'>
<i class='icon mdi mdi-check'></i>
<label>تایید</label>
</div>
</div>
</td>
</tr>
</table>

You need to pass the reference of the clicked element in the verifyOfflinepayment function like verifyOfflinepayment(this). Currently $(this) references your window object so you are getting undefined.
function verifyOfflinepayment(elem) {
$("#verifying").show();
alert($(elem).closest('tr').find('td:eq(0)').html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>$paymentId</td>
<td>
<a href='#modal$i'>مشاهده رسید</a>
</td>
<td onclick='verifyOfflinepayment(this)'>
$persian_date
</td>
<td>
<div class='pretty p-icon p-round p-pulse'>
<input type='checkbox' />
<div class='state p-success' >
<i class='icon mdi mdi-check' ></i>
<label>تایید</label>
</div>
</div>
</td>
</tr>
</table>

Moving data betwen tables with "this"

I have a game that i'm working on and in it theres a shop that has two divs: a "Buy" section and a "Checkout". The first allows you to select different items and then move them into the "Checkout" using a button for each row. My problem is that i'm unsure how to move each selected row across to the second div (checkout).
Eg:
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<th>Level Required</th><th>Item</th><th>Cost</th>
<tr><td>Level 1</td><td><img src="img/shop/pickaxe_rusty.png" id="item1"></td><td>50 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 10</td><td><img src="img/shop/pickaxe_iron.png" id="item2"></td><td>500 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 25</td><td><img src="img/shop/pickaxe_steel.png" id="item3"></td><td>5000 Gold</td><td class="moveToCheckout">⇒</td></tr>
</table>
</div>
The <td class="moveToCheckout">⇒</td>or ⇒ is what the user will click on to move the items across.
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table>
<th>Items</th><th>Quantity</th><th>Price</th>
<tr><td><img src="" id=""></td><td><input type="text" value="1" id="quantity"><td>X Gold</td></td></tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>
Additional info:
I have an array for each item with all the info for it (cost, level, img src), would it be possible to use this to create a new row in the checkout section and insert the details into it using a for loop?

I don't exactly understand what you want, but something like this should look close enough :
function buy(elem) {
$(elem).parents('tr').appendTo("#co-table");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<tr>
<th>Level Required</th>
<th>Item</th>
<th>Cost</th>
</tr>
<tr>
<td>Level 1</td>
<td>
<img src="img/shop/pickaxe_rusty.png" id="item1">
</td>
<td>50 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 10</td>
<td>
<img src="img/shop/pickaxe_iron.png" id="item2">
</td>
<td>500 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 25</td>
<td>
<img src="img/shop/pickaxe_steel.png" id="item3">
</td>
<td>5000 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
</table>
</div>
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table id="co-table">
<tr>
<th>Items</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>
<img src="" id="">
</td>
<td>X Gold</td>
<td>
<input type="text" value="1" id="quantity">
</td>
</tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>

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();
});

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