简体   繁体   中英

Is there something wrong with this call to a javascript function in an html form

I have a textbox which takes a date as input. I have added the checkboxes todaysDate4SD and todaysDate4ED so that when a user wants one of these text boxes to be today's date they can click the corresponding check box in order for it to be populated for them (they do not need ot fill in the textbox with today's date). I put ab alert inside the populateTodaysDate() function so I know it is not reaching inside of there. I'm kind of a newbie when it comes to JS so I'm not sure what syntax is wrong that it is not calling this function.

<div id="form">
  <form>
    <p class="field">Start Date:<input type="text" id="start" name="start" /></p>   
    <p class="field"><input type="checkbox" id="todaysDate4SD" name="todaysDate4SD"
                            onclick="populateTodaysDate(todaysDate4SD,start);" />
    <p class="field">End Date:<input type="type" id="end" name="end" /></p>
    <p class="field"><input type="checkbox" id="todaysDate4ED" name="todaysDate4ED" 
                            onclick="populateTodaysDate(todaysDate4ED,end);" />
    <p class="field"><input type="checkbox" id="includeEndDate" name="includeEndDate" checked="true" />
    Include the end date in the calculation</p>
    <p class="submitbttn"><input type="button" value="Submit" onclick="calculate();" /></p>
  </form>

The parameters inside the onclick populateTodaysDate call (ie todaysDate4ED,end) are strings. I was attempting to pass in the id's so that in the function I could use document.getElementById(id) ... I tried passind in the actual element before (by putting this document.getElem... inside the onclick call but that didn't work either).

Below follows the function that I believe is not being called for some reason. It is in a script tag in the head of the html page.

    function populateTodaysDate(checkbox, dateBox) {
        alert("I'm here!")
        if(checkBox.checked) {
            dateBox.value =  dateToString(new Date()).
        } else {
            dateBox.value = "";
        }
    }

The alert is not important and was just added to see if I was actually entering this function...

... In case anyone wants to see dateToString...shouldn't be necessary (99.98% sure that is not where the problem is)

    function dateToString(d1) {
        var curr_year = d1.getFullYear();

        var curr_month = d1.getMonth() + 1; //Months are zero based
        if (curr_month < 10) {
            curr_month = "0" + curr_month;
        }

        var curr_date = d1.getDate();
        if (curr_date < 10) {
            curr_date = "0" + curr_date;
        }
        return curr_month + "/" + curr_date + "/" + curr_year;
    }

Your checkboxes should look like this:

<input type="checkbox" id="todaysDate4SD" name="todaysDate4SD"
                        onclick="populateTodaysDate(this,'start');" />

<input type="checkbox" id="todaysDate4ED" name="todaysDate4ED" 
                        onclick="populateTodaysDate(this,'end');" />

and update your function:

function populateTodaysDate(checkbox, dateBox) {
    dateBox = document.getElementById(dateBox);
    if(checkBox.checked) {
        dateBox.value =  (new Date()).toString("yyyy-MM-dd HH:mm:ss");
    } else {
        dateBox.value = "";
    }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM