form replaced to textarea not give different output

问题

I have two files

index.php
code.js

I have some code in index.php which contains forms and with the help of code.js. I am replacing pre tag with that form. So everything runs fine. For understand my problem you have to see my code. So first of all I am giving my code

index.php file:

<html>
<head>
        <link rel="stylesheet" href="http://code.guru99.com/css/1140.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://code.guru99.com/css/styles.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://codemirror.net/doc/docs.css" type="text/css" media="screen" />
        <script src="http://code.guru99.com/php/lib/codemirror.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">></script>
        <link rel="stylesheet" href="http://code.guru99.com/Sanjay/lib/codemirror.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://code.guru99.com/perl/perl.js"></script>
        <script type="text/javascript" src="cperl.js"></script>
        <script src="code.js"></script>
</head>
<body>
<style type="text/css">
.CodeMirror {
    border: 1px solid #eee;
    height: auto;
    width : 630px;
}
.CodeMirror-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}
</style>
<p>Integer : whole numbers e.g. -3, 0, 69. The maximum value of an integer is platform-dependent. On a 32 bit machine, its usually around 2 billion. 64 bit machines usually have larger values. The constant PHP_INT_MAX is used to determine the maximum value.</p>
<pre class="codeguru">say 'hi';</pre>
Let us now look at how PHP determines the data type depending on the attributes of the supplied data.
<pre class="codeguru">say 'hello';</pre>
Floating point numbers
<pre class="codeguru">say 'you r amazing';</pre>
Character strings
<pre class="codeNrun">say 'i am fine';</pre>

<form class="hidden code-box" method="GET" name="sample">
    <div dir="ltr">
        <textarea class="php" name="codeguru"></textarea>
    </div>
    <input type="button" value="Run" />
    <br/>
    <br/>Output:
    <br/>
    <br/>
    <textarea id="print-result4" disabled="true" cols="77"></textarea>
    <br/>
</form>
<form class="hidden code-box" method="GET" name="Nosample">
    <div dir="ltr">
        <textarea class="php" name="codeNrun"></textarea>
    </div>
</form>
</body>
</html>

code.js file:

$(document).ready(function () {
    var idIndex = 0;
    $('pre.codeguru').each(function () {
        var pre = this;
        var form = $('form[name=sample]').clone();
        $(form).removeAttr('name');
        $(form).removeClass('hidden');
        $($(form).find('textarea')[0]).val($(pre).text());
        var id = $(pre).attr('id');
        $(form).find('div textarea[name=code]').first().attr('id', id);
        $(form).find('#print-result4').first().attr('id', 'print-result' + idIndex++);
        $(pre).replaceWith(form);
    });

    var n = 0;
    $('input[type=button]').each(function () {
        $(this).click(function (x) {
            return function () {
                execute(x);
            };
        }(n++))
    });

    window.editors = [];
    $('textarea[name=codeguru]').each(function () {
        window.editor = CodeMirror.fromTextArea(this, {
            lineNumbers: true,
            matchBrackets: true,
            mode: "perl",
            tabMode: "shift"
        });
        editors.push(editor);
    });
     $('pre.codeNrun').each(function () {
        var pre = this;
        var form = $('form[name=Nosample]').clone();
        $(form).removeAttr('name');
        $(form).removeClass('hidden');
        $($(form).find('textarea')[0]).val($(pre).text());
        var id = $(pre).attr('id');
        $(form).find('div textarea[name=codeNrun]').first().attr('id', id);
        $(pre).replaceWith(form);
    });
    window.editors = [];
    $('textarea[name=codeNrun]').each(function () {
            window.editor = CodeMirror.fromTextArea(this, {
            lineNumbers: true,
            matchBrackets: true,
            mode: "perl",
            tabMode: "shift"
        });
        editors.push(editor);
    });
});

function execute(idx) {
    p5pkg.CORE.print = function (List__) {
        var i;
        for (i = 0; i < List__.length; i++) {
            document.getElementById('print-result' + idx).value += p5str(List__[i])
        }
        return true;
    };

    p5pkg["main"]["v_^O"] = "browser";
    p5pkg["main"]["Hash_INC"]["Perlito5/strict.pm"] = "Perlito5/strict.pm";
    p5pkg["main"]["Hash_INC"]["Perlito5/warnings.pm"] = "Perlito5/warnings.pm";

    var source = editors[idx].getValue();

    var pos = 0;
    var ast;
    var match;
    document.getElementById('print-result' + idx).value = "";

    try {
        var start = new Date().getTime();
        var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]);
        var end = new Date().getTime();
        var time = end - start;
        // run
        start = new Date().getTime();
        eval(js_source);
        end = new Date().getTime();
        time = end - start;
    } catch (err) {
        //document.getElementById('log-result').value += "Error:\n";
    }
}

so now you can see that there are two forms names sample and Nosample like this

<form class="hidden code-box" method="GET" name="sample">

and

<form class="hidden code-box" method="GET" name="Nosample">

and there are two types of pre tags codeguru and codeNrun like this

<pre class="codeguru">say 'you r amazing';</pre>

And

<pre class="codeNrun">say 'i am fine';</pre>

So when I am replaced this pre code with form then when I am trying to run then the output is print in another textarea I cant understand why this can be happened.

回答1:

There's an extra window.editors = []; in your code.

At first you create an editors array, then push it some CodeMirror objects, then you redefine editors to an empty array again... Just remove the second window.editors = []; line.

Secondly: what actually is the value of id variable here?

$(form).find('div textarea[name=code]').first().attr('id', id);

You're reading the id of the textarea, but looks like it's undefined, since there are no ids in the HTML.

A similar mistake in this line:

$(form).find('div textarea[name=codeNrun]').first().attr('id', id);

I guess id should be 'print-result3' here, but it is undefined now.

Notice, that the additional digit to id's bodies are added in the order $('input[type=button]').each() provides. This supposed to be the order the elements in the document have. Notice, that the original button is the last you can see on the screen.

I think there was a lack of explanation in my answer, how to target the button to an editor and corresponding print-resultX. I'll try to explain it here:

In the original <input id="print-resultX" ... /> X should be a number of total print-result inputs i.e. a number of the CodeMirror objects, since when you're cloning the form, all clones are placed before this original form. During cloning corresponding Xs are added to the body of the each id value.

This X value is passed to execute(idx) function as an argument idx, i.e. the clicked button "knows", which editor should be handled in the execute(), since X also represents an index in the editors array.

When adding idx to the body (= 'print-result') of the id, you can target actions to the specific print-result field.

来源：https://stackoverflow.com/questions/17593726/form-replaced-to-textarea-not-give-different-output

标签

php

javascript

jquery

html

codemirror