How can I get two form fields side-by-side, with each legend above the field?

Question

Problems: I am currently having two problems with the form I am trying to do:

1. I am trying to have two forms side by side and I am stuck on how to achieve this with some css.

   The following is how the form currently looks:

I am trying to put the "or Search by Zip Code" section to on the right hand side of the "Search By Provider Credentials" form.

The following is the css I am using and html I am using:

.form-style-5{
    max-width: 500px;
    padding: 10px 20px;
    background: #f4f7f8;
    margin: 10px auto;
    padding: 20px;
    background: #f4f7f8;
    border-radius: 8px;
    font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset{
    border: none;
}
.form-style-5 legend {
    font-size: 1.4em;
    margin-bottom: 10px;
}
.form-style-5 label {
    display: block;
    margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
    font-family: Georgia, "Times New Roman", Times, serif;
    background: rgba(255,255,255,.1);
    border: none;
    border-radius: 4px;
    font-size: 16px;
    margin: 0;
    outline: 0;
    padding: 7px;
    width: 100%;
    box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    background-color: #e8eeef;
    color:#8a97a0;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    margin-bottom: 30px;
    
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
    background: #d2d9dd;
}
.form-style-5 select{
    -webkit-appearance: menulist-button;
    height:35px;
}
.form-style-5 .number {
    background: #FF9900;
    color: #fff;
    height: 30px;
    width: 30px;
    display: inline-block;
    font-size: 0.8em;
    margin-right: 4px;
    line-height: 30px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    border-radius: 15px 15px 15px 0px;
}

.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
    position: relative;
    display: block;
    padding: 19px 39px 18px 39px;
    color: #FFF;
    margin: 0 auto;
    background: #FF9900;
    font-size: 18px;
    text-align: center;
    font-style: normal;
    width: 100%;
    border-width: 1px 1px 3px;
    margin-bottom: 10px;
    height:55px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover
{
    background: grey;
}
.formSpacing{margin-top:10px;}
.inputWidth1{width:80% !important;}
.inputWidth2{width:70% !important;}

<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number">1</span> Search By Provider Credentials </legend>

<div style="display: inline-block;">
<label class="formSpacing" for="job">Provider Name</label>
<input class="inputWidth1" type="text" name="Name" placeholder="Provider Name *">
</div>
<div style="display: inline-block; margin-left:20px">
<label for="job">Provider Speciality</label>
<select id="job" name="Specialty">
<option value="">Select a Specialty *</option>
<option value="PCP">Primary Care Physician</option>
<option value="Pediatrics">Pediatrics</option>
</select>  
</div>
<div style="display: inline-block;">
<label class="formSpacing" for="job">Gender</label>
<select id="job" name="Gender">
<option value="">Select a Gender *</option>
<option value="PCP">Male</option>
<option value="Pediatrics">Female</option>
</select>  
</div>
<div style="display: inline-block; margin-left:55px">
<label for="job">City</label>
<select id="job" name="City">
<option value="">City *</option> 
	<cfoutput query="cityFind">
		<option value=#city#>#city#</option>
  </cfoutput> 
</select>  
</div>
</fieldset>
<fieldset>
<legend><span class="number">2</span> or Search by Zip Code</legend>

<div style="display: inline-block;">
<label class="formSpacing" for="job">Zip Code</label>
<input class="inputWidth2" type="text" name="Name" placeholder="Zip Code *">
</div>

<div style="display: inline-block;  margin-left:20px">
<label for="job">Select Distance</label>
<select class="inputWidth2" id="job" name="Specialty">
<option value="">Select Distance *</option>
<option value="5" <cfif dist IS 5>selected="selected"</cfif>>5 Miles</option>
    <option value="10" <cfif dist IS 10>selected="selected"</cfif>>10 Miles</option>
    <option value="15" <cfif dist IS 15>selected="selected"</cfif>>15 Miles</option>
    <option value="20" <cfif dist IS 20>selected="selected"</cfif>>20 Miles</option>  
</select>  
</div>

</fieldset>

<div style="display: inline-block; margin-left:15px">
<input type="submit" value="Search" />
</div>
<div style="display: inline-block; margin-left:85px">
<input type="button" value=" Clear " onClick="ClearForm()">
</div>
</form>
</div>

2. I am trying to figure out a way, in javascript, to run a different script depending on which input is selected. If the user selects any of the inputs in the "Search By Provider Credentials", then run a particular script, otherwise run the other script.

How can I achieve this?

Thank You

Answer 1

Wrap your second fieldset in a div element with an id, or class. preferably an id. Optionally give your body css a width...Float the field-form-5 to the left, and float the newly created div to the right. Adjust widths as needed.

     <!DOCTYPE HTML>
     <html>
     <style>

     /*option body width*/
     body {
     width: 1100px;
     margin: 0 auto;
     }
     /*Added div tag to second fieldset*/
     #right-side {
     width: 500px;
     float:right;
     }
     .form-style-5{
      max-width: 500px;
      padding: 10px 20px;
      background: #f4f7f8;
      margin: 10px auto;
      padding: 20px;
      background: #f4f7f8;
      border-radius: 8px;
      font-family: Georgia, "Times New Roman", Times, serif;
      float:left;
     }
     .form-style-5 fieldset{
      border: none;
     }
     .form-style-5 legend {
      font-size: 1.4em;
      margin-bottom: 10px;
     } 
     .form-style-5 label {
     display: block;
     margin-bottom: 8px;
     }
     .form-style-5 input[type="text"],
     .form-style-5 input[type="date"],
     .form-style-5 input[type="datetime"],
     .form-style-5 input[type="email"],
     .form-style-5 input[type="number"],
     .form-style-5 input[type="search"],
     .form-style-5 input[type="time"],
     .form-style-5 input[type="url"],
     .form-style-5 textarea,
     .form-style-5 select {
     font-family: Georgia, "Times New Roman", Times, serif;
      background: rgba(255,255,255,.1);
     border: none;
     border-radius: 4px;
     font-size: 16px;
     margin: 0;
     outline: 0;
     padding: 7px;
     width: 100%;
     box-sizing: border-box; 
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box; 
      background-color: #e8eeef;
     color:#8a97a0;
     -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
     box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
     margin-bottom: 30px;
     </style>
</html>
<body>
<div id="left-side"> <!--NEW DIV OPTIONAL -->
<div class="form-style-5">
    <form>
        <fieldset>
            <legend><span class="number">1</span> Search By Provider Credentials </legend>

        <div style="display: inline-block;">
            <label class="formSpacing" for="job">Provider Name</label>
                <input class="inputWidth1" type="text" name="Name" placeholder="Provider Name *">
        </div>

        <div style="display: inline-block; margin-left:20px">
            <label for="job">Provider Speciality</label>
                <select id="job" name="Specialty">
                    <option value="">Select a Specialty *</option>
                    <option value="PCP">Primary Care Physician</option>
                    <option value="Pediatrics">Pediatrics</option>
                </select>  
        </div>
        <div style="display: inline-block;">
            <label class="formSpacing" for="job">Gender</label>
                <select id="job" name="Gender">
                    <option value="">Select a Gender *</option>
                    <option value="PCP">Male</option>
                    <option value="Pediatrics">Female</option>
                </select>  
        </div>
        <div style="display: inline-block; margin-left:55px">
            <label for="job">City</label>
                <select id="job" name="City">
                    <option value="">City *</option> 
                        <cfoutput query="cityFind">
                            <option value=#city#>#city#</option>
                    </cfoutput> 
                </select>  
        </div>
</div>
</fieldset>

<div id="right-side"> <!-- DIV FOR FLOATING CONTENT RIGHT.-->
<fieldset>
    <legend><span class="number">2</span> or Search by Zip Code</legend>

    <div style="display: inline-block;">
        <label class="formSpacing" for="job">Zip Code</label>
            <input class="inputWidth2" type="text" name="Name" placeholder="Zip Code *">
    </div>

    <div style="display: inline-block;  margin-left:20px">
        <label for="job">Select Distance</label>
            <select class="inputWidth2" id="job" name="Specialty">
                <option value="">Select Distance *</option>
                <option value="5" <cfif dist IS 5>selected="selected"</cfif>>5 Miles</option>
                <option value="10" <cfif dist IS 10>selected="selected"</cfif>>10 Miles</option>
                <option value="15" <cfif dist IS 15>selected="selected"</cfif>>15 Miles</option>
                <option value="20" <cfif dist IS 20>selected="selected"</cfif>>20 Miles</option>  
            </select>  
    </div>
</fieldset>
    <div style="display: inline-block; margin-left:15px">
        <input type="submit" value="Search" />
    </div>
    <div style="display: inline-block; margin-left:85px">
        <input type="button" value=" Clear " onClick="ClearForm()">
    </div>
</form>
</div>
</body>

I messed up one of your styles by accident, but i'm sure you can fix it.

Answer 2

A simple way of putting the two fieldsets side by side is having a container with a width, both fieldsets inside that container (div) and then setting

width: 50%;
float: left;

that will bring them side by side, but it might break your layout within the fieldset if the container width is too small. Also you should add an element with clear: both applied or you can add overflow: hidden to the container

For second problem, the simplest solution i can think of (and requires no javaScript) is to separate the form into 2 forms (and have 2 separate submit buttons). then each form has its own action. If you do want to have only one submit button you need to decide the rules on what field(s) are deciding which script gets called and writing them in a function that gets called on submit. The problem i see with this approach is, what do you choose for when user fills data in both fieldsets (or some data from one fieldset and some from the other).

plain JS onsubmit example

jquery .submit docs

EDIT - some more information about submitting the form to 2 different locations, based on user input. I'm going to assume you are using jQuery as well. If you are not, you don't need to add it just for this small part, as it should be fairly similar also in plain JS.

$("form").on("submit", function(e) {
    e.preventDefault(); //prevent the default form submit action
    var firstFormHasData = false;

    //here goes all the checking e.g. (check if some option is selected in #job select
    if($("#job").val() !== "") {
        firstFormHasData = true;
    }

    //other similar checks for other fields
    //...

    //decide what action to take
    var action = "path/to/action2.php";
    if(firstFormHasData) {
        action = "path/to/action1.php";
    }

    //submit the form
    $("form").attr("action", action).submit();

EDIT2 - just realized you could simply add one class to all form elements in first part and another to all form elements in second part (or also just leave it without that class). Then attach the "change" listeners to all your form elements and when something is changed you can check if that element has first class and act accordingly. example you decide to add class "first-part" to all elements in first part of form then code would be:

$("input, select").on("change", function() {
    if($(this).hasClass("first-part") {
        //change the form action to be first action
        $("form").attr("action", "path/to/action1.php")
    }
    else {
        $("form").attr("action", "path/to/action1.php")
    }
});

Answer 3

$("#cred input, #cred select").change(function() {
  // Do what credential search needs
  alert("credential");
});
$("#zip input, #zip select").change(function() {
  // Do what zip code search needs
  alert("zip code");
});

enter code here .form-style-5 {
  max-width: 800px;
  padding: 10px 20px;
  background: #f4f7f8;
  margin: 10px auto;
  padding: 20px;
  background: #f4f7f8;
  border-radius: 8px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset {
  border: none;
}
.form-style-5 legend {
  font-size: 1.4em;
  margin-bottom: 10px;
}
.form-style-5 label {
  display: block;
  margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
  font-family: Georgia, "Times New Roman", Times, serif;
  background: rgba(255, 255, 255, .1);
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin: 0;
  outline: 0;
  padding: 7px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #e8eeef;
  color: #8a97a0;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
  background: #d2d9dd;
}
.form-style-5 select {
  -webkit-appearance: menulist-button;
  height: 35px;
}
.form-style-5 .number {
  background: #FF9900;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  border-radius: 15px 15px 15px 0px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
  position: relative;
  display: block;
  padding: 19px 39px 18px 39px;
  color: #FFF;
  margin: 0 auto;
  background: #FF9900;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  width: 100%;
  border-width: 1px 1px 3px;
  margin-bottom: 10px;
  height: 55px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover {
  background: grey;
}
.formSpacing {
  margin-top: 10px;
}
.inputWidth1 {
  width: 80% !important;
}
.inputWidth2 {
  width: 70% !important;
}
.form-style-5 > form > div {
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-style-5">
  <form>
    <div id="cred" style="display: inline-block;">
      <fieldset>
        <legend><span class="number">1</span> Search By Provider Credentials</legend>

        <div style="display: block;">

          <div style="display: inline-block;">
            <label class="formSpacing" for="job">Provider Name</label>
            <input class="inputWidth1" type="text" name="Name" placeholder="Provider Name *">
          </div>
          <div style="display: inline-block; margin-left:20px">
            <label for="job">Provider Speciality</label>
            <select id="job" name="Specialty">
              <option value="">Select a Specialty *</option>
              <option value="PCP">Primary Care Physician</option>
              <option value="Pediatrics">Pediatrics</option>
            </select>
          </div>

        </div>

        <div style="display: block;">
          <div style="display: inline-block;">
            <label class="formSpacing" for="job">Gender</label>
            <select id="job" name="Gender">
              <option value="">Select a Gender *</option>
              <option value="PCP">Male</option>
              <option value="Pediatrics">Female</option>
            </select>
          </div>
          <div style="display: inline-block; margin-left:55px">
            <label for="job">City</label>
            <select id="job" name="City">
              <option value="">City *</option>
              <cfoutput query="cityFind">
                <option value=#city#>#city#</option>
              </cfoutput>
            </select>
          </div>
        </div>
      </fieldset>

    </div>

    <div id="zip" style="display: inline-block;">

      <fieldset>
        <legend><span class="number">2</span> or Search by Zip Code</legend>

        <div style="display: inline-block;">
          <label class="formSpacing" for="job">Zip Code</label>
          <input class="inputWidth2" type="text" name="Name" placeholder="Zip Code *">
        </div>

        <div style="display: inline-block;  margin-left:20px">
          <label for="job">Select Distance</label>
          <select class="inputWidth2" id="job" name="Specialty">
            <option value="">Select Distance *</option>
            <option value="5" <cfif dist IS 5>selected="selected"</cfif>>5 Miles</option>
            <option value="10" <cfif dist IS 10>selected="selected"</cfif>>10 Miles</option>
            <option value="15" <cfif dist IS 15>selected="selected"</cfif>>15 Miles</option>
            <option value="20" <cfif dist IS 20>selected="selected"</cfif>>20 Miles</option>
          </select>
        </div>

      </fieldset>

    </div>

    <div style="display: block;">
      <div style="display: inline-block; margin-left:15px">
        <input type="submit" value="Search" />
      </div>
      <div style="display: inline-block; margin-left:85px">
        <input type="button" value=" Clear " onClick="ClearForm()">
      </div>
    </div>
  </form>

</div>

1. This should result in what you need, the changes were some added divs around the parts of the forms and two lines of css to get the right side of the form in place and enlarge the holding div as the form got wider. If you see it in one column use the full page in the snippet preview as the preview width might not be enough to hold the form width.

2. I added some JavaScript, but without more information it might not be what you need, as it runs when you actually change something and it uses jquery.