Hide div using javascript until a button is pressed

Question

Goal: When the ADD button is pressed, the div 'addStudentClub' is visible, but it should not be visible until the button is pressed.

Currently the form in the div shows up regardless of whether or not the button has been pressed

This is the php code i currently have. I have used a link to an external javascript file whose content is below the php one. I don't know if any of the javascript related items are correct - This is my first time using it so I apologise for any glaring stupid errors.

//Add students to club
echo "<script type=\"text/javascript\" src=\"javascript.js\"></script>";
echo "<div class='addButton'>";    
echo "<form method='POST' action='clubInfo.php?clubid=$ClubID&user=$user'>";
echo "<input type='submit' name='submit'  value='ADD' onclick='Javascript: showaddStudentClub();'>";
echo "</form>";
if (isset($_POST['submit']))   {
     echo "Add New  Student to: " . $nameofclub . "<br>";
     echo "Please enter the following details: " . "<br>";
}
echo "</div>";

//to be hidden until button has been pressed
echo "<div id='addStudentClub' style='display: hidden'>";
... (I have removed all the php because it's very long)
echo <<<_END
    <form method='post' action='clubInfo.php?clubid=$ClubID'>$error
    <span class='fieldname'>addfname</span><input type='text'
    maxlength='30' name='addfname' value='$addfname'>
    <span class='fieldname'>addlname</span><input type='text'
    maxlength='50' name='addlname' value='$addlname'>  
    <span class='fieldname'>addyear</span><input type='integer'
    maxlength='30' name='addyear' value='$addyear'>   
_END;
     echo "<span class='fieldname'>&nbsp;</span>";
     echo "<input type='submit' value='SAVE'>";
     echo "</form>"; 
 echo "</div>";

This is the javascript file (javascript.js)

function showaddStudentClub(){
document.getElementById( 'addStudentClub' ).style.display = 'block';
}

I thankyou in advance for any comments you may have :)

I think it would be easier to do using jQuery. Have you tried that ? — Maximus2012
– Maximus2012, Commented Apr 4, 2016 at 20:46
Something like this maybe: stackoverflow.com/questions/12237163/… (Google: jquery show hide div) — Maximus2012
– Maximus2012, Commented Apr 4, 2016 at 20:46
I appreciate the comments but i've been told i have to use javascript — mysterykid
– mysterykid, Commented Apr 4, 2016 at 20:49

omnichad · Accepted Answer · 2016-04-04 20:49:25Z

2

The correct CSS style is display: none:

echo "<div id='addStudentClub' style='display: none'>";

answered Apr 4, 2016 at 20:49

omnichad

1,6551 gold badge12 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mysterykid Over a year ago

thnakyou! how do i get it to show though when the button is pressed?

omnichad Over a year ago

Your JavaScript should do that just fine.

Jesse · Accepted Answer · 2016-04-04 20:49:49Z

0

You could do it in javascript or with CSS.

Javascript:

   document.addEventListener("DOMContentLoaded", function(e) { 
       document.getElementById('addStudentClub').style.display = 'none';
    });

CSS:

#addStudentClub{display:none;}

answered Apr 4, 2016 at 20:49

Jesse

761 silver badge9 bronze badges

Comments

Onur Yıldırım · Accepted Answer · 2016-04-04 21:07:48Z

0

var theButton = document.getElementById("#IdOfTheButton");
theButton.addEventListener("click",function(){
document.getElementById('addStudentClub').style.display = 'block';
})

I think that should work to show the part that you wanted when you pressed the related button.

answered Apr 4, 2016 at 21:07

Onur Yıldırım

3714 silver badges14 bronze badges

Collectives™ on Stack Overflow

Hide div using javascript until a button is pressed

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related