Javascript Tooltip / Posts /

Form field values in tooltippop get lost during submit

2148
I have an application written in PHP that manages customer information.  I've added a tooltip.pop call to a button next to their phone number field so that the admin can use a dropdown to select the cell phone carrier for the phone number.  The tooltip must be closed and the form saved via an <input type='image'... button for the data to be saved to SQL.  This all works great.

Next, I added a <textarea> field inside the tooltip.pop if an existing phone number and carrier selection exists so the admin can type a short message to be SMS texted to the phone number.

I added a "submit" style form button after my <textarea> to complete the process.  This button calls a JS function that will then submit the form with an action code to let the PHP script know what to do when it reloads.  The problem is that the fields contained in the tooltip.pop appear to have no value when referenced in the JS function, and when the document.form.submit() call occurs, all fields in the tooltip get reset?  The other 4 phone number fields with the same tooltip.pop code maintain their values during the reset however, which leads me to believe this has something to do with how the tooltip code is dealing with the "active" tooltip.  If I simply close the tooltip with tooltip.hide() and then use a submit button in my form, all the fields are still there when I inspect the variables after the form is POSTed.

I simply cannot seem to figure out how to work with the form field values contained in the tooltip.pop window within the JS function I wrote.  They all appear to have NULL values.  

What am I missing?
Jon K  11 years ago   viewed: 22706    

6 Answers

1
Okay.  I've stripped down my code to the absolute bare minimum to see if I can get this to work and am using a standard SUBMIT button now inside the containing <div style='display:none'> to see if I can get the form to submit.  Here is my new test code:

echo "<div style='display:none;'>";
echo "<div id='sms1'>";
echo "Type your message here";
echo "<input type='text' name='phone1_msg' id='phone1_msg' tabindex='1010' maxlength='200' value='".$G['phone1_msg']."'>";

echo "<input name='save' type='submit' value='Save'>";

echo "</div>";
echo "</div>";

And here is my click link that shows the tooltip:

echo " <a href='#' onclick=\"tooltip.pop(this, '#sms1', {overlay:false, position:1,maxWidth:250}); return false;\" >Click me here!</a>";


Nothing fancy here.  All I want to be able to do now, is get a submit event from that button.  But clicking the "save" button does not issue a submit for the form for whatever reason???  If I get rid of the "display:none" I can verify that the submit button is working normally, but I have no idea why I cannot get a submit to occur within the hidden DIV.  This is completely baffling to me.

The DIV is currently inside a <table> as a row in my data form, so I even tried moving this completely out of the table to just underneath the <form method=post'...> line.  The "Submit" button still won't submit the stupid form when it is inside the hidden DIV?  Why is that I wonder.  

I also noticed that when I looked at the source code for the example page where they have a functioning submit for the example, they are not coding their DIV the way they specify in the instructions:

    <div class="hide">
        <div id="demo2_tip">
            <img src="src/tooltips.gif" style="float:right;margin-left:12px;" alt="tooltips" />
            <b>SEO</b><br /><br />
            The tooltip content comes from an element on the page. So this approach is <strong>Search Engine Friendly</strong>.
        </div>
        <div id="demo3_tip">
            Name: <input name="ctl00$MainContent$demos1$TextBox1" type="text" id="MainContent_demos1_TextBox1" style="width:120px;" /><br /><br />
            <input type="submit" name="ctl00$MainContent$demos1$Button1" value="Login" id="MainContent_demos1_Button1" class="btn1" />&nbsp; &nbsp;
            <input type="button" onclick = "tooltip.hide()" class="btn1" value="Cancel" />
        </div>
    </div>

I note how they are using a <div class='hide'> as their enclosing div and NOT using a <div style='display:none'>.  Although I checked their "/img/site/Site.css" style sheet and see it has a "display:none" setting.

I am stuck.  If I can't get this to work, then I am hosed and may need to ask for a refund on this tooltip.
Jon K
  11 years ago
0
Currently when your page contains multiple forms, the tooltip will not work properly.

We will release out a new version of the tooltip on July 5 - 6, 2013. The tooltip will work well with multiple forms in the new version, and you can do Ajax submit within the forms. 
Milo
  11 years ago
0
Good job on the new version!  Thanks.  It seems to be working really well with forms placed anywhere in my code :-)  I have done a little testing, but will let you know if I spot any issues.

I look forward to trying the other new features, especially the iOS, since we have lots of iOS mobile users.

I also made a modification to the co that allows me to set a global session variable in our application for user's that no longer want to see tooltips on the forms (power users).  I added a simple variable to the code that will skip the pop-up call altogether is "true".  You'll find the tiny added code (in red below) near the end of the JS in the code.
pop:function(elm,text,options,hide){if(hide>0)return;Y(elm,text,options)},ajax:functi...

I believe I have seen other users discussing such an option.  Maybe you would find this useful in a future release.   Attached is the code.
Jon
  11 years ago
-3
I don't know PHP, but I am good with ASP.NET. So I have limited understanding of your context.

I wonder if you can give your textarea an id and trace it through js's document.getElementById. 

Another hint is that if you have multiple forms in the page, the textarea might be moved out of the form by Menucool's tooltip and be placed in another form or simply the place under the <body>..</body>. You should check if this happens by checking the textarea element (inside your textarea) with Chrome or FireFox's developer tool. 

Forgive me if my answer is not to the point.

Milo
  11 years ago
-1
Milo,

I've tried looking at the value of the field in my JS routine after my <input type='submit'> button is clicked and my onclick event is triggered.  The value is NULL or undefined when I look at the document.formname.textarea.value field.  I've also tried getElementByID and same null results.

There is only one <form> in my PHP script and it surrounds my 5 tooltop.pop <div>s - one for each of the 5 phone numbers I track on a customer record.  So unless the tooltip.js file is dynamically creating its own internal form, there is only one named form.  

I am still baffled as to what is going on.  Its so weird that closing the tooltip (tooltip.hide) and then using my PHP form submit button maintains the values in all 5 of the tooltip <div>s fields, but a JS submit via document.formname.submit() called from within my JS function wipes out the values - but only those for the open tooltip fields.  My other four tooltip.pop DIVs, retain their values during a JS submit.  So it has to be something in the tooltip.pop() function and when that tooltip is open, that is different from usual form field handling.

Has anyone else used fields inside a tooltip.pop along with a submit button and gotten this to work?  If so, I'd love to know how you did it!

One thing I did do while playing around with this, was to temporarily change the <div style='display:none'> surrounding the tooltip code to a simple <div> and I was then able to display values for the fields in my JS routine.  Of course that really makes a mess of your screen, ha ha, but I now could deal.  But that confuses me even more considering that closing the tooltip essentially hides the fields and changes them back to hidden, so how can my PHP form submit populate those values after the POST of the form if they are hidden? Very confusing.
Jojn K
  11 years ago
-1
Have you read the 2. tooltip.pop section under the "How to Use" tab? That section has discussed a little about the Server Control and tell you to try the "click me" button. When you input a name into the text box and then click the "login" button, you can see the post back page can remember the name that you have input.

If you have only one form on the page, that is good as the tooltip popup window will be within the form. But the form must be the first child of your body. Below is a piece of code I copied from the original copy(non-minimized):

    //only cares about the first FORM. Other form will get position problems that is hard to debug.
    var appendToBodyOrFirstForm = function (elm) {
        var body = g(getElmtsByTagName, "body")[0];
        var childs = getChildren(body);
        if (childs.length && childs[0].nodeName == "FORM")
            childs[0][appendCld](elm);
        else
            body[appendCld](elm);
    }; 

If you can stage a testing page that can show your issue(make it simple and apparent to show the main issue), I will try if I can help (As I don't know PHP, I don't quite understand your above descriptions. If you can show it in the testing page, it will be much easier for me:) ). Thanks.
Milo
  11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