提交后在同一页面中显示html表单值

时间：2013-03-16 09:57:05

标签： javascript html

我有一个HTML表单，我需要在用户单击提交按钮后在表单下方显示表单字段值。如何使用HTML和JavaScript执行此操作？

8 个答案:

答案 0 :(得分：18)

这是一种方法。

<!DOCTYPE html>
<html>
  <head lang="en">
  <meta charset="UTF-8">
  <script language="JavaScript">
    function showInput() {
        document.getElementById('display').innerHTML = 
                    document.getElementById("user_input").value;
    }
  </script>

  </head>
<body>

  <form>
    <label><b>Enter a Message</b></label>
    <input type="text" name="message" id="user_input">
  </form>

  <input type="submit" onclick="showInput();"><br/>
  <label>Your input: </label>
  <p><span id='display'></span></p>
</body>
</html>

这就是跑步时的样子。欢呼。

enter image description here

答案 1 :(得分：6)

另一种方法（如果使用表单），请注意输入类型是按钮

<input type="button" onclick="showMessage()" value="submit" />

完整的代码是：

<!DOCTYPE html>
<html>
<head>
    <title>HTML JavaScript output on same page</title>
    <script type="text/JavaScript">
        function showMessage(){
            var message = document.getElementById("message").value;
            display_message.innerHTML= message;
        }
    </script>
</head>
<body>
<form>
Enter message: <input type="text" id = "message">
<input type="button" onclick="showMessage()" value="submit" />
</form>
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>

但即使没有形式你也可以做到：

<!DOCTYPE html>
<html>
<head>
    <title>HTML JavaScript output on same page</title>
    <script type="text/JavaScript">
        function showMessage(){
            var message = document.getElementById("message").value;
            display_message.innerHTML= message;
        }
    </script>
</head>
<body>
Enter message: <input type="text" id = "message">
<input type="submit" onclick="showMessage()" value="submit" />
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>

您可以在这里使用提交或按钮：

<input type="submit" onclick="showMessage()" value="submit" />

无需设置

return false;

来自JavaScript函数，这两个例子都没有。

答案 2 :(得分：2)

这很有效。

<html>
<head>
<script type = "text/javascript">
function write_below(form)
{
var input = document.forms.write.input_to_write.value;
document.getElementById('write_here').innerHTML="Your input was:"+input;
return false;
}
</script>
</head>

<!--Insert more code here-->
<body>
<form name='write' onsubmit='return write_below(this);'>
<input type = "text" name='input_to_write'>
<input type = "button" value = "submit" />
</form>
<div id='write_here'></div></body>
</html>

从函数返回false永远不会将其发布到其他页面，但会编辑html内容。

答案 3 :(得分：1)

如果您不使用AJAX，这可能会非常棘手。我绝对推荐它（你可以找到W3Schools教程here）。

但是在这个答案中，我假设您不想出于某种原因使用AJAX，因此解决方案将采用纯JavaScript。

首先，让我们制作表格（各种输入）

<form id="form">
Name: <input name="full-name" type="text" />
<br />
Favourite image: <input name="favourite_image" type="file" accept="image/*" />
<br />
Sex: Male <input name="sex" value="male" type="radio" /> Female <input name="sex" value="female" type="radio" />
<br />
Date: <input name="date" type="date" />
<br />
Are you a web developer: <input name="web-developer" type="checkbox" />
<br />
Your favourite web language(s): 
<br />
<select name="favourite-web-language" multiple="multiple">
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</select>
<br />
Your favourite color: <input name="favourite-color" type="color" />
<br />
<textarea name="textarea-comment">Wassup!</textarea>
<br />
<button type="button" id="submit-button">Show my inputs</button>
<br />
<br />
<br />
<h3>Your inputs are:</h3>
<output id="output"></output>

现在是时候进行JavaScript了 使这个答案面向对象，因为它允许多个表单具有这种脚本。 

/**
 * Class for getting form content
 *
 * @version 1.0.0
 */
class FormContent{

    /**
     * Create new form content object
     *
     * @param {HTMLFormElement} formElement Single form element
     * @param {string} inputSelectors Selectors for elements which will be used to read and display data (like jQuery selectors: # for IDs, . for classes and so on). Separate multiple selectors with comas.
     * @param {HTMLButtonElement | HTMLInputElement} submitButton Submit button to display form data (although the type should be always 'button')
     * @param {Element} outputSection Section where the form data is displayed
     * @since 1.0.0
     */
    constructor(formElement, inputSelectors, submitButton, outputSection){

        /**
         * Disabled elements (values will not be shown in output). Values can be tag names, attribute 'type' values or certain element (inside form)
         *
         * @type {Array}
         * @since 1.0.0
         */
        this.disabledElements = ["button", "reset", "submit"];

        /**
         * Input elements node list (created by inputSelectors)
         *
         * @type {NodeList}
         * @since 1.0.0
         */
        var inputElements = formElement.querySelectorAll(inputSelectors);

        /**
         * Get input elements
         *
         * @see inputElements
         * @return {NodeList} Input elements
         * @since 1.0.0
         */
        this.getInputElements = function(){ return inputElements; };

        /**
         * Get submit button
         *
         * @return {HTMLButtonElement} Submit button
         * @since 1.0.0
         */
        this.getSubmitButton = function(){ return submitButton; };

        /**
         * Get output section
         *
         * @see outputSection
         * @return {NodeList} Output section
         * @since 1.0.0
         */
        this.getOutputSection = function(){ return outputSection; };


        /**
         * Empty input's alternative (print) value
         *
         * @type {string}
         * @since 1.0.0
         */
        this.emptyValueMessage = "Unknown";

        /**
         * Error message (when there is empty required fields)
         *
         * @type {string}
         * @since 1.0.0
         */
        this.errorMessage = "<h4 style='color:#FF0000;'>Please fill all the required inputs!</h4>";

        /**
         * Instance for this class
         *
         * @type {FormContent}
         * @since 1.0.0
         */
        var thisInstance = this;


        if(submitButton && outputSection){
            submitButton.onclick = function(){
                thisInstance.onSubmitButtonClick();
            };
        }
    }

    /**
     * When submit button is clicked
     *
     * @since 1.0.0
     */
    onSubmitButtonClick(){
        var outputMessage = (this.areRequiredInputsFilled()) ? this.getFormattedFormContent() : this.errorMessage;

        this.printToOutput(outputMessage);
    }

    /**
     * Are all the required inputs/fields filled?
     *
     * @return {boolean}
     * @since 1.0.0
     */
    areRequiredInputsFilled(){
        for(var node of this.getInputElements()){
            if(node.required && !node.value){
                return false;
            }
        }

        return true;
    }

    /**
     * Print/display form data to output element
     *
     * @see getOutputSections()
     * @since 1.0.0
     */
    printToOutput(content){
        this.getOutputSection().innerHTML = content;
    }

    /**
     * Get form content/data which is formatted
     *
     * @return {string} Formatted form content
     * @since 1.0.0
     */
    getFormattedFormContent(){
        var formContent = "";

        var formData = this.getFormData();

        for(var input in formData){
            formContent += "<b>" + input + "</b>: " + formData[input] + "<br />";
        }

        return formContent;
    }

    /**
     * Get raw form data
     *
     * @return {json} Form data
     * @since 1.0.0
     */
    getFormData(){
        var formData = {};

        var noNameCounter = 0;

        var formInputs = this.getFormInputs();

        for(var input of formInputs){
            let inputName = input.name || "no_name_element_" + noNameCounter;
            let inputValue = input.data || input.value || this.emptyValueMessage;

            if(!input.name){
                noNameCounter++;
            }

            formData[inputName] = inputValue;
        }

        return formData;
    }

    /**
     * Get all the form input elements
     * 
     * @return {Array} Inputs and values (form data)
     * @since 1.0.0
     */
    getFormInputs(){
        var formInputs = [];

        for(var input of this.getInputElements()){
            if(!this.disabledElements.includes(input.tagName.toLowerCase()) && !this.disabledElements.includes(input.type) && !this.disabledElements.includes(input)){
                if(input.type === "radio"){
                    if(input.checked){
                        formInputs.push(input);
                    }
                }else if(input.type === "checkbox"){
                    input.value = (input.checked) ? true : false;
                    formInputs.push(input);
                }else if(input.multiple){
                    formInputs.push(this.getMultipleInput(input));
                }else if(input.value || input.innerHTML){
                    formInputs.push(input);
                }else{
                    formInputs.push(input);
                }
            }
        }

        return formInputs;
    }

