Geek asks and answers

Display html form values ​​on one page after submit

I have an HTML form, and I need to display the values ​​of the form fields below the form after the user clicks the submit button. How to do it using HTML and JavaScript?

+4
source share
8 answers

Here is one way to do it.

<!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>

And this is what it looks like when run.Cheers.

enter image description here

+19
source

Another way to do this (if you are using a form), note that the input type is the button

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

Full code:

<!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>

But you can do this even without a form:

<!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>

Here you can use the submit button or button:

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

No need to install

return false;

from a JavaScript function for any of these two examples.

+6
source

.

<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.

+2

, , AJAX. ( W3Schools ).

, - 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
Object Oriented, .

/**
 * 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 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 . ( , , ..).

Github .

+1
<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">

, , , .

0

html JS html. , .

0

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;
}
<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>



</body>

</html>
Hide result

0

:

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

, .

-1

More articles:


All Articles