Loading ...
Sorry, an error occurred while loading the content.

How can I detect onChange events in a panel/form?

Expand Messages
  • josep.pijuan
    Hello, I m searching for a way to detect when the user change te value of an input/textarea/checkbox... in a panel, in order to submit the changes
    Message 1 of 3 , Apr 28, 2009
    • 0 Attachment
      Hello,

      I'm searching for a way to detect when the user change te value of an input/textarea/checkbox... in a panel, in order to submit the changes automatically every x seconds.

      I know one way, add an onChange listener to each element similar to this:

      <form>
      <input type="text" id="A" name="A" onchange="handleOnChange()">
      <input type="checkbox" id="B" name="B" onchange="handleOnChange()">
      <textarea id="C" name="C" cols="60" rows="2" onchange="handleOnChange()"></textarea>
      </form>

      .....
      <script>
      var submitPermission=false;

      function handleOnChange(){
      submitPermission=true;
      }

      function onSubmit(){
      if(submitPermission){
      submitPermission=false;
      submit();
      }
      }
      </script>




      But anybody knows another way to do this without declare the onchange property in each html element?
    • Eric Miraglia
      Josep, I d recommend reading about the Event Utility: http://developer.yahoo.com/yui/event/ (User s Guide)
      Message 2 of 3 , Apr 29, 2009
      • 0 Attachment
        Josep,

        I'd recommend reading about the Event Utility:


        Ultimately, you'll write code like this after you render your panel:

        YAHOO.util.Event.on("A", "change", hnadleOnChange);

        -Eric




        On Apr 28, 2009, at 8:54 AM, josep.pijuan wrote:

        Hello,

        I'm searching for a way to detect when the user change te value of an input/textarea/ checkbox. .. in a panel, in order to submit the changes automatically every x seconds.

        I know one way, add an onChange listener to each element similar to this:

        <form>
        <input type="text" id="A" name="A" onchange="handleOnC hange()">
        <input type="checkbox" id="B" name="B" onchange="handleOnC hange()">
        <textarea id="C" name="C" cols="60" rows="2" onchange="handleOnC hange()"> </textarea>
        </form>

        .....
        <script>
        var submitPermission= false;

        function handleOnChange( ){
        submitPermission= true;
        }

        function onSubmit(){
        if(submitPermission ){
        submitPermission= false;
        submit();
        }
        }
        </script>

        But anybody knows another way to do this without declare the onchange property in each html element?


      • josep.pijuan
        Hello Eric, First of all thank you very much for your answer. I ve read about it, I think this solution is better than I explained before but it s also hard to
        Message 3 of 3 , Apr 29, 2009
        • 0 Attachment
          Hello Eric,

          First of all thank you very much for your answer.

          I've read about it, I think this solution is better than I explained before but it's also hard to implement.

          In my real problem I have a lot of forms in the same page, like 30, and some inputs in each form.

          I want to know which forms are modified by the user and save its name/id in order to submit the changes automatically every x seconds.

          If I follow your advise I have to add a listener to each element, I could iterate all form elements and add listeners to each one, but it could be a very hard operation, but possibly is the best way, I don't know.

          I've also read about the bubbling library of Caridy Patino (http://www.bubbling-library.com) and the global behaviours, but I'm not sure if this option is the best for my problem, or it exists another way.

          Has anybody solved a similar problem?

          Thanks for your answers

          Josep

          --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
          >
          > Josep,
          >
          > I'd recommend reading about the Event Utility:
          >
          > http://developer.yahoo.com/yui/event/ (User's Guide)
          > http://developer.yahoo.com/yui/examples/event/eventsimple.html (Simple
          > tutorial)
          >
          > Ultimately, you'll write code like this after you render your panel:
          >
          > YAHOO.util.Event.on("A", "change", hnadleOnChange);
          >
          > -Eric
          >
          >
          >
          >
          > On Apr 28, 2009, at 8:54 AM, josep.pijuan wrote:
          >
          > >
          > >
          > > Hello,
          > >
          > > I'm searching for a way to detect when the user change te value of
          > > an input/textarea/checkbox... in a panel, in order to submit the
          > > changes automatically every x seconds.
          > >
          > > I know one way, add an onChange listener to each element similar to
          > > this:
          > >
          > > <form>
          > > <input type="text" id="A" name="A" onchange="handleOnChange()">
          > > <input type="checkbox" id="B" name="B" onchange="handleOnChange()">
          > > <textarea id="C" name="C" cols="60" rows="2"
          > > onchange="handleOnChange()"></textarea>
          > > </form>
          > >
          > > .....
          > > <script>
          > > var submitPermission=false;
          > >
          > > function handleOnChange(){
          > > submitPermission=true;
          > > }
          > >
          > > function onSubmit(){
          > > if(submitPermission){
          > > submitPermission=false;
          > > submit();
          > > }
          > > }
          > > </script>
          > >
          > > But anybody knows another way to do this without declare the
          > > onchange property in each html element?
          > >
          > >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.