Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Page with multiple forms. onblur issue

    My first javascript problem:

    I have a php script with multiple forms. Each form holds only one text field and a submit button.

    If the user places the cursor in a text field below and add text, but then forget to submit that form and instead click a text field in another forms text field ("onbluring" the first forms text field) the text that was typed in the first forms text field will disapeare.

    To warn the user I would like to add some code that when the user is leaving the text field in a form without having submitted the form warns the user of this.

    It's would be nice if the user is warned only if the text field that's leaved holds text.

    I understand that I must learn Javascript but since I don't now OOP yet, I ask for help begging on my bare knees. Please have mercy, I'm just a simple procedural PHP programmer.


    Code:
    <form action="'.$_SERVER['PHP_SELF'].'" method="post">
    First name: <input type="text" name="fn" /> 
    <input type="submit"  value="Register" />
    </form>
    
    <form action="'.$_SERVER['PHP_SELF'].'" method="post">
    Last name: <input type="text" name="ln" /> 
    <input type="submit"  value="Register" />
    </form>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,911
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You could simply submit the form onblur:-

    Code:
    <form action="'.$_SERVER['PHP_SELF'].'" method="post">
    First name: <input type="text" name="ln" onblur = "if(this.value.length>1) {this.form.submit()}">
    </form>
    But apart from the minimum field length there is no validation, so the user could enter just a single space, an x or a ? and still submit the form. It would be better to perform some checks:-



    Code:
    <form action="'.$_SERVER['PHP_SELF'].'" method="post">
    First name: <input type="text" name="fn" onblur = "check(0, this.value)">
    </form>
    
    <script type = "text/javascript">
    function check(fnum, x) {
    x = x.replace(/^\s+|\s+$/g,"");  // strip leading and trailing spaces;
    x = x.replace(/\s{2,}/g," ");  // replace multiple spaces with one space
    x = x.replace(/[^a-z\s\-\']/g,"");  // strip all but letters, space, hyphen and apostrophe
    document.forms[fnum].fn.value = x;  // write the modified value back to the field
    if (x.length > 1) {document.forms[fnum].submit() }
    }
    
    </script>
    But when your form submits it will cause the page to refresh! Why do you want multiple forms????


    "She is the type who would walk into a shopping center, see a sign which read "Wet Floor," and do it!"

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    mumbojumbo (05-27-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for your post.
    I put in your code, the form is submitted when i leave the field, but the value is gone when the page is displaying the forms again (I've added sticky fun ctionality with PHP and MySQL, I will try to figure out why. I use PHP to validate since I don't know any javascript.

    Why multiple forms? Well, I am generating the text fields dynamicly from a database. If I want to use only one form I have to generate the form using arrays wich must be passed along with the form, since it needs to hold both the dataposts id name and value. It's problary a better solution, but I'm not there yet in my coding knowledge.

    Also, i shoud have prefered that a warning is displayed when leaving a form, not a submit.

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    It seems that $_POST['submit'] is empty when it is onblur that sends the form. In my code I take care of a sent form by checking if $_POST['submit'] is set. Any workaround?

  • #5
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Hi

    It seems that $_POST['submit'] is empty when it is onblur that sends the form. In my code I take care of a sent form by checking if $_POST['submit'] is set. Any workaround?
    The IE if (isset($_POST['submit'])) bug explained.

    LT
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • Users who have thanked low tech for this post:

    mumbojumbo (05-27-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •