1

I've found a similar question here: javascript - change form action based on selection?

But my problem is slightly different. I have two selects:

 <form id="CarSearch" action="" method="post">
 <select name="style" id="Style">
 <option value="" selected>Any Style</option>
 <option value="style/sports-1">Sports</option>
 <option value="style/wagon-3">Wagon</option>
 <option value="style/suv-6">SUV</option>
 </select>

 <select name="make" id="Make">
 <option value="" selected>Any Make</option>
 <option value="make/porsche-3">Porsche</option>
 <option value="make/ford-6">Ford</option>
 <option value="make/volvo-7">Volvo</option>
 </select>
<input type="submit" value="submit"/>
</form>

I want to build the form action attribute based on the values in both selects. So here are the situations:

  1. If both the Style and Make are set to "Any" and hence have no values; the form action should be blank.
  2. If a Style is specified, but Make isn't; the form action should be just the value from Style e.g. action="style/sports-1"
  3. If a Make is specified, but Style isn't; the form action should be just the value from Make e.g. action="make/volvo-7"
  4. If both a Style and Make are specified; the form action should be a concatenation of the values from Style and Make e.g. action="/style/sports-1/make/volvo-7"

The defaults for both selects is always "Any". I could try to create two variables in jQuery for each select and set their values whenever either select changes. But its the concatenation part that's confusing me.

I have created a JSFiddle here to get me started http://jsfiddle.net/L91rb9f9/3/

I'm ending with two slashes when a Style isn't specified.

Community
  • 1
  • 1
volume one
  • 6,800
  • 13
  • 67
  • 146

3 Answers3

2

Try something like this :

$("#CarSearch").submit(function () {
    var style = $("#Style").val();
    var make = $("#Make").val();

    if (style == "" && make == ""){
        $('form').get(0).setAttribute('action', '');
    }
    else if (style != "" && make != "")  {
        $('form').get(0).setAttribute('action', style + "/" + make);
    }
    else {
        $('form').get(0).setAttribute('action', style + make);
    }
});
Mathieu Labrie Parent
  • 2,598
  • 1
  • 9
  • 10
1
<script>
function updateForm(){
    var formelem=$('#CarSearch');
    var styleelem=$('#Style');
    var makeelem=$('#Make');

    var action='/';
    action+=styleelem.val();
    if (action.length>1)action+='/';
    action+=makeelem.val();
    formelem.attr('action',action');
}
</script>
<form id="CarSearch" action="" method="post">
 <select onchange="updateForm();" name="style" id="Style">
 <option value="" selected>Any Style</option>


<option value="style/sports-1">Sports</option>
 <option value="style/wagon-3">Wagon</option>
 <option value="style/suv-6">SUV</option>
 </select>

 <select onchange="updateForm();" name="make" id="Make">
 <option value="" selected>Any Make</option>
 <option value="make/porsche-3">Porsche</option>
 <option value="make/ford-6">Ford</option>
 <option value="make/volvo-7">Volvo</option>
 </select>
<input type="submit" value="submit"/>
</form>
xatzistnr
  • 174
  • 1
  • 7
1

The following jQuery method should satisfy your requirement. 

$("#CarSearch").click(function (){
    var style = $("#Style").val();
    var make = $("#Make").val();
    var formAction = "";

    if(style != "" && make != ""){
        formAction = "/" + style + "/" + make;
    }else if (style != "" && make == "") {
        formAction = style;
    }else if (style == "" && make != ""){
        formAction = make;
    }else {
       formAction = ""; 
    }
    $("#CarSearch").attr("action", formAction);
    alert('Form Action: ' + $("#CarSearch").attr("action"));
});

DEMO

Parkash Kumar
  • 4,710
  • 3
  • 23
  • 39