Get the input value of a specific form with javascript when the submit button is pressed

javascript get form values on submit
html submit button action
call javascript function on submit button
javascript submit form
javascript forms example
form action=javascript
html form
javascript get input value

I have a page with a number of similar forms and would like to get the value of the input fields, when I press the submit button. I tried this on JSFiddle and it seems to be working. When I try this on my website, it returns "undefined".

HTML:

<tr>
    <form action="editline.php" method="POST" class="editline">
        <input type="hidden" name="editID" class="form-control id" value="123456">
        <td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name1</textarea></td>
        <td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address1" autocomplete="off" required></td>
        <td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour1" autocomplete="off" required></td>
        <td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
    </form>
</tr>
<tr>
    <form action="editline.php" method="POST" class="editline">
        <input type="hidden" name="editID" class="form-control id" value="987654">
        <td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea></td>
        <td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td>
        <td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td>
        <td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
    </form>
</tr>

JS:

$('.editline').submit(function(e) {
    e.preventDefault();

    var id = $(this).find('input.id').val();
    var name = $(this).find('textarea.name').val();
    var address = $(this).find('input.address').val();
    var colour = $(this).find('input.colour').val();

    alert(id + ' ' + name + ' ' + address + ' ' + colour);
});

Is it a problem, that the forms are in tables? Is there an other way to just get the input values of the form where the submit button has been pressed?

Thanks in advance.

Edit:// Okay, since the problem is caused by the form being in a table, is there a workaround? I'd like to use a table for this.

Edit2:// This JS is working great, when the forms are in a table (FSFiddle):

$('.editline').submit(function(e) {
    e.preventDefault();
    var tr = $(this).closest('tr');
    var id = tr.find('input.id').val();
    var name = tr.find('textarea.name').val();
    var address = tr.find('input.id').val();
    var colour = tr.find('input.colour').val();

    alert(id + ' ' + name + ' ' + address + ' ' + colour);
});

You can use only one form, then set the action to the button and get the closest line with it's inputs. Then ,in the click function you can call an ajax post to the form.

$('.editline button').click(function(e) {
  e.preventDefault();
  var tr = $(this).closest('tr');
  var id = tr.find('input.id').val();
  var name = tr.find('textarea.name').val();
  var address = tr.find('input.address').val();
  var colour = tr.find('input.colour').val();
  alert(id + ' ' + name + ' ' + address + ' ' + colour);
});
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="editline.php" method="POST" class="editline">
<table>
  <tr>
    <td data-label="Name"><input type="hidden" name="editID" class="form-control id" value="123456"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name1</textarea></td>
    <td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address1" autocomplete="off" required></td>
    <td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour1" autocomplete="off" required></td>
    <td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
  </tr>
  <tr>
    <td data-label="Name">
      <input type="hidden" name="editID" class="form-control id" value="987654">
      <textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea>
    </td>
    <td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td>
    <td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td>
    <td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
  </tr>
</table>
</form>

Forms and Form Fields :: Eloquent JavaScript, How do you show input fields based on select value? The submit button value is submitted when the user clicks the button. Calling form.submit() is not clicking the button. You may have multiple submit buttons, and the form.submit() function has no way of knowing which one you want to send to the server.


Just wrap the entire table in the form. This would solve the issue of invalid HTML.

$('.editline').submit(function(e) {
    e.preventDefault();

    var id = $(this).find('input.id').val();
    var name = $(this).find('textarea.name').val();
    var address = $(this).find('input.address').val();
    var colour = $(this).find('input.colour').val();

    alert(id + ' ' + name + ' ' + address + ' ' + colour);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="editline.php" method="POST" class="editline">
  <table>
    <tr>
      <td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea></td>
      <td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td>
      <td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td>
      <td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button>     </td>
    </tr>
  </table>
  
  <input type="hidden" name="editID" class="form-control id" value="987654">
</form>

<input type="submit">, How do you check if submit button is clicked in Javascript? Each submit button will only submit the form it belongs to. So you don't even need JavaScript (unless what you're looking for is an ajax submit) – bfavaretto Jul 26 '13 at 19:18 add a comment |


For example:

function geti() {
  var i = document.getElementById('i').value;
  var iv = document.getElementById('iv');
  iv.innerHTML = i;
}
<input type="text" id="i">
<button onclick="geti();">Click Me</button>
<p id="iv"></p>

Forms: event and method submit, Unlike most elements in an HTML document, form fields can get keyboard focus. A button with a type attribute of submit will, when pressed, cause the form to be submitted. <form action="example/submit.html"> Value: <input type="text" When given the multiple attribute, a <select> tag will allow the user to select any  The button input type creates an form button, the value of which is displayed as the text or label on the button. The button input looks identical to the submit, but they are not interchangeable — the button input does not submit the form. For the most part, the button input is used in conjunction with JavaScript. <input type="button"> vs


PHP Essentials, <input type="submit"> buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, Upon submitting, the data name/value pair gets sent to the In this example, s is specified as the access key (you'll need to press s plus  The value property sets or returns the value of the value attribute of an input button. The value attribute defines the text that is displayed on the button.


How to create a form and use the elements and values in JavaScript , The submit event triggers when the form is submitted, it is usually and press enter " > < input type = " submit " value = " Submit " onclick = " alert('click') " > </ form > action = 'https://google.com/search' ; form . method = 'GET' ; form . a form with the message html , an input field and buttons OK/CANCEL . This tutorial, Explains about, how to get input values of different HTML form elements using jQuery as follows: we have taken three form elements in our example – input field, radio button and a textarea. To get value of input field.


.submit(), When pressed this button causes the data in the Form to be sent to the server using If the onsubmit attribute on the enclosing <form> tag has been specified this will before the form data is submitted (useful for JavaScript form data validation). <form name="registerForm" method="GET" action="/subscribe.php"​> <input  Forms: event and method submit. The submit event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript. The method form.submit () allows to initiate form sending from JavaScript.