9 Replies Latest reply on Feb 8, 2013 12:13 PM by drsqueegee

    Get input value, validate it/add it elsewhere

    pmfr01 Level 2

      Hi.

      I'm creating a contact form and I need help.

       

      Getting input value and adding it elsewhere

      On top of all fields - name, e-mail, subject and message - I have a label text on top that should update as the user makes it's input. For ex., in the name field, the label text says: "Your name" - as soon as the user starts inputing it's name, the sentence should change to "Hello, XXX", where XXX should be his name.

       

      Getting input value and validating it

      The same thing occurs in the e-mail field, except, in this case I don't want it to update the input text, but to check that it is a valid e-mail and return, in the label text, something like "Your e-mail appears to be valid".

       

       

      pmfr

        • 1. Re: Get input value, validate it/add it elsewhere
          joel_pau Level 5

          Hi,

           

          You have a jquery function to do that: .val().

          Here: http://api.jquery.com/val/, you will find examples: Find the value of an input box, Set the value of an input box.

          • 2. Re: Get input value, validate it/add it elsewhere
            pmfr01 Level 2

            Hmm, it's a bit overwhelming to me. Let's see - I think it should be something like this (I narrowed it down to a single value):

             

            function displayVal() {
                var singleValue = $("#single").val();
                $("p").html("<b>Single:</b>" + singleValue);
            }
            $("select").change(displayVal);
            
            
            displayVal();
            

             

            For the name field, for ex., I have the

            input field "userFieldBox_name" (symbol) and inside it the actual text element called "commentLabel_name_titleValidated"

            and the

            top label text "commentLabelBox_name"(symbol) and inside the actual text field element called "userField_name_blank".

            How do I apply this in my case?

             

            pmfr

            • 3. Re: Get input value, validate it/add it elsewhere
              joel_pau Level 5

              Here is submit tags: https://www.box.com/s/7bsx5dstnrcj6zfw3by0

               

              Your code is a select tag. Here is another demo file about select tag: https://www.box.com/s/fjkdtaolrmgne8fv09qr

              • 4. Re: Get input value, validate it/add it elsewhere
                pmfr01 Level 2

                Thank you Joel.

                 

                pmfr

                • 5. Re: Get input value, validate it/add it elsewhere
                  drsqueegee Level 1

                  Hi Joel,

                   

                  I want to try to use the second example in your file you shared to run a function when the input is submitted. I have made a few changes...

                   

                  // option #2 : input tag with a default text and a submit button.

                   

                   

                  sym.$("formSubmit").html('<form><input id="myForm" type="text" placeholder="Enter a year between 4823 BCE - 1 BCE"/>'

                                                                                                  +'<br><input id= "myBtn" type="submit" value="Go to year"></form>');

                   

                   

                  sym.$("formSubmit").submit(function() {//This is where i need your help Joel

                    if ($("#myForm:first").val() == "pmfr") { alert ("You've right :)") }

                    else { alert ("You've wrong :(") } ;

                  });

                   

                  I want the user to enter an integer between 1 and 4823, then I want to take that figure and run it through a math function like this where x is the integer that was entered in the form.

                   

                  time in milliseconds = [(4823 - x)/2]*1000

                   

                  I then want the time in millseconds to be used to stop the timeline at that time.

                   

                  Example: If the visitor enters 587 and presses submit the timeline will go to and stop at 2118000.

                   

                  Any idea how to do this?

                   

                  Thanks!

                  • 6. Re: Get input value, validate it/add it elsewhere
                    joel_pau Level 5

                    Hi drsqueegee,

                     

                    You can try and test this code: https://www.box.com/s/u0bqtusf60pj8coelz52

                    I only try using Safari.

                     

                    function playYear(x){ return ((4823 - x)/2)*1000 };

                     

                            //Creating form

                             sym.$("gotoAndPlay").html('<form>'

                             +' <input id="playFrame" type="number" placeholder="Enter a year between 4823 BCE - 1 BCE"'

                             +' size="40" pattern="[0-9]"/>'

                             +' <br><input id="goto" type="button" value="Go to year"</form>');

                             //About forms: http://www.html5rocks.com/en/tutorials/forms/html5forms/

                     

                             //gotoAndPlay after clicking button.

                             sym.$("#goto").click(function() {

                               if ($("#playFrame").val() >= 1 && $("#playFrame").val() < 4823) {

                                    alert ("You've right\n"+playYear($("#playFrame").val()));

                                    //sym.play(1000); // test line ==> Animated Rectangle

                                    sym.play(playYear($("#playFrame").val())); }

                               else { alert ("You've wrong:\nEnter a year between 4823 BCE - 1 BCE") } ;

                             });

                    • 7. Re: Get input value, validate it/add it elsewhere
                      drsqueegee Level 1

                      I will try!

                      Thank you Joël!

                      • 8. Re: Get input value, validate it/add it elsewhere
                        drsqueegee Level 1

                        Joël you have been a huge help. Now users will be able to navigate to any precise point in a timeline, which covers 8820 years within a matter of seconds. I changed some attributes, and then used what I learned to create the CE input field too. I also added code that will allow for the enter key to by used instead of having to click the button. I changed it so the animation would stop at the correct point instead of playing, and added code to have my play buttons reset.

                         

                        Thanks for showing me how to implement the math function. Here is what I now have...

                         

                        //Joël's awesome code!

                        //math (convert year to ms)

                        function playYear(x){ return ((4823 - x)/2)*1000 };

                         

                         

                        //Creating BCE form

                        var myForm = '<form><input id="BCE" type="text" size="10" placeholder ="4823...1" pattern="[0-9]" '

                        +'title="Please enter an integer between 4823 and 1"/><br>'

                        +'<input id="gotoBCE" type="button" value="Go to BCE year"/></form>';

                        sym.$("gotoBCEyear").html(myForm);

                         

                         

                        //gotoAndStop after clicking button.

                        $("#gotoBCE").click(function() {

                          if ($("#BCE").val() >= 1 && $("#BCE").val() <= 4823) {

                         

                         

                                                        sym.stop(playYear($("#BCE").val()));

                                                         sym.getSymbol("forward_pause").stop("forward");

                                                         sym.getSymbol("reverse_pause").stop("reverse");}

                          else { alert ("Please enter an integer between 4823 and 1") } ;

                        });

                        $("#BCE").keyup(function(event){

                            if(event.keyCode == 13){

                                $("#gotoBCE").click();

                            }

                        });

                         

                         

                        //CEmath

                        function CEyear(y){ return (2411 + (y/2))*1000 };

                        //CE form

                        var myForm = '<form><input id="CE" type="text" size="10" placeholder ="1...3998" pattern="[0-9]" '

                        +'title="Please enter an integer between 1 and 3998"/><br>'

                        +'<input id="gotoCE" type="button" value="Go to CE year"/></form>';

                        sym.$("gotoCEyear").html(myForm);

                         

                         

                        //gotoAndStop after clicking button.

                        $("#gotoCE").click(function() {

                          if ($("#CE").val() >= 1 && $("#CE").val() <= 3998) {

                         

                         

                                                        sym.stop(CEyear($("#CE").val()));

                                                         sym.getSymbol("forward_pause").stop("forward");

                                                         sym.getSymbol("reverse_pause").stop("reverse");}

                          else { alert ("Please enter an integer between 1 and 3998") } ;

                        });

                        $("#CE").keyup(function(event){

                            if(event.keyCode == 13){

                                $("#gotoCE").click();

                            }

                        });

                         

                        One little issue is that when I strike enter instead of clicking the button it takes me to the correct year, but I'm getting the else error message even though the input parameters are correct.

                        (Edit) I deleted the the else part of the if function, and I still saw the alert when using the enter key. It was then that I realized it was displaying what was written in the title tag (which was the same message as the else alert). When using the enter key instead of clicking the button it says "!Please match the requested format" followed by the title tag (inside a shadowed speech bubble).

                         

                        (Edit2)I'm starting to see what's happening. It has to do with the pattern attribute on the form. I think that when I click the enter button I'm am getting the click action for the button (that works as expected), but the error message (I think) is because pressing the enter key makes the browser think I'm trying to enter a multiline entry into the box, so it gives me the error code related to the pattern attribute. If I could figure out how to allow multiple line entries I could fool the browser, but there is probably a better way.

                         

                        current version with the year inputs here.