    /**
     * Get input which has attribute multiple
     *
     * @param {HTMLInputElement} multipleInput Input with attribute multiple
     * @return {HTMLInputElement} Input instance
     * @since 1.0.0
     */
    getMultipleInput(multipleInput){
        var inputInstance = document.createElement("input");
        inputInstance.name = multipleInput.name;

        var values = [];

        if(multipleInput.type !== "file"){
            for(var option of multipleInput){
                if(option.selected){
                    values.push(option.value);
                }
            }
        }else{
            for(var file of multipleInput.files){
                values.push(file.name);
            }
        }

        inputInstance.data = values.toString();

        return inputInstance;
    }
}

var forms = document.getElementsByTagName("form");

for(var form of forms){
    let inputSelectors = "input, select, textaera";
    let submitButton = form.querySelector("#submit-button");
    let outputSection = form.querySelector("#output");

    new FormContent(form, inputSelectors, submitButton, outputSection);
}

基本上，此脚本循环遍历每个输入元素，并使用name和value（或有时data）属性来显示表单数据。

它会识别multiple和required等属性并相应地发挥作用。它应该适用于每个输入元素（文本区域，文件上传器，颜色选择器等）

JSFiddle示例here

答案 4 :(得分：0)

<script type = "text/javascript">
function get_values(input_id)
{
var input = document.getElementById(input_id).value;
document.write(input);
}
</script>

<!--Insert more code here-->


<input type = "text" id = "textfield">
<input type = "button" onclick = "get('textfield')" value = "submit">

下次您在此处提出问题时，请提供更多详细信息以及您尝试过的内容。

答案 5 :(得分：0)

使用JS＆amp ;;点击提交按钮后，在同一页面中显示html表单值HTML代码。再次打开后，它应该在该页面中给出评论。

答案 6 :(得分：0)

<html>
<body>
    <!-- Trigger/Open The Modal -->
    <div style="background-color:#0F0F8C ;height:45px">
        <h2 style="color: white">LOGO</h2>
    </div>
    <div>
        <button id="myBtn">&emsp;+ Add Task &emsp;</button>
    </div>
    <div>
        <table id="tasksTable">
            <thead>
                <tr style="background-color:rgba(201, 196, 196, 0.86)">
                    <th style="width: 150px;">Name</th>
                    <th style="width: 250px;">Desc</th>
                    <th style="width: 120px">Date</th>
                    <th style="width: 120px class=fa fa-trash"></th>
                </tr>

            </thead>
            <tbody></tbody>
        </table>
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">

            <div class="modal-header">

                <span class="close">&times;</span>
                <h3> Add Task</h3>
            </div>

            <div class="modal-body">
                <table style="padding: 28px 50px">
                    <tr>
                        <td style="width:150px">Name:</td>
                        <td><input type="text" name="name" id="taskname" style="width: -webkit-fill-available"></td>
                    </tr>
                    <tr>
                        <td>
                            Desc:
                        </td>
                        <td>
                            <textarea name="desc" id="taskdesc" cols="60" rows="10"></textarea>
                        </td>
                    </tr>
                </table>
            </div>

            <div class="modal-footer">
                <button type="submit" value="submit" style="float: right;" onclick="addTasks()">SUBMIT</button>
                <br>
                <br>
                <br>
            </div>

        </div>
    </div>

    <script>
        var tasks = [];
        var descs = [];

        // Get the modal
        var modal = document.getElementById('myModal');

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal 
        btn.onclick = function () {
            modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
        var rowCount = 1;
        function addTasks() {
            var temp = 'style .fa fa-trash';
            tasks.push(document.getElementById("taskname").value);
            descs.push(document.getElementById("taskdesc").value);
            var table = document.getElementById("tasksTable");
            var row = table.insertRow(rowCount);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            cell1.innerHTML = tasks[rowCount - 1];
            cell2.innerHTML = descs[rowCount - 1];
            cell3.innerHTML = getDate();
            cell4.innerHTML='<td class="fa fa-trash"></td>';
            rowCount++;
            modal.style.display = "none";
        }


        function getDate() {
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1; //January is 0!

            var yyyy = today.getFullYear();

            if (dd < 10) {
                dd = '0' + dd;
            }
            if (mm < 10) {
                mm = '0' + mm;
            }
            var today = dd + '-' + mm + '-' + yyyy.toString().slice(2);
            return today;
        }
    </script>
</body>

</html>

答案 7 :(得分：-1)

试试这个：

onsubmit="return f(this.'yourfieldname'.value);"

我希望这会对你有所帮助。

相关问题
最新问题