CODEWITHSUNDEEP
javascriptjsp
Dicky Mahardika
Dicky Mahardika

Reputation: 89

onClick enable form

I have problem when i want show form edit

<!-- this is form-->
<table class="table table-bordered">
    <thead>
        <tr>
            <th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
        </tr>	
    </thead>
<% while(resultset.next()){ %>
    <tbody>
        <form method='POST' action='EditCompany'>
            <tr align='center'>
                <td><%= no %></td>
                <td><input id='f1' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(2)%>'></td>	
                <td><input id='f2' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(3)%>'></td>	
                <td><input id='f3'class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(4)%>'></td>	
                <td><input id='f4' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(5)%>'></td>	
                <td><input id='f5' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(6)%>'></td>	
                <td><input id='f6' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(7)%>'></td>
                <td><a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"></td>
                <td><a href="#" data-href="DeleteCompany?id=<%= resultset.getString(1)%>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash"></span></a></td>
            </tr>
        </form>
    </tbody>
<% no++; } %> 
</table>
The form will enable when the glypicon edit click. Here is the JAVASCRIPT :

<script type="text/javascript">
    function showDiv() {
        document.getElementById('welcomeDiv').style.display = "block";
    }
</script>

<script type="text/javascript"> 
    $('#elementId').click(function(){
        $('#f1').removeAttr("disabled");
        $('#f2').removeAttr("disabled");
        $('#f3').removeAttr("disabled");
        $('#f4').removeAttr("disabled");
        $('#f5').removeAttr("disabled");
        $('#f6').removeAttr("disabled");
        $('#f7').removeAttr("disabled"); 
    });
</script>

when <a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"> click for first row, work.

enter image description here

but for the second row like this

enter image description here

Upvotes: 0

Views: 1366

Answers (7)

Charanjeet Singh
Charanjeet Singh

Reputation: 145

Only add class in tbody tr and also it should be with dot in jquery syntax.I have mentioned classname and it should also be with .TrClassName which you will mention in tr.

Upvotes: 0

Charanjeet Singh
Charanjeet Singh

Reputation: 145

Add some class in tr. 

<script type="text/javascript"> 
    $('.abc').click(function(){
        $('trClassName').find('.aaa').attr('disabled',true);
		$(this).closest('tr').find('.aaa').attr('disabled',false);
        
        
    });
</script>

Hope it will solve all your problems.

Upvotes: 0

Charanjeet Singh
Charanjeet Singh

Reputation: 145

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
        </tr>	
    </thead>

    <tbody>
        <form method='POST' action='EditCompany'>
            <tr align='center'>
                <td>1</td>
                <td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
                <td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
                <td class="abc">AAA</td>
            </tr>
        </form>
    </tbody>

</table>

<script type="text/javascript">
    function showDiv() {
        document.getElementById('welcomeDiv').style.display = "block";
    }
</script>

<script type="text/javascript"> 
    $('.abc').click(function(){
		$(this).closest('tr').find('.aaa').attr('disabled',false);
        
        $(this).closest('tr td:eq(2)').find('a:eq(0)').show();
      $(this).closest('tr td:eq(2)').find('a:eq(1)').hide();
      // Or YOu can use
      $(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','block');
      $(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','none');
    });
</script>

Please refer eq:(COlUMN of TR). It starts from zero so make adjustment accordingly. Hope you get complete answer of your query.

Upvotes: 0

Charanjeet Singh
Charanjeet Singh

Reputation: 145

Basically when you click on AAA then it is removing the class "aaa" from input field. You can check it with Firebug . It is not showing or popping up anything in it. But I have written a new code. It will enable and disable the input 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
        </tr>	
    </thead>

    <tbody>
        <form method='POST' action='EditCompany'>
            <tr align='center'>
                <td>1</td>
                <td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
                <td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
                <td class="abc">AAA</td>
            </tr>
        </form>
    </tbody>

</table>

<script type="text/javascript">
    function showDiv() {
        document.getElementById('welcomeDiv').style.display = "block";
    }
</script>

<script type="text/javascript"> 
    $('.abc').click(function(){
		$(this).closest('tr').find('.aaa').attr('disabled',false);
        
        
    });
</script>

box.

Upvotes: 0

Charanjeet Singh
Charanjeet Singh

Reputation: 145

In this way you are just referring to closest element of click.You can modified any content based on this. Please feel free to ask any query, if you face any problem in it. I just shared an example for execution for this. This is applicable for any number of rows in a table.

Upvotes: 0

Charanjeet Singh
Charanjeet Singh

Reputation: 145

A small example to do for this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
        </tr>	
    </thead>

    <tbody>
        <form method='POST' action='EditCompany'>
            <tr align='center'>
                <td>1</td>
                <td><input type="text" class="aaa"/></td>
                <td><input type="text" class="aaa"/></td>
                <td class="abc">AAA</td>
            </tr>
        </form>
    </tbody>

</table>

<script type="text/javascript">
    function showDiv() {
        document.getElementById('welcomeDiv').style.display = "block";
    }
</script>

<script type="text/javascript"> 
    $('.abc').click(function(){
		
        $(this).closest('tr').find('.aaa').removeClass('aaa');
    });
</script>

Upvotes: 0

Charanjeet Singh
Charanjeet Singh

Reputation: 145

You are repeating the same id on one page. You must use only one id on a page. You can use the same class multiple times but not id.

Upvotes: 1

Related Questions