在表单中传递Javascript变量

时间:2014-09-27 04:15:15

标签: javascript html forms

我是javascript的新手,我很难解决脚本中的一个问题。 当我单击提交表单到php脚本时,我想传递变量“outVal”。 “outVal”的值将从脚本中的“output”值获得。 我不知道如何将“输出”的值传递给“outVal”。 我已经搜索了解决方案,并尝试了它的每一个但它不起作用。 也许有人可以帮我找到合适的解决方案。 我的代码如下: 注意:两个代码都在同一个文件中。

HTML:

<{includeq file="db:frontend_breadcrumbs.tpl"}>
<div>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="./assets/js/jsoneditor.min.js"></script>

<div class='row'>
    <div class='span8 col-md-8 columns eight large-8'>  
        <form action="./applyProcess.php" method="post" enctype="multipart/form-data">
            <label for="file">Filename:</label>
            <input type="file" name="file" id="file"><br>
            <input type="submit" name="submit" value="Upload">
            <input type="hidden" name="hashAlgo" value="<{$hashAlgo}>">
            <input type="hidden" name="tempDirName" value="<{$tempDirName}>">
            <input type="hidden" name="op" value="upload">
            <input type="hidden" id="outVal" name="outVal">
        </form>

        <div id='editor_holder'></div>
    </div>
</div>

    <textarea id='output' style='width: 100%; height: 300px; font-family: monospace;' class='form-control'></textarea>

使用Javascript:

<script>
(function() {
    var jsoneditor;
    // Divs/textareas on the page
    document.getElementById('output').style.display = 'none';
    var $output = document.getElementById('output');
    var $editor = document.getElementById('editor_holder');
    var $outVal =  document.getElementById('outVal');


    var $jsonschema = <{$applyProcessJsonSchema}>;

    var reload = function(keep_value) {
        var $startvalue = (jsoneditor && keep_value)? jsoneditor.getValue() : <{$applyProcessRequestData}>;
        if(jsoneditor) jsoneditor.destroy();
        jsoneditor = new JSONEditor($editor,{
            ajax: true,
            schema: $jsonschema,
            startval: $startvalue,
            disable_array_add: true,
            disable_array_delete: false,
            disable_array_reorder: true,
            disable_edit_json: true,
            disable_properties: true
        });

        // When the value of the editor changes, update the JSON output and validation message
        jsoneditor.on('change',function() {
            var json = jsoneditor.getValue();
            $output.value = JSON.stringify(json,null,2);
            var validation_errors = jsoneditor.validate();
            if(validation_errors.length) {
                var error = JSON.stringify(validation_errors,null,2);
                alert("Validation Error" + error);
                reload(true);
            }
        });
        $outVal.value = $output.value;
    };
    reload();
})();

function applySubmit() {
    var $output = document.getElementById('output');
    var $outVal =  document.getElementById('outVal');
    $outVal.value = $output.value;
}
</script>

1 个答案:

答案 0 :(得分:0)

在您提交表单之前调用applysubmit函数,它会修改您的表单值,请检查下面的代码,将onsubmit事件添加到表单元素,

<form action="./applyProcess.php" method="post" onsubmit="return applySubmit();" enctype="multipart/form-data">


function applySubmit() {
        var $output = document.getElementById('output');
        var $outVal =  document.getElementById('outVal');
        $outVal.value = $output.value;
        return true;
    }