Question

In a php page I have placed a submit button,

HTML:

<input type="submit" name="btnAdd" id="btnAdd" Value="Add"> 

I need to hide this button (using jQuery) when link is cliked,

Link:

echo  '<a href=" '.$_SERVER['PHP_SELF'].'" onClick="MyFunction()"> Edit </a>';

Javascript:

<script type="text/javascript">
    $(document).ready(function() {
        function MyFunction(){      
             $('btnAdd').hide();
         });
</script>

But this code does not hide the button as expected. How can I fix this?

Answer 1

You have a wrong selector. You need to use #btnAdd for an id selector:

<script type="text/javascript">
    function MyFunction() {      
        $('#btnAdd').hide();
    }
</script>

Also you should put the MyFunction function outside of the document.ready callback to avoid making it privately scoped.

Another possibility is to do this unobtrusively:

echo  '<a href=" '.$_SERVER['PHP_SELF'].'" id="edit"> Edit </a>';

which seems easier to be written as:

<a href="#" id="edit">Edit</a>

and then subscribe for the .click() event of the edit link:

<script type="text/javascript">
    $(function() {
        $('#edit').click(function() {
            $('#btnAdd').hide();
        });
    });
</script>