www.webdeveloper.com
Results 1 to 12 of 12

Thread: Limit innerhtml function?

  1. #1
    Join Date
    Apr 2011
    Posts
    6

    Limit innerhtml function?

    Hi all!
    I am quite new to javascript, but i do have some php scripting experience so i am trying to make my way through it Can't figure this out though, so I hope that someone can help me out here.

    I have a multistep jquery form with input validation. If the validation gets an error, the borders of the input fields will color red. Now i want to add an explanational text to it. So once someone gets an error an text will show up like "Please fill in the red colored fields correctly.". In order to archieve this i found the innerhtml function. The basic code i use is stated below

    Code:
    <script type="text/javascript">
    function send(){
    	var oldHTML = document.getElementById('div_id').innerHTML;
    	var newHTML = oldHTML + "<span style='color:red'>" + "explanational text" + "</span>";
    	document.getElementById('div_id').innerHTML = newHTML;
    }
    </script>
    <p id='div_id'>Please fill in the form below in order to contact us.</p> 
    <input type='button' onclick='send()' value='Send'/>
    Now, this all seems to work. But if someone receives an error twice, the explanational text will show up twice... and so on. So, is there anyway to limit this in order to make it only show up once... or maybe an other solution to achieve the above?

    Hope i made myself clear.
    Thanks a lot for your time.
    Kind regards, Robbert

  2. #2
    Join Date
    Apr 2011
    Location
    Missouri
    Posts
    83
    Set the HTML at the beginning of the function back to the default HTML.

    Code:
    document.getElementById('div_id').innerHTML = 'Please fill in the form below in order to contact us.';

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Perhaps ...
    Code:
    // JS section
    <script type="text/javascript">
    function send(){
      document.getElementById('err0').style.display = 'none';
    
    // if (errorfound) {               // error found then display it
      document.getElementById('err0').style.display = 'block';
      document.getElementById('err0').innerHTML = "explanational text";
    // }
    }
    </script>
    
    
    // HTML section...
    <p>Please fill in the form below in order to contact us.</p> 
    <div id="err0" style="display:none;color:red"></div>
    <input type='button' onclick='send()' value='Send'/>
    Could have one error display box or one for each input error section.

    Code is untested, but should be close to your needs.

    Good Luck!

  4. #4
    Join Date
    Apr 2011
    Posts
    6
    wow guys, thank you so much for the quick answers!
    That really helped me out!

  5. #5
    Join Date
    Apr 2011
    Location
    Missouri
    Posts
    83
    You're welcome. I would suggest using the methodology that JMRKER used, but I was working with your existing code set.

  6. #6
    Join Date
    Apr 2011
    Posts
    6
    Im sorry guys, celebrated too quickly.

    The default innerhtml echo's the static text but also a certain query in php from the database. So its like this:
    Code:
    <p>Please fill in the form below in order to contact us. <?php echo $name;?> </p>
    I guess this does not work with the solutions that you provided?
    thanks again!

  7. #7
    Join Date
    Apr 2011
    Location
    Missouri
    Posts
    83
    Does PHP echo out the $name variable? If PHP is running, it should echo it out and JavaScript should recognize it as static text.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Exclamation

    Quote Originally Posted by wzshop View Post
    Im sorry guys, celebrated too quickly.

    The default innerhtml echo's the static text but also a certain query in php from the database. So its like this:
    Code:
    <p>Please fill in the form below in order to contact us. <?php echo $name;?> </p>
    I guess this does not work with the solutions that you provided?
    thanks again!
    Probably don't need to use PHP if post #2 code is used.
    You will need to add the test that causes the error message to display,
    but you have not shown that portion of the script yet!

  9. #9
    Join Date
    Apr 2011
    Posts
    6
    He, thanks again for your quick answers.

    @pwinfrey
    php sould echo out the $name variable.
    So i have a certain static text, with php variable, that i want to show anyway. Only if someone gets an error, the explanational text should also be shown. I tried the code below, but that does not echo the php code.. (for this example i tried a simple echo)
    Code:
    <script type="text/javascript">
    function send(){
    	document.getElementById('div_id').innerHTML = 'Please fill in the form below in order to contact us. <?php echo "dasadsasd";?> ';
    	var oldHTML = document.getElementById('div_id').innerHTML;
    	var newHTML = oldHTML + "<span style='color:red'>" + "explanational text" + "</span>";
    	document.getElementById('div_id').innerHTML = newHTML;
    }
    </script>
    <p id='div_id'>Please fill in the form below in order to contact us. <?php echo "dasadsasd";?></p> 
    <input type='button' onclick='send()' value='Send'/>
    I guess this is the case, because the form validation is located in a .js file in the head of my .php page?


    @JMRKER
    I tried your solution. That works, but in that case i have to make an extra div, called err0, and place it underneath my static text in my php file. This works great, but it leaves a little extra white space when the form is not submitted yet and no error is found. Is there anyway to hide the white space when the div is empty? and only show the text (+white space) when an error is found?


    Hope i made myself clear guys.
    Thanks again!
    Last edited by wzshop; 04-26-2011 at 04:12 PM.

  10. #10
    Join Date
    Apr 2011
    Posts
    6
    at both, sorry.. went too quickly (again:P)
    The JMRKER works.. forgot to give it the right style.

    Thanks so much both for you quick support, great!
    Cheers

  11. #11
    Join Date
    Apr 2011
    Location
    Missouri
    Posts
    83
    Oh, I misunderstood.

    Try this:

    Code:
    <script type="text/javascript">
    var phpText = '<?php echo $name; ?>';
    var original = 'Please fill in the form below in order to contact us.' + phpText;
    
    function send(){
    	document.getElementById('div_id').innerHTML = original;
    
            if (error) {
    	     
                 document.getElementById('div_id').innerHTML = original + "<span style='color:red'>" + "explanational text" + "</span>";
            }
    }
    </script>
    
    <p id='div_id'>Please fill in the form below in order to contact us.</p> 
    <input type='button' onclick='send()' value='Send'/>
    When using JMRKER's method, use document.getElementById('err0').style.display = ''; instead of document.getElementById('err0').style.display = 'block';.
    Last edited by pwinfrey; 04-26-2011 at 04:21 PM.

  12. #12
    Join Date
    Apr 2011
    Location
    Missouri
    Posts
    83
    Quote Originally Posted by wzshop View Post
    at both, sorry.. went too quickly (again:P)
    The JMRKER works.. forgot to give it the right style.

    Thanks so much both for you quick support, great!
    Cheers
    Wonderful!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles