Databases
StackOverflow2013
Postsdbo
POAutomatically making a div appear based on status of radio button with JavaScript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAutomatically making a div appear based on status of radio button with JavaScript
    text
    copied!<p>I have a form which posts data to the same page. Based on the user's radio button selection I am inserting <em>checked="checked"</em> into the radio button form element to redisplay the correct selection. This works fine, however when the form is redisplayed (in case of bad input etc), I need a div to be revealed (containing the relevant fields from the form).</p> <p>I have an onclick event that reveals the div in the first place (before the user has posted the form), and this works fine, but when I redisplay the form I don't want the user to have to manually reveal the form again by clicking.</p> <p>Therefore I've been trying something along the following lines (heavily cut down for the purposes of this post)...</p> <pre><code>&lt;link href="styles/style1.css" rel="stylesheet" type="text/css" /&gt; &lt;script language="JavaScript"&gt; if (document.getElementById('complete_yes').checked) { document.getElementById('repair_complete').style.display = 'block'; } else { document.getElementById('repair_complete').style.display = 'none'; } &lt;/script&gt; &lt;form action="javascript_test.php" method="POST"&gt; &lt;input id="complete_yes" type="radio" name="complete" checked="checked" value="true"/&gt;Yes &lt;input id="complete_no" type="radio" name="complete" value="false"/&gt;No &lt;input type="submit" value="Save"&gt; &lt;div id="repair_complete"&gt; I'm a div! &lt;/div&gt; </code></pre> <p>... but it returns an <em>Object Required</em> javascript error (as it does in the 'real' page):</p> <p>Message: Object required<br> Line: 3<br> Char: 1<br> Code: 0<br> URI: <a href="http://localhost/repair_system/javascript_test.php" rel="nofollow noreferrer">http://localhost/repair_system/javascript_test.php</a><br></p> <p>Why is this? Am I not correctly referencing the form element? Apologies if I'm being a "div" (deliberate bad pun intended!), I'm yet to learn about the fun and games of javascript!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload