Form submission dependant on option selected

HTML & CSS
1

Hello,
I need to change the “name” part of the <input> of a form accordingly to an option selected from a dropdown.
Please refer to the code to understand what I mean.
The form is something like this, with a submit onchange


<form id="myform" method="a_method" action="an_action">
	<select class="field" name="name_of_select" onchange="$('myform').submit();"
	<option value="1">choise1</option>
	<option value="2">choise2</option>
	</select>

<input type="hidden" name="this_name_changes_when_option_selected_changes">
</form>

I’m not a programmer but I’m willing to learn as I need to make it work, but please explain things to me in a human understandable way:)
Thanks a lot.
mass

2

Hi massimassi. Welcome to the forums. :slight_smile:

A couple of things:

  • firstly, it’s better to user a server side script like PHP for form submission. JS is not reliable.
  • secondly, you don’t need to switch names values or anything like that. The backend script will just pick up which option was selected.

<label for="business">Business Type</label>

<select id="business" name="business">
	<option value="First Choice">First Choice</option>
	<option value="Second Choice">Second Choice</option>
	<option value="Third Choice">Third Choice</option>
	<option value="Fouth Choice">Fouth Choice</option>
</select>
3

Thank you ralph.m.
I semplified the code, which is part of something bigger.
The form is part of a template (smarty) of a commercial cms I bought.
I do need to submit the form with 2 different names, accordingly to the option selected, if you want I can post the whole code but I don’t think it’s worth to know it.
I don’t want to use php as the original code uses already some JS and also because I’m not comfortable with it.
Thanks.
mass

4

I’ve been doing this for 10 years and I would be hard pressed to edit the code of a pre built CMS.

5

Hello.
This CMS is structured to be “easily” customized; the form I want to modify in fact is part of a template (smarty).
So, no problem with code changing.
Anyways…
The “Original” code is something like this:


<form action="" id="zip" method="post">
		<select class="field" name="set_zip_filter_distance" [B]onchange="$('zip').submit()[/B]">
			<option value="">Distance</option>
			<option value="1">1km</option>
			<option value="5">5km</option>
			<option value="10">10km</option>
			<option value="15">15km</option>
                        .....and so on.....
		</select>
		[B]<input type="hidden" name="submit_zip_filter"/>[/B]

		[B]<!--[/B]  BUTTON1---<input type="submit" name="submit_zip_filter" value="submit" class="button" />
		        BUTTON2---<input type="submit" name="clear_zip_filter" value="reset" class="button" /[B]>-->[/B]
</form>

The parts in bold arethe ones I added.
At the bottom of it you will noticed 2 lines of code I commented out. They were 2 submit button I’m trying to get rid of, and that’s the reason why I want to change the “name part” of the <input> line to change in accordance to the option selected.
The code above works but it only submits, I wanto to add 1 more option (<option value=“RESET”>RESET</option>) and cause the form to submit as if it was BUTTON2 if “RESET” is selected and like BUTTON1 if the other option are selected.

So far I tried


		    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">

	if $('#set_zip_filter_distance').change(function(){
	$('#submit_line').attr('name', 'clear_zip_filter');
	this.form.submit();
        }
	else
	{
	this.form.submit();
	});
	</script>

…but it doesn’t work:(.

Maybe someone experienced can help me?
Thanks a lot.
mass