Posting values of input fields outside form tag containing submit button

Stack Overflow Asked by Kuwir Singh on August 11, 2020

I have 3 input fields which are not inside a form tag. I cannot add them inside the form because the three input fields are at different locations on the same page.

I want to post input values outside form tag as well when i press submit button. How can i do that?

<input input type="text" id="elecr"  value="2" name="electricity"></input>
<input input type="text" id="3wheel"  value="3" name="threewheel"></input>
<input input type="text" id="4wheel"  value="2" name="fourwheel"></input>

<form action="/savedata" method="post">
2Wheeler: <input type="text" id="2wheeler"  value="0" name="twowheeler"/><br><br>
<input type="submit" />

2 Answers

Just store the values of all the input fields through jquery and submit your form through ajax on the click of your submit button.

$('form').submit(function(event) {

    // get the form data
    // there are many ways to get this data using jQuery (you can use the class or id also)
    var formData = {
        'electricity'  : $('input[name=electricity]').val(),
        'threewheel'   : $('input[name=threewheel]').val(),
        'fourwheel'    : $('input[name=fourwheel]').val(),
        'twowheeler'   : $('input[name=twowheeler]').val(),

    // process the form
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url         : 'savedata.php', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'json', // what type of data do we expect back from the server
        encode      : true

you are able to log and also able to error handling in your jquery.

Answered by Emraan Khalid on August 11, 2020

  1. Write javascript to handle submit event
  2. On submit event append your input with form data
  3. Submit

For reference please refer Adding POST parameters before submit

$( 'form' ).submit(function ( e ) {
    var data;

    data = new FormData();
    data.append( 'electricity', $('#elecr').val());
    data.append( 'threewheel', $('#3wheel').val());
    data.append( 'fourwheel', $('#4wheel').val());

        url: 'savedata.php',
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            alert( data );


Answered by Ketan Vekariya on August 11, 2020

Add your own answers!

Related Questions

Issues with manipulating a drop down in Javascript

0  Asked on November 15, 2021 by orgg


How to find all the sub matrix of a N*N matrix?

1  Asked on November 15, 2021 by dronzer


How to make new person in class player?

2  Asked on November 15, 2021 by joshmann15


Accessing elements in Set

0  Asked on November 15, 2021 by lost_and_found


WebView onKeyListener not working

3  Asked on November 15, 2021 by federico-ponzi


Why is docker not completely deleting my file?

4  Asked on November 15, 2021 by schoon


How to update the elastic search document with python?

1  Asked on November 15, 2021 by user6882757


Breaking up conditionals in order to reduce DRAM usage

3  Asked on November 15, 2021 by saxpy


Ansible Create SubFolders Matching Pattern

1  Asked on November 15, 2021 by switch


Ask a Question

Get help from others!

© 2023 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP