Menu
I have this piece of code:
<div>
<form name='profileForm' id='profileForm' action='' method='get'>
<input type='submit' name='ProfileBtn' id='ProfileBtn' class='buttonC' value='My Profile' />
</form>
<br />
<form name='logoutForm' id='logoutForm' action='' method='get'>
<input type='submit' name='LogOutBtn' id='LogOutBtn' class='buttonC' value='Logout' />
</form>
</div>
When I render the above the "profileForm" does not appear (although the profileBtn DOES appear). the seconed form has no problems, which is weird because they are both similar.
It's probably an easy question but I have no idea what's the problem.
694
If the form is not visible on the page, in most cases this means there is a JavaScript error on the page. It could be caused by a number of things and most of the time it's another plugin or the theme at fault.
The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. The formtarget attribute overrides the target attribute of the <form> element. Note: The formtarget attribute is new for the <input> element with type="submit" in HTML5.
To show or hide a form on a button click: Add a click event listener to the button element. Each time the button is clicked check if the form element is hidden. If the form is hidden, show it, otherwise hide the form.
This just happened to me using Chrome -- it was because I had a form within a form. It looks like Chrome just stripped out the <form> open and close tag because my form was within another form. When I moved one form outside of the other, then both <form> tags were rendered in the html as intended.
Crackermann was getting at this in his answer too.
It's hard to give a direct solution without seeing your full html, but I'm guessing this is your problem - you need to make sure your form is not within another form. Really simple example to illustrate this:
Form within another form, notice if you run this code in Chrome and inspect <form id="form2"> is not rendered:
<html>
<head></head>
<body>
<form id="form1">
<div>form within a form</div>
<form id="form2">
<input type="text" placeholder="name" /><br/>
<input type="text" placeholder="title" />
</form>
</form>
</body>
</html>If you move form2 outside of form1, run the code in Chrome and inspect, then <form id="form2"> is rendered:
<html>
<head></head>
<body>
<form id="form1">
<div>form2 moved outside of form1</div>
</form>
<form id="form2">
<input type="text" placeholder="name" /><br/>
<input type="text" placeholder="title" />
</form>
</body>
</html>well then somehow there was a weird problem with the forms, the button didn't show up because when i ran the website the the 'profileForm' just disappeared somehow (and didn't show up in the console). what i did was adding a third Form before 'profileForm' which somehow solved this.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
