Html button does not display form

Question

here is my code. i have created a button and on click event i want to display form but my form is not displaying.

gives an error " Uncaught SyntaxError: Invalid or unexpected token"

<input id="Result" name="display" type="button" value="Cost Report" onclick=  document.getElementById("form id").style.display="block";
      style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
    
    <div> 
        <form id="form id" style="display: block;">Results</form>
    </div>

Your HTML is invalid, look at your onclick attribute on the input tag. Also form tag should surround the input field. — Joel Harkes, May 03 '17 at 15:44

score 2 · Accepted Answer · answered May 03 '17 at 05:13

2

When binding events to element, they should be wrapped by " or '.

<input id="Result" name="display" type="button" value="Cost Report" onclick='document.getElementById("form id").style.display="block";' style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">

<div>
  <form id="form id" style="display: none;">Results</form>
</div>

answered May 03 '17 at 05:13

Pengyy

37,383
15
83
73

thanks i have corrected my mistake. i want to display form in the center of the window , over world map. but my form is kept display below the header. – Sarah Salar May 03 '17 at 05:33
@SarahSalar you can try with cssstyles. take a look at http://stackoverflow.com/questions/9862167/positioning-div-element-at-center-of-screen – Pengyy May 03 '17 at 05:37
ok suggest me . i want to display all the calculated values on the form after clicking on a button, what do u prefer modal (javascript) or form. – Sarah Salar May 03 '17 at 06:18

score 0 · Answer 2 · answered May 03 '17 at 05:12

Try this. you should add single quotes onclick='document.getElementById("form id").style.display="block";'

    <input id="Result" name="display" type="button" value="Cost Report" onclick=  'document.getElementById("form id").style.display="block";'
      style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">

    <div> <form id="form id" style="display: none;">Results</form></div>

fiddlelink

score 0 · Answer 3 · answered May 03 '17 at 05:17

There should not be any space in id's, as id for a DOM element is unique. So please change your form id to something like id="form-id".

Also set form display:none.

  <input id="Result" name="display" type="button" value="Cost Report" onclick='document.getElementById("form-id").style.display="block";'
  style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">

<div> <form id="form-id" style="display: none;">Results</form></div>

score 0 · Answer 4 · answered May 03 '17 at 05:21

you can use ng-show and make your form visible on click and viceversa

<input id="Result" name="display" type="button" value="Cost Report" onclick= "showForm=!showForm"
      style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">

    <div> 
    <form id="form id" ng-show="showForm">Results</form>
</div>

Html button does not display form

4 Answers4