Javascript re-enable buttons

Question

Hi :) I have a quick JavaScript question as it is not my strong point and I have searched other forums but can't seem to get it working. The situation is I have a HTML form which includes a textbox that is driven by the JQuery Datepicker (id=datepicker), a 'Get Data' button (id=getdata) and 3 other buttons Edit (id=edit), Save (id=savechanges) and Delete (id=delete) as well as another textbox and textarea.

When a user chooses a date and clicks the "Get Data" button, the textbox and textarea are filled with data from the database. That works fine. Before the data from the database fills the textbox and textarea, the Edit, Save and Delete buttons are disabled by using the "disabled" property when creating them in the HTML form. My problem is I want to re-enable the buttons once the date has been chosen. My code so far is;

//Check if the request method is POST and if a date has been selected
if (($_SERVER["REQUEST_METHOD"] == "POST") && (isset($_POST['getdata'])))
{  
    if ($_POST['datepicker'] != "")
    {
    $HistoryDate = $_POST['datepicker'];
    $HistoryQuery = "SELECT Weight, Notes FROM `".$username."weight` WHERE Date = '   $HistoryDate';";
    $RunQuery = mysql_query($HistoryQuery) or trigger_error(mysql_error().$HistoryQuery);
    $details = mysql_fetch_array($RunQuery);

    $savedWeight = $details["Weight"];
    $savedNotes = $details["Notes"];

    ?>
    <script type="text/javascript">
    document.getElementById("edit").disabled=false;
    document.getElementById("savechanges").disabled=false; 
    document.getElementById("delete").disabled=false; 
    return false;
    </script>
    <?php
    }
    else
    {
    $GetDataError = "*You must select a date!";
    }
}

Everything in the code above works except the javascript part. Any help would be greatly appreciated thanks!

The HTML is as follows;

<div id="left">
<div id="border">
<h3 class="heading">Weight History</h3>
<p class="heading">Select a Date to View Your Weight Record:</p>
<form method="post" action="">
<table>
    <tr>
        <td><span class="error"><?php echo $GetDataError;?></span>
        <p>Date: <input type="text" id="datepicker" name="datepicker" /></p></td>
        <td><br><input name="getdata" style="width:75px; position:relative; font-size:14px; left:-100px; top:-7px; height:25px;" type="submit" id="getdata" value="Get Data"  /></td>
    </tr>
    <tr>
        <td>Your Weight was: (lbs)</td>
    </tr>
    <tr>    
        <td><input type="text" id="record" name="record" disabled="disabled" value="<?php echo $savedWeight; ?>" /></td>
    </tr>
    <tr>
        <td>Your Notes were:</td>
    </tr>
    <tr>
        <td><textarea name="oldnotes" cols="40" rows="13" MaxLength="300" disabled="disabled" id="oldnotes"><?php echo $savedNotes; ?></textarea></td>
    </tr>
    <tr>
            <td><br><input name="print" style="width:75px; position:relative; font-size:14px; left:2px; height:25px;" type="submit" id="print" value="Print" onClick="window.print()"  /></td>
            <td><br><input name="edit" disabled style="width:75px; position:relative; font-size:14px; right:258px; height:25px;" type="submit" id="edit" value="Edit" onclick="document.getElementById('oldnotes').disabled=false; document.getElementById('record').disabled=false; return false;" /></td>
            <td><br><input name="savechanges" disabled style="width:75px; position:relative; font-size:14px; right:250px; height:25px;" type="submit" id="savechanges" value="Save"  /></td>
            <td><br><input name="delete" disabled style="width:75px; position:relative; font-size:14px; right:240px; height:25px;" type="submit" id="delete" value="Delete"  /></td>
    </tr>

</table>
</form>
</div>
</div>

Answer 1

According to http://jsfiddle.net/2Gwt5/2/ both:

document.getElementById("edit").disabled=false;

and

document.getElementById("edit").removeAttribute("disabled");

work. Try removing the "return false" but if that doesn't work your JavaScript might not be running. I would add an alert for testing purposes and see if your code executes.

Answer 2

Use:

document.getElementById("ID").removeAttribute("disabled");

Answer 3

Try using .removeAttribute

   document.getElementById("edit").removeAttribute("disabled");
   document.getElementById("savechanges").removeAttribute("disabled");
   document.getElementById("delete").removeAttribute("disabled");