Below is the HTML and the JavaScript being used to display the dropdown only if one of the options from the preceding dropdown is selected. When I select the one that is linked the following dropdown it works while when I select the second option not linked to the following dropdown and click submit, it throws the error "An invalid form control with name='AdjustmentBuyerPrice' is not focusable". Please point out the mistake that I did in my code.
`{include file="header.tpl" page_name='Amazon Order Adjustment' extra_javascript='<script language="JavaScript" src="includes/update_shipping_info.js"></script>'}
{literal}
<style type="text/css">
#loading-icon {
position: absolute;
top: 75px;
right: 250px; width:
32px; height: 32px;
display: none;
background: url('/images/lightbox/loading.gif');
}
</style>
{/literal}
{if isset($tpl_error_msg) }
<div id="message">{$tpl_error_msg}</div>
{/if}
{include file='view_order_snippet.tpl'}
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
{if !($update_shipping_info_flag)}
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
{else}
{section name=lineitems loop=$tpl_order_list}
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="{$tpl_order_list[lineitems].id}">
<input type="hidden" name="vendor_id_array[]" value="{$tpl_order_list[lineitems].vendor_fk}">
</td>
<td>{$tpl_order_list[lineitems].sku}
<td>{$tpl_order_list[lineitems].item_description}</td>
<td>{$tpl_order_list[lineitems].quantity}</td>
<td>{$tpl_order_list[lineitems].item_status}</td>
<td>{$tpl_order_list[lineitems].shipping_mode}</td>
{if $tpl_order_list[lineitems].shipping_tracking_no == ""}
<td>N/A</td>
{else}
<td>{$tpl_order_list[lineitems].shipping_tracking_no}</td>
{/if}
</tr>
{/section}
{/if}
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
{html_options options=$tpl_action_type}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
{html_options options=$tpl_adjustment_reason}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
{html_options options=$tpl_adjustment_type}
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice" required>
<option value="">Select Adjustment Buyer Price Type</option>
{html_options options=$tpl_adjustment_buyer_price}
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="submit" id="cancel_button" name="cancel_action" value="Cancel" class="button">
</div>
</div>
</form>
{literal}
<script type="text/javascript">
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function () {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove required.
}
});
});
</script>
{/literal}
{include file="footer.tpl"}
This is happening because you have AdjustmentBuyerPrice as required so when you have not selected value ItemPriceAdjustments its hidden and when you click on submit button that error shows .Instead you can remove required attribute when that select box is hidden else add required attribute .
Demo Code :
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function() {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="1">
<input type="hidden" name="vendor_id_array[]" value="2">
</td>
<td>A
<td>B</td>
<td>5</td>
<td>ok</td>
<td>htm</td>
<td>N/A</td>
</tr>
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
<option value="ItemPriceAdjustments">ItemPriceAdjustments</option>
<option value="ItemPriceAdjustments1">5</option>
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<!--remove required from here-->
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
<option value="">A</option>
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
</form>
I have a spreadsheet of data and input fields.
When the input field is empty, it should click the copy text button from the row with class "shipdate". I always copy the entry in the code. Can anyone tell me where I'm wrong.
This is my code
$(".btn-yes").click(function() {
var $val = $(document).find('.date');
$('.date').each(function() {
var $val = $(this).val();
if ($val === "") {
$('tr').each(function() {
var $this = $(this),
daata = $this.find('td.shipdate').html();
$this.find('input').val(anData);
})
} else(
console.log("empty")
)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
</tr>
</thead>
<tbody>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
</tbody>
</table>
<div>
<button class="btn-yes">
Click here
</button>
</div>
</div>
You likely meant this. Note I had to trim and remove the trailing dot in the shipdate
You can remove the .slice(0,-1) if the shipdate cell contains a date without a trailing dot
You can also freely change $(this).parent().next().text() to $(this).closest("tr").find(".shipdate").text()
in case you want to move the cells around
$(".btn-yes").click(function() {
$('.date').each(function() {
var $val = $(this).val();
var shipdate = $.trim($(this).parent().next().text()).slice(0,-1)
$(this).val($val === "" ? shipdate : $val)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
</tr>
</thead>
<tbody>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
</tbody>
</table>
<div>
<button class="btn-yes">
Click here
</button>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
i tried to submit my form with that java script. But it didn't work as it should be,it doesn't get the value from the script. it's only work for the alert coding in my html body, but it didn't read the function check(), is my form have some problem?
<form name="myForm" method="post" onsubmit="return check()">
<table width="100%">
<tr>
<div id="space">
YOUR DETAILS
</div><!-- space -->
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>First Name</td>
<td width="720">
<input type="text" name="fname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Last Name</td>
<td width="720">
<input type="text" name="lname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Email</td>
<td width="720">
<input type="email" name="email">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Telephone</td>
<td width="720">
<input type="tel" name="telephone">
</td>
</tr>
<tr>
<td width="186">Fax</td>
<td width="720">
<input type="tel" name="fax">
</td>
</tr>
<tr>
<td width="186">Company</td>
<td width="720">
<input type="text" name="company">
</td>
</tr>
<tr>
<td width="186">Company ID</td>
<td width="720">
<input type="text" name="cid">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Address 1</td>
<td width="720">
<input type="text" name="add1">
</td>
</tr>
<tr>
<td width="186">Address 2</td>
<td width="720">
<input type="text" name="add2">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>City</td>
<td width="720">
<input type="text" name="city" >
</td>
</tr>
<tr>
<td width="186">Poscode</td>
<td width="720">
<input type="text" name="poscode" >
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Country</td>
<td width="720">
<select name="country">
<option value="malaysia">Malaysia</option>
<option value="australia">Australia</option>
<option value="japan">Japan</option>
<option value="newzealand">New Zealand</option>
</select>
</td>
</tr>
</table>
<br><br>
<input type="button" onclick="check()" name="submit" value="Submit" class="sbutton" />
<button name="subcancel" class="sbutton" value="Cancel" >CANCEL</button>
</form>
This is my javascript function
function check(){
alert('hi');
var isi1=document.forms["myForm"]["fname"].value;
var isi2=document.forms["myForm"]["lname"].value;
var isi3=document.forms["myForm"]["email"].value;
var isi4=document.forms["myForm"]["tel"].value;
var isi5=document.forms["myForm"]["add1"].value;
var isi6=document.forms["myForm"]["city"].value;
var isi7=document.forms["myForm"]["country"].value;
if (isi1 == "") {
alert("Please complete all your detail with '*' symbol!");
return false;
}
else if(isi2 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi3 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi4 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi5 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi6 ==""){
alert("Please complete your detail!");
return false;
}
else{
alert("Hi "+isi1+" "+isi2+"!! You are succesfully registered to our bookstore!!");
return true;
}
}
Check the working code below:
function check() {
alert('hi');
var isi1 = document.forms["myForm"]["fname"].value;
var isi2 = document.forms["myForm"]["lname"].value;
var isi3 = document.forms["myForm"]["email"].value;
var isi4 = document.forms["myForm"]["telephone"].value;
var isi5 = document.forms["myForm"]["add1"].value;
var isi6 = document.forms["myForm"]["city"].value;
var isi7 = document.forms["myForm"]["country"].value;
if (isi1 == "") {
alert("Please complete all your detail with '*' symbol!");
return false;
}
else if (isi2 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi3 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi4 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi5 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi6 == "") {
alert("Please complete your detail!");
return false;
}
else {
alert("Hi " + isi1 + " " + isi2 + "!! You are succesfully registered to our bookstore!!");
return true;
}
}
<form name="myForm" method="post" onsubmit="return check()">
<table width="100%">
<tr>
<div id="space">
YOUR DETAILS
</div><!-- space -->
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>First Name</td>
<td width="720">
<input type="text" name="fname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Last Name</td>
<td width="720">
<input type="text" name="lname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Email</td>
<td width="720">
<input type="email" name="email">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Telephone</td>
<td width="720">
<input type="tel" name="telephone">
</td>
</tr>
<tr>
<td width="186">Fax</td>
<td width="720">
<input type="tel" name="fax">
</td>
</tr>
<tr>
<td width="186">Company</td>
<td width="720">
<input type="text" name="company">
</td>
</tr>
<tr>
<td width="186">Company ID</td>
<td width="720">
<input type="text" name="cid">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Address 1</td>
<td width="720">
<input type="text" name="add1">
</td>
</tr>
<tr>
<td width="186">Address 2</td>
<td width="720">
<input type="text" name="add2">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>City</td>
<td width="720">
<input type="text" name="city">
</td>
</tr>
<tr>
<td width="186">Poscode</td>
<td width="720">
<input type="text" name="poscode">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Country</td>
<td width="720">
<select name="country">
<option value="malaysia">Malaysia</option>
<option value="australia">Australia</option>
<option value="japan">Japan</option>
<option value="newzealand">New Zealand</option>
</select>
</td>
</tr>
</table>
<br><br>
<input type="button" onclick="check()" name="submit" value="Submit" class="sbutton" />
<button name="subcancel" class="sbutton" value="Cancel">CANCEL</button>
</form>
I want to add a row to my table to allow to the user to add data which will be inserted then into the data base.
I have imbricated tables (the coed given present just first row to simplify but it’s a long form given as a table).
My first problem is when I add the select to my getElementById it won’t work?
My second problem I don’t know if I can recuperate the fields added by the user and inserted them to my database?
I found the example that I have followed in ( Add table row in jQuery )
<html>
<head>
<script type="text/javascript">
function displayResult() {
document.getElementById("tabsalaire").insertRow(-1).innerHTML = '<td><input name="salaireparstatut4" id="salaireparstatut4" /></td>';
document.getElementById("tabtitulaire").insertRow(-1).innerHTML = '<td><input name="nbtitulaire4" id="nbtitulaire4" /></td>';
document.getElementById("tabfemale").insertRow(-1).innerHTML = '<td><input name="nbfemale4" id="nbfemale4" /></td>';
document.getElementById("tabsommeparstatut").insertRow(-1).innerHTML = '<td><input name="sommeparstatut4" id="sommeparstatut4" /></td>';
document.getElementById("selectstatus").insertRow(-1).innerHTML = '<td><select name="statutselect4" required> < option value = "" > choisir < /option> < option value = "Professeur" > Professeur < /option> < option value = "Assistant" > Assistant < /option> < /select> < input type = "hidden"
name = "EnseignementSuperieur"
value = "EnseignementSuperieur" / > < /td>';
}
</script>
</head>
<body>
<form method="post" action="processform.php">
<table border="1">
<tr>
<th>Add</th>
<th>Salaire annuel</th>
<th>nombre titulaire</th>
<th>Nombre femme</th>
<th>Somme</th>
<th>Statut</th>
<th>Type</th>
</tr>
<td>
<table>
<tr>
<td>
<button type="button" onClick="displayResult()">Insert new row</button>
</td>
</tr>
</table>
</td>
<td>
<table id="tabsalaire">
<tr>
<td>
<input name="salaireparstatut1" id="salaireparstatut1" />
</td>
</tr>
<tr>
<td>
<input name="salaireparstatut2" id="salaireparstatut2" />
</td>
</tr>
<tr>
<td>
<input name="salaireparstatut3" id="salaireparstatut3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabtitulaire">
<tr>
<td>
<input name="nbtitulaire1" id="nbtitulaire1" />
</td>
</tr>
<tr>
<td>
<input name="nbtitulaire2" id="nbtitulaire2" />
</td>
</tr>
<tr>
<td>
<input name="nbtitulaire3" id="nbtitulaire3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabfemale">
<tr>
<td>
<input name="nbfemale1" id="nbfemale1" />
</td>
</tr>
<tr>
<td>
<input name="nbfemale2" id="nbfemale2" />
</td>
</tr>
<tr>
<td>
<input name="nbfemale3" id="nbfemale3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabsommeparstatut">
<tr>
<td>
<input name="sommeparstatut1" id="sommeparstatut1" /> </td>
</tr>
<tr>
<td>
<input name="sommeparstatut2" id="sommeparstatut2" />
</td>
</tr>
<tr>
<td>
<input name="sommeparstatut3" id="sommeparstatut3" />
</td>
</tr>
</table>
</td>
<td>
<table id="selectstatus">
<tr>
<td>
<select name="statutselect1" required>
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre1" value="EnseignementSuperieur" /> </td>
</tr>
<tr>
<td>
<select name="statutselect2">
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre2" value="EnseignementSuperieur" /> </td>
</tr>
<tr>
<td>
<select name="statutselect3">
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="ProfesseurConf">ProfesseurConf</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre3" value="EnseignementSuperieur" /> </td>
</tr>
<tr></tr>
</table>
</td>
<th>
EnseignementSuperieur </th>
</tr>
<td> </td>
<td>
<input name="SubSommenbTitulaireTypeCadre" id="SubSommenbTitulaireProfChercheur" />
</td>
<td>
<input name="SubSommenbFemaleTypeCadre" id="SubSommenbFemaleProfChercheur" />
</td>
<td>
<input name="SubSommeNbProfTypeCadre" id="SubSommeNbProfChercheur" />
</td>
<td>
<input name="SubSommeSalaireAnnuelTypeCadre" id="SubSommeSalaireAnnuelProfChercheur" />
</td>
<th>Somme SUB</th>
<tr>
</tr>
<tr>
<td>
<input type="submit" name="Validate" value="Validate" />
</td>
</tr>
</table>
</body>
</html>
I am trying to swap the form values in row1 with the form values of row2 without swapping the rows. Can someone show me away to achieve this in pure Javascript, vanilla JS, or jQuery. I made the table rows shorter with just two rows, but the actual table consists of 17 rows. Please look very closely at the ids and form values in the third example.
When the UP or DOWN button is not click, the table looks like this in simple form:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="up_arrow">UP</button></td>
<td><input value="1></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr id="row2">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This the code currently - When the UP or DOWN buttons are clicked the table looks like this:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This is what I am trying to accomplish - The values of the inputs should swap except for the tr. Notices the tr ids remain the same but form values are swapped:
Is there a way to achieve this in pure javascript, vanilla JS, or jquery. It will even be even better if this can be done with .html() instead of .val()
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
Sorry it took awhile to get back to this. I am submitting this as another answer so that you can compare the two solutions. They are quite similar, and you may find it useful to compare the changes.
jsFiddle Solution
var tbl = $('table'),new_ndx,topRow,trStuff,botRow,brStuff;
$(document).on('click','button',function() {
var dir = $(this).attr('class');
var row = $(this).closest("tr");
var ndx = row.index();
//row.remove();
if (dir=='up_arrow'){
new_ndx = ndx-1;
topRow = tbl.find('tr').eq(new_ndx);
trStuff = topRow.html();
botRow = tbl.find('tr').eq(ndx);
brStuff = botRow.html();
topRow.html(brStuff);
botRow.html(trStuff);
} else {
new_ndx = ndx++;
topRow = tbl.find('tr').eq(new_ndx);
trStuff = topRow.html();
botRow = tbl.find('tr').eq(ndx);
brStuff = botRow.html();
topRow.html(brStuff);
botRow.html(trStuff);
}
});
$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function() {
var row = $(this).parents("tr");
if ($(this).is(".up_arrow")) {
alert("Inner Html Of Previous Row : " + row.prev().html());
} else {
alert("Inner Html Of Next Row : " + row.next().html());
}
});
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>
$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function() {
var objRow = $(this).parents("tr");
var intCurrentInputValue = objRow.find("input").val();
if ($(this).is(".up_arrow")) {
var intPreviousInputValue = objRow.prev("tr").find("input").val();
objRow.find("input").val(intPreviousInputValue);
objRow.prev("tr").find("input").val(intCurrentInputValue);
} else {
var intNextInputValue = objRow.next("tr").find("input").val();
objRow.find("input").val(intNextInputValue);
objRow.next("tr").find("input").val(intCurrentInputValue);
}
});
});
table tr:first-child .up_arrow ,
table tr:last-child .down_arrow
{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>
I'm not entirely sure what you're trying to achieve, but your code is a bit all over the place.
Here's a sample of a pretty basic 'up/down' table row thingy.
Try not to mix using jQuery and vanilla JS. If you're using jQuery, you shouldn't need to use document.getElementsByClassName (or anything similar) at all. Use the $('.class') selector.
$('table').on('click', '.up', function(){
var $row = $(this).parents('tr');
var $prevRow = $(this).parents('tr').prev('tr');
$row.insertBefore($prevRow);
});
$('table').on('click', '.down', function(){
var $row = $(this).parents('tr');
var $prevRow = $(this).parents('tr').next('tr');
$row.insertAfter($prevRow);
});
$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function(e) {
var objCurrentRow = $(this).parents("tr");
var objAnotherRow = objCurrentRow.next("tr");
if ($(this).is(".up_arrow")) {
var objAnotherRow = objCurrentRow.prev("tr");
}
var arrAllInputOfCurrentRow = objCurrentRow.find("input,select");
var arrAllInputOfAnotherRow = objAnotherRow.find("input,select");
$.each(arrAllInputOfCurrentRow, function(intIndex, objInput) {
var mixTempValue = $(objInput).val();
var $objAnotherInput = $(arrAllInputOfAnotherRow[intIndex]);
$(objInput).val($objAnotherInput.val());
if ($objAnotherInput.is('select')) {
var objTempDropDown = $(objInput).html();
$(objInput).html($objAnotherInput.html());
$objAnotherInput.html(objTempDropDown);
}
$objAnotherInput.val(mixTempValue);
});
});
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="1" />
</td>
<td>
<select>
<option value="1" selected>1</option>
</select>
</td>
<td>
<select>
<option value="1a" selected>1a</option>
</select>
</td>
</tr>
<tr id="row2">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="2" />
</td>
<td>
<select>
<option value="2" selected>2</option>
</select>
</td>
<td>
<select>
<option value="2a" selected>2a</option>
</select>
</td>
</tr>
<tr id="row3">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="3" />
</td>
<td>
<select>
<option value="3" selected>3</option>
</select>
</td>
<td>
<select>
<option value="3a" selected>3a</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
$(document).on("click", ".up_arrow,.down_arrow", function(e) {
var $objCurrentRow = $(this).parents("tr");
var strTempHtml = $objCurrentRow.html();
var $objAnotherRow = $objCurrentRow.next("tr");
if ($(this).is(".up_arrow")) {
var $objAnotherRow = $objCurrentRow.prev("tr");
}
$objCurrentRow.html($objAnotherRow.html());
$objAnotherRow.html(strTempHtml);
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="1" />
</td>
<td>
<select>
<option value="1" selected>1</option>
</select>
</td>
<td>
<select>
<option value="1a" selected>1a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_chrome.gif" id="img1" />
</td>
</tr>
<tr id="row2">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="2" />
</td>
<td>
<select>
<option value="2" selected>2</option>
</select>
</td>
<td>
<select>
<option value="2a" selected>2a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_opera.gif" id="img2" />
</td>
</tr>
<tr id="row3">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="3" />
</td>
<td>
<select>
<option value="3" selected>3</option>
</select>
</td>
<td>
<select>
<option value="3a" selected>3a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_firefox.gif" id="img3" />
</td>
</tr>
</tbody>
</table>
</form>
Ali beat me to the punch, but here's another way to do it:
jsFiddle Demo
var tbl = $('table'),new_ndx;
$(document).on('click','button',function() {
var dir = $(this).attr('class');
var row = $(this).closest("tr");
var ndx = row.index();
row.remove();
if (dir=='up_arrow'){
new_ndx = ndx-1;
tbl.find('tr').eq(new_ndx).before(row);
}else{
new_ndx = ndx++;
tbl.find('tr').eq(new_ndx).after(row);
}
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {visibility: hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>