CODEWITHSUNDEEP
javascriptphphtmlmysql
wuv1
wuv1

Reputation: 59

Having problems with showing/hiding form using button (PHP/HTML/Javascript)

Before I explain what I'm having troubles with, I just want to let you guys know that I'm new to PHP/HTML (I have to learn this by myself for a class I'm taking), so I apologize if I'm asking stupid questions. If possible, an explanation of what I'm doing wrong and what I should be doing would be greatly appreciated! 

<script>
    function hide(d){
        document.getElementById(d).style.display = 'none';
    }
    function show(d){
        document.getElementById(d).style.display = 'block';
    }
    function reverse(d){
        if(document.getElementById(d).style.display == 'none') {
            document.getElementById(d).style.display = 'block';
        }
        else{
            document.getElementById(d).style.display = 'none';
        }
    }
</script>


<form>
    <button type = "button" onclick = "show(searchForm);">Perform Search</button>
    <button type = "button" onclick = "show(insertForm);">Insert Data</button>
</form>


<form id = "searchForm" style = "display: none;" action = "result.php" method = "post">
  
    <!-- My code -->  
  
</form>


<form id = "insertForm" style = "display: none;" action = "result.php" method = "post">
	
    <!-- My code -->
  
</form>

CURRENT SITUATION

The buttons show, but when I click on them, nothing happens. I'm not sure what I'm doing wrong.

EXPLANATION OF WHAT MY CODE/PROJECT IS SUPPOSED TO DO

I have a database that stores information about movies (title, actors, release date, etc.) and it's displayed in a HTML table. I want to let the user have the option to either search through the table based on what they want to search for (like entering an actor's name and have the table only show movies with that actor in it) or insert data into the database & table.

WHAT I WANT TO DO (THE PART I'M STUCK ON)

I want to create two buttons, one for showing the form for searching the table & one for showing the form for inserting data into the database. Whichever button the user clicks on, the corresponding form should show (and when the user clicks on the same button again, the form will be hidden). That's the part I'm currently stuck on.

I've done research and tried many other methods, but it's still not working. I would like to stick to using Javascript because it makes more sense to me.

Thanks in advance!

Upvotes: 2

Views: 329

Answers (1)

John Hascall
John Hascall

Reputation: 9416

The document.getElementById() function takes a string as an argument. Try: 

onclick = 'show("insertForm");'

Upvotes: 4

Related Questions