How to clear the text box and By dragging changing of fields

Question

Hello Members,

Hope you had a great weekeend!!

I am trying to add the First name and last name, By clicking on add the txtboxes need to be empty..
In the below jquery grid, I need to change the order of rows...

Here I am attaching the code, Can any one help me here..!!

Thannk you in advance!!

Amit Mohanty · Answer

Hey check the below code "C#" AutoEventWireup= "true" CodeFile= "Home.aspx.cs" Inherits= "Home" %> "http://www.w3.org/1999/xhtml" > "server" > Demo "utf-8" /> "viewport" content= "width=device-width, initial-scale=1" /> "stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" > "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" > "stylesheet" href= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" /> "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js" > "text/css" > table th, table td { width: 100px; padding: 5px; border: 1px solid #ccc; } .selected { background-color: #666; color: #fff; } "form1" runat= "server" > class = "container" > Basic Table "textBox1" runat= "server" OnTextChanged= "textBox1_TextChanged" > "textBox2" runat= "server" > "textBox3" runat= "server" > "button" id= "btnAdd" class = "btn btn-xs btn-primary classAdd" >Add More "gridView" style= "display: none" > class = "table" id= "maintable" > Firstname Lastname Email "button" id= "btnSubmit" class = "btn btn-primary btn-md pull-right btn-sm" >Submit "text/javascript" > $(document).ready(function () { $(document).on( "click" , ".classAdd" , function () { $(gridView).show(); //on is used for getting click event for dynamically created buttons var rowCount = $( '.data-contact-person' ).length + 1; var contactdiv = ' ' + ' + rowCount + '" class="f-name01">' + $( "#textBox1" ).val() + ' ' + ' + rowCount + '" class="l-name01">' + $( "#textBox2" ).val() + ' ' + ' + rowCount + '" class="email01">' + $( "#textBox3" ).val() + ' ' + ' Remove ' + ' ' ; $( '#maintable' ).append(contactdiv); // Adding these controls to Main table class $( "#textBox1" ).val( '' ); $( "#textBox2" ).val( '' ); $( "#textBox3" ).val( '' ); }); $(document).on( "click" , ".deleteContact" , function () { $( this ).closest( "tr" ).remove(); // closest used to remove the respective 'tr' in which I have my controls }); }); "text/javascript" > $(function () { $( "#maintable" ).sortable({ items: 'tr:not(tr:first-child)' , cursor: 'pointer' , axis: 'y' , dropOnEmpty: false , start: function (e, ui) { ui.item.addClass( "selected" ); }, stop: function (e, ui) { ui.item.removeClass( "selected" ); } }); });

Laxmidhar Sahoo · Answer

hey In which base you reorder the row whether alphabetic or something else

Amit Mohanty · Answer

Hey to clear the textbobes add the below code after $('#maintable').append(contactdiv); line. $( "#textBox1" ).val( '' ); $( "#textBox2" ).val( '' );

Mas · Answer

Hi Amit, Thank you for your response, I want to drange the row RAJ and F need to come first, Need to give the drage action on the grid view... Thank you in advance!!