SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form submission dependant on option selected

    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
    Code:
    <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi massimassi. Welcome to the forums.

    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.

    Code:
    <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. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I've been doing this for 10 years and I would be hard pressed to edit the code of a pre built CMS.

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I've been doing this for 10 years and I would be hard pressed to edit the code of a pre built CMS.
    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:
    Code:
    <form action="" id="zip" method="post">
    		<select class="field" name="set_zip_filter_distance" onchange="$('zip').submit()">
    			<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>
    		<input type="hidden" name="submit_zip_filter"/>
    
    		<!--  BUTTON1---<input type="submit" name="submit_zip_filter" value="submit" class="button" />
    		        BUTTON2---<input type="submit" name="clear_zip_filter" value="reset" class="button" />-->
    </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
    Code:
    		    <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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •