Question

javascript newbie here, I wrote a form in html and submitted it with an onchange event, but after I added a daterange picker in javascript the submission doesn’t work. Here is my code:

    <form id="dash_form" method="get">
        <div>Select a Tag Bundle dimension:</div>
        <select name="dimension" id="id_dimension" onchange="$('form#dash_form').submit()">
            <option value="">No dimension </option>
            <option value="Hello">Hello</option>
        </select>
        <h4>Please select a date range below:</h4>
        <div id="calendars"></div>
        <span>
        <input type="text" name="from" value="" id="start"/>
        &ndash;
        <input type="text" name="to" value="" id="end"/>
        </span>
    </form>
    <script type="text/javascript" charset="utf-8" src="/site_media/crm/javascripts/prototype.js"></script>
    <script type="text/javascript" charset="utf-8" src="/site_media/crm/javascripts/timeframe.js"></script>
    <script type="text/javascript" charset="utf-8">
      //<![CDATA[
        new Timeframe('calendars', {
          startField: 'from',
          endField: 'to',
          latest: Date.parseToObject({{Now}}),
          resetButton: 'reset' });
      //]]>
    </script>

in firebug I get $("form#dash_form") is null, and when I remove the script lines it works… what can cause this?

Answer 1

You appear to have added the prototypejs library to your project.

Both prototypejs and jQuery use the $ global identifier, so when you have both, they clash.

Either choose one library or the other (preferable in my opinion), or takes steps to resolve the conflict:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries