form values submit control

Question

The trivial task became really time consuming for me. I am doing really basic user interface for web project(focus on business logic). If there is already exact answer to my question please redirect me, I will delete it straight away. I just don't really know what to search for, basic phrases are too vague.

The scenario:

I need to get request either with /someurlrequest?edit=(idOfelement) or /someurlrequest?populate=(idOfElement) , but I get /someurlrequest?edit=(idOfelement)&populate=(idOfElement) (GET is just for showing what is sent, POST is preferred)

Whenever set of elements appear I want to have two buttons, but whenever I do it the way I've shown below the form submit action grabs both values(Edit and Populate) for request meaning that further I can't process the request since I don't know which button was pressed as both name/value pairs are passed, I get say Edit=1 and Populate=1 , I obviously want only single pair either Edit=1 or Populate=1.

 <c:forEach var="TrainingProgram" items="${programbank}">

     <form method="get" action="/someurlrequest">
        <p> ${TrainingProgram.name}</p 
        <p> ${TrainingProgram.shortDescription}</p>

   <p>    
     <input value="Edit" type="submit" />  
     <input name="edit" style="display: none;" value="${TrainingProgram.programId}" />
     <input value="Populate" type="submit" />
     <input name="populate" style="display: none;" value="${TrainingProgram.programId}" />   

   </p>
     </form>
 </c:forEach>

I would be able to get away with basic:

 <a href="/somerequest/edit=${TrainingProgram.programId}"> Edit <a/>
 <a href="/somerequest/populate={TrainingProgram.programId}"> Populate <a/>

but this would limit me to GET and as I mentioned before I would like POST.

Is it possible to solve it with plain HTML(missing something really trivial?)? JS solutions are also welcome, though I understand JS only on copy-paste black-box level and I don't want people doing job for me and then effectively blaming me, unless it is really basic task to do in JS :-)

Thank You,

Julien Bourdon · Accepted Answer · 2012-01-02 04:28:31Z

2

Well, you should be able to do it by having two different forms:

 <p> ${TrainingProgram.name}</p> 
 <p> ${TrainingProgram.shortDescription}</p>
 <form method="POST" action="/someurlrequest">    
 <input value="Edit" type="submit" />  
 <input name="edit" type="hidden" value="${TrainingProgram.programId}" />
 </form>
 <form method="POST" action="/someurlrequest">
 <input value="Populate" type="submit" />
 <input name="populate" type="hidden" value="${TrainingProgram.programId}" />
 </form>

More explanations:

Basically, when you submit a form, all the inputs forms contained in the forms are sent to the action URL. So, even if you have two submit buttons in a same form, they will send the same values. As a rule of thumb, you should only have one submit button by form (except if you have more elaborate logic in Javascript).

edited Jan 2, 2012 at 4:28

answered Jan 2, 2012 at 3:52

Julien Bourdon

1,72318 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aubergine Over a year ago

Thanks, I always think about forms globally that single one has to encapsulate all the input.

Julien Bourdon Over a year ago

By the way, I edited the answer so that you do not have to use display:none in the inputs.

Collectives™ on Stack Overflow

form values submit control

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related