Better Method to Create a file using Innert html

Question

In this project i creating a new file when user submit the forum . The file contain the html structure inside the #main div . Please see my code

<?php 
if(ISSET($_POST['submit'])){
    $myfile = fopen($_POST['user_name'].".html", "w") or die("Unable to open file!");
    $txt = $_POST['inner_html'];
    fwrite($myfile, $txt);
    fclose($myfile);

}

?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
   <div class="new-classs" style="color:green;width:100px">
          <img src="tst.jpg" />
          <span>Content of #main div goes here</span>
   </div>     
</div>

<form method="post" action="">
    <input type="text" name="user_name" class="user_name" required>
    <input type="hidden" name="inner_html" class="inner_html">
    <input type="submit" value="submit" name="submit" class="submit">
</form>

<script>
 $('.submit').on("click",function(e){
  $(".inner_html").val($("#main").html());

});
</script>

I am using php and Jquery for this purpose .

But here what is the problem is some time #main div contain too much inner html .

So it will be a problem when passing as $_POST ?

$_POST will restrict the value if it exceed some amount?

Is there any alternate or good method to solve this problem ?

why did you undo my edit? https://stackoverflow.com/revisions/44781725/2 — Funk Forty Niner, Jun 27 '17 at 13:38
can you edit one more. Because i reduce the space between codes — Abilash Erikson, Jun 27 '17 at 13:38
Doesn't the size restrictions of requests depend on server config? I doubt there is a standard and depending on your server, you should be able to configure it to allow larger requests. — Kyle Becker, Jun 27 '17 at 13:40
you might find this interesting: https://stackoverflow.com/questions/2364840/what-is-the-size-limit-of-a-post-request — Alex Tartan, Jun 27 '17 at 13:40
Possible duplicate of [What is the size limit of a post request?](https://stackoverflow.com/questions/2364840/what-is-the-size-limit-of-a-post-request) — Justinas, Jun 27 '17 at 13:43
Thank you all for the good response . This question is not only dealing with post size , it also deal with another better solution or any alternative for solving this situation . — Abilash Erikson, Jun 27 '17 at 13:51

score 1 · Answer 1 · answered Jun 27 '17 at 14:16

One method you could consider, rather than actually trying to POST a huge amount of data, just POST the url of the document / page in question to a PHP script which can then use dom manipulation to find the desired content for you. That should make the request pretty quick and won't run into any limits in terms of POSTed data.

The ajax function could easily be replaced by a jQuery version - I don't use jQuery.

The button in the form no longer submits the form in the tradional sense but triggers an ajax request that sends the page & username details to the backend php code.

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['username'], $_POST['page'] ) && !empty( $_POST['page'] ) ){
        ob_clean();

        $username=filter_input( INPUT_POST, 'username', FILTER_SANITIZE_STRING );

        /* change path to suit environment */
        $targetfile='c:/temp/'.$username.'.html';




        libxml_use_internal_errors( true );

        /* Load the current or selected page into a new DOMDocument */
        $dom=new DOMDocument;
        $dom->validateOnParse=false;
        $dom->standalone=true;
        $dom->strictErrorChecking=false;
        $dom->recover=true;
        $dom->loadHTMLFile( $_POST['page'] );

        /* Find the element in the DOM to save */
        $div = $dom->getElementById('main');

        /* Save copy to this Document */
        $doc=new DOMDocument;

        /* Create a cloned copy of the DIV */
        $clone=$div->cloneNode( true );

        /* Add the clone to our new document */
        $doc->appendChild( $doc->importNode( $clone, true ) );

        /* write the cloned node innerHTML to file */
        $bytes = file_put_contents( $targetfile, $doc->saveHTML() );

        libxml_clear_errors();

        $dom = $doc = null;

        /* send some feedback to the client */
        exit( 'Bytes written: '.$bytes.' to '.$targetfile );
    }
?>
<!doctype html>
<html>
    <head>
        <title>Create File via AJAX & DOMDocument</title>
        <script type='text/javascript'>

            /* simple ajax function for post & get requests */
            function ajax(m,u,p,c,o){
                /*method,url,params,callback,options*/
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() );
                };

                var params=[];
                for( var n in p )params.push(n+'='+p[n]);

                switch( m.toLowerCase() ){
                    case 'post': p=params.join('&'); break;
                    case 'get': u+='?'+params.join('&'); p=null; break;
                }

                xhr.open( m.toUpperCase(), u, true );
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send( p );
            }


            /* Add event listener to the button */
            document.addEventListener('DOMContentLoaded',function(e){
                document.getElementById('btn').addEventListener('click',function(e){
                    var username=document.getElementById('usr').value;
                    if( username!='' ){
                        ajax.call( this, 'post', location.href, { page:location.href, username:username }, function(r){
                            alert(r)
                        }, null );
                    }
                },false);
            },false);
        </script>
    </head>
    <body>
        <div id='main'>
           <div class='new-classs' style='color:green;width:100px'>
                  <img src='/images/tarpit.png' />
                  <span>Content of #main div goes here</span>
                  <span>Content of #main div goes here</span>
                  <span>Content of #main div goes here</span>
                  <span>Content of #main div goes here</span>
                  <span>Content of #main div goes here</span>
                  <span>Content of #main div goes here</span>
                  <span>Content of #main div goes here</span>
                  <span>Content of #main div goes here</span>
                  <span>Content of #main div goes here</span>
                  <span>Content of #main div goes here</span>
                  <h2>more content...</h2>
                  <!-- lots and lots of contents -->
           </div>     
        </div>
        <form method='post'>
            <input id='usr' type='text' name='user_name' class='user_name' required>
            <input id='btn' type='button' value='submit' name='submit' class='submit'>
        </form>
    </body>
</html>

Better Method to Create a file using Innert html

1 Answers1