CODEWITHSUNDEEP
javascripthtmljqueryformsflask
Max Powers
Max Powers

Reputation: 1179

multiple submit buttons in from table

Needing a bit of help and advice. I have have a form wrapped inside a table and on every row there is a form input and a submit button on that row, what I am trying to do is capture the user input from that row and submit button that was pressed. One thing that is stumping me is usually to capture the form input value we would pass whatever the name value is in the input tag and pass that to the backend in my case its flask so i would do something like comment = request.form.get('comment_1'). Can someone help me figure out how to know what button and input name value tag were clicked so from that rows input I can retrieve that input value?

Also I have a JSFiddle

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form metohd="POST">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td><input class="form-control form-control-sm" type="text"placeholder="Comment" name="comment_1" id="comment_1"></td>
        <td><button type="submit" name="button-1" value="button-1" class="btn btn-primary">Submit</button></td>
        
      </tr>
      <tr>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
         <td><input class="form-control form-control-sm" type="text"placeholder="Comment" name="comment_2" id="comment_2"></td>
        <td><button type="submit" name="button-2" value="button-2" class="btn btn-primary">Submit</button></td>
      </tr>
      <tr>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
         <td><input class="form-control form-control-sm" type="text" placeholder="Comment" name="comment_3" id="comment_3"></td>
        <td><button type="submit" name="button-3" value="button-3" class="btn btn-primary">Submit</button></td>
      </tr>
    </tbody>
  </table>
</form>

Upvotes: 1

Views: 585

Answers (1)

Mister Jojo
Mister Jojo

Reputation: 22265

You can use document.activeElement

const myForm = document.forms['my-form']

myForm.onsubmit = e =>
  {
  e.preventDefault()   
  let el_TR = document.activeElement.closest('tr')
    
  if (el_TR)
    {
    let inEl = el_TR.querySelector('input')
    console.clear()
    console.log('input _name:', inEl.name, ', _value:', inEl.value )
    }
  }
-<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
 
<form metohd="POST" name="my-form">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td><input class="form-control form-control-sm" type="text"placeholder="Comment" name="comment_1" ></td>
        <td><button type="submit" class="btn btn-primary">Submit</button></td>
      </tr>
      <tr>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td><input class="form-control form-control-sm" type="text"placeholder="Comment" name="comment_2" ></td>
        <td><button type="submit" class="btn btn-primary">Submit</button></td>
      </tr>
      <tr>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td><input class="form-control form-control-sm" type="text" placeholder="Comment" name="comment_3" ></td>
        <td><button type="submit" class="btn btn-primary">Submit</button></td>
      </tr>
    </tbody>
  </table>
</form>

Upvotes: 1

Related Questions