CODEWITHSUNDEEP
javascripthtml
Sarah Salar
Sarah Salar

Reputation: 303

Html button does not display form

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>

Upvotes: 0

Views: 151

Answers (4)

sravanthi
sravanthi

Reputation: 175

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>

Upvotes: 0

Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5556

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>

Upvotes: 0

Pengyy
Pengyy

Reputation: 38171

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>

Upvotes: 2

Vel
Vel

Reputation: 9317

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

Upvotes: 0

Related Questions