Submitting a form with different values using javascript

Question

I am new to forms, and Javascript, so please be forgiving.

I have a form that looks like this:

<form method="post" action="control" name="myform">
<input type="submit" name="Name" value="Do A"/>
<input type="submit" name="Name" value="Do B" />
<input type="submit" name="Name" value="Do C" />
<input type="submit" name="Name" value="Close" />
</form>

I need to change this so that there are two buttons, and the form is submitted using javascript dependent on some external conditions, so I want it to look something like this:

<form method="post" action="control" name="myform">
<script>
function submitForm(form){
    if(someConditionA){
        submit the form so that the script performs same action as if the button Do A had been clicked
    } if (someConditionB){
        submit the form so that the script performs same action as if the button Do B had been clicked
    } if (someConditionC){
        submit the form so that the script performs same action as if the button Do C had been clicked
    }
}

function closeForm(form){
    window.close();
}
</script>
<button name="doAction" onClick="SubmitForm(this.form)">Do Action<\button>
<button name="close" onClick="SubmitForm(this.form)">Close<\button>
</form>

How can I implement the function submitForm?

Thanks

For starters, you have `SubmitForm` in your event handler, but the function is called `submitForm`. `this.form` doesn't exist. Your submit buttons should have different names to differentiate them. — Waleed Khan, Aug 10 '12 at 14:42
Sorry for the typo. The buttons have to have the same name so that the cgi script can process it — Tom, Aug 10 '12 at 14:46
I do not understand what you mean by "submit the form so that it performs same action as Do A above" — Aaron Kurtzhals, Aug 10 '12 at 14:46

MarkFisher · Accepted Answer · 2012-08-10T15:14:02.137

Add a hidden field with the same name as the original submit buttons:

<input type="HIDDEN" name="Name" value=""/>

Set the value of that field based on your conditions:

function submitForm(form){
    if(someConditionA){
        form.Name.value = "Do A";
    } if (someConditionB){
        form.Name.value = "Do B";
    } if (someConditionC){
        form.Name.value = "Do C";
    }
    form.submit();
}

Change the new Close button to this:

<button name="close" onClick="this.form.Name.value='Close';this.form.submit();">Close<\button>

I haven't tested this, so it may contain a mistake or two, but that's the general idea. (+1 for 'this.form', not many folks know about that, nice.)

Same as my answer above, but a lot more detailed. Thanks! – Tom Aug 10 '12 at 15:05 — Tom, Aug 10 '12 at 15:05

score 0 · Answer 2 · answered Aug 10 '12 at 14:53

0

Have just figured out the answer to my question:

The way to do it is to have a hidden field:

<input type="hidden" name="Name" value=""/>

Then in the function, set this hidden field to have the same value as the respective button.

answered Aug 10 '12 at 14:53

Tom

6,601
12
40
48

score 0 · Answer 3 · answered Aug 10 '12 at 15:03

0

Well, you should simply name your submit buttons differently.

<form method="post" action="control" name="myform">
    <input type="submit" name="SubmitA" value="Do A"/>
    <input type="submit" name="SubmitB" value="Do B" />
</form>

This way, when submitted, the server will be able to distinguish which submit was clicked.

answered Aug 10 '12 at 15:03

Madara's Ghost

172,118
50
264
308

In my question I said that only two buttons were needed – Tom Aug 10 '12 at 15:04
The fields you're saying should be edited don't exist, they've been replaced with the code the OP wants help with. BTW, it wasn't me, just thought I'd help out. – MarkFisher Aug 10 '12 at 15:05
@MarkFisher: You guys are missing the point. The form should **work** without JavaScript enabled, and then **work *better*** with JavaScript enabled. The form shouldn't work only if JavaScript is enabled, as users without it will lose functionality. – Madara's Ghost Aug 10 '12 at 15:07
@Truth: because I wanted two buttons, but the same functionality. With your solution, I can only Do A and Do B, I can't Do C or Close – Tom Aug 10 '12 at 15:15

score -1 · Answer 4 · answered Aug 10 '12 at 14:51

-1

not sure if I got your Problem right, but why dont you just make a click event on those submit buttons? like

$('#mysendbtn').click(function(){ ...do A });

answered Aug 10 '12 at 14:51

yogee

159
1
11

1

jQuery was not requested here. This can be done in native JavaScript quite easily. a.k.a. **[MOAR JQUERY!!](http://stackoverflow.com/a/2826810/871050)** – Madara's Ghost Aug 10 '12 at 15:01

Submitting a form with different values using javascript

4 Answers4