I have form that has two check box elements. Those two will show/hide additional form elements depends if they are checked or not. Then I have tried to implement feature where user clicks on add new record. In that case all form data should be cleared out including those two check box elements. However, I get both elements to be unchecked but data-toggle didn't hide the elements. Here is example of my code:
$('.account-type').on('change', checkFormFld);
function checkFormFld() {
var checked = false,
containerID = $(this).data('target'),
checkboxes = $('.account-type');
$('.account-type').each(function() {
checked = checked || $(this).is(':checked');
});
$(containerID + ' :input').prop('disabled', !$(this).is(':checked'));
checkboxes.prop('required', !checked); // Set required attribute to false.
}
$('#account_goback').on('click', clearForm);
function clearForm(e) {
e.preventDefault();
$('.frm-Submit')[0].reset();
$('.frm-Submit .collapse').collapse('hide');
$('.account-type').trigger('change', checkFormFld);
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="searchaccount_container" class="collapse in">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container">
<span class="glyphicon glyphicon-plus-sign"></span> New Account
</button>
</div>
</div>
</div>
<div id="saveaccount_container" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" name="account_goback" id="account_goback" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
</button>
</div>
</div>
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="email"><span class="label label-primary">Email address:</span></label>
<input type="email" class="form-control check-existence" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select class="form-control" name="frm_activeuser" id="frm_activeuser" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="admin"><span class="label label-default">System Admin:</span></label>
<select class="form-control" name="frm_systemadmin" id="frm_systemadmin" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select class="form-control" name="frm_activestaff" id="frm_activestaff" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
If you run example and un-comment line of code in clearForm function you can see that hidden container will slide up but won't show up if I click again. Is there a way to achieve this to work with JQuery?
Use the Collapse component methods...
https://getbootstrap.com/docs/3.3/javascript/#collapse-methods
$('.frm-Submit .collapse').collapse('toggle');
All you need to do is remove those classes which we need to collapse on Go Back Button. And remove attribute required as well
$('#user-account').removeClass('in');
$('#staff-account').removeClass('in');
$("#frm_isstaff").removeAttr('required'); // Set required attribute to false.
$("#frm_activeuser").removeAttr('required'); // Set required attribute to false.
$("#frm_systemadmin").removeAttr('required'); // Set required attribute to false.
var $checkbox = $('.account-type');
$checkbox.on('change', function() {
var checked = false,
containerID = $(this).data('target');
$checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
$('div' + containerID + ' :input').prop('disabled', !$(this).is(':checked')); // Set disabled attribute on all input fields when check box is unchecked.
$checkbox.prop('required', !checked); // Set required attribute to false.
});
$('#account_new').on('click', clearForm);
function clearForm(e) {
e.preventDefault();
$('.frm-Submit')[0].reset();
$('#user-account').removeClass('in');
$('#staff-account').removeClass('in');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="searchaccount_container" class="collapse in">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" name="account_new" id="account_new" data-target="#saveaccount_container,#searchaccount_container">
<span class="glyphicon glyphicon-plus-sign"></span> New Account
</button>
</div>
</div>
</div>
<div id="saveaccount_container" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
</button>
</div>
</div>
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="email"><span class="label label-primary">Email address:</span></label>
<input type="email" class="form-control check-existence" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select class="form-control" name="frm_activeuser" id="frm_activeuser" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="admin"><span class="label label-default">System Admin:</span></label>
<select class="form-control" name="frm_systemadmin" id="frm_systemadmin" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select class="form-control" name="frm_activestaff" id="frm_activestaff" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
Related
I have two group of form fields and in each group there are some fields with required attribute. However, depends on what user selects one group might be hidden and those fields should not be included in HTML form validation. So far if I have only one visible container in the form and I populate all required fields my form won't submit. Those hidden fields are still required for some reason.
Is there a way to exclude those fields from validation?
Here is example:
var checkbox = $('.account-type');
checkbox.on('change', function() {
var checked = false;
checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
checkbox.prop('required', !checked);
});
$('.frm-Submit').on('submit', submitAdminFrm);
function submitAdminFrm(e) {
e.preventDefault(); // Prevnts default form submit.
alert('Submit form!');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
How can I prevent fields inside of the hidden container from being validated?
Since both check boxes are off by default, add disabled to the inputs (selects) inside both divs. Then all you have to do is, inside .change(), toggle that disabled property according to the corresponding check box's state.
var checkbox = $('.account-type');
checkbox.on('change', function() {
var checked = false;
checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
checkbox.prop('required', !checked);
$('div'+$(this).data('target') + ' :input').prop('disabled', !$(this).is(':checked'));
});
$('.frm-Submit').on('submit', submitAdminFrm);
function submitAdminFrm(e) {
e.preventDefault(); // Prevnts default form submit.
alert('Submit form!');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select disabled class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select disabled class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
i got this registeration for user,i use the js function at the submit button to prevent user from double click,but now the form will submit even though user did not inside name which is required,what should i do
<?php echo form_open('user/register_cust_checkout',array('class'=>'form-horizontal','id'=>'')) ?>
<div class="row col-12 pr-0">
<div class="col-md-6 pr-0">
<div class="form-group">
<label class="control-label">Nama Penuh</label>
<input type="text" name="full_name" class="form-control uppercase" required>
</div>
</div>
<div class="col-md-6 pr-0">
<div class="form-group">
<label class="control-label">No K / P</label>
<input type="text" name="nic_no" class="form-control uppercase">
</div>
</div>
</div>
<div class="row col-12 pr-0">
<div class="col-md-6 pr-0">
<div class="form-group">
<label class="control-label">Emel</label>
<input type="text" name="email" class="form-control">
</div>
</div>
<div class="col-md-6 pr-0">
<div class="form-group">
<label class="control-label">No Telefon</label>
<input type="text" name="phone" class="form-control" required>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Alamat</label>
<textarea class="form-control" id="example-textarea" name="address" rows="3"></textarea>
</div>
</div>
<div class="row col-12 pr-0">
<div class="col-md-6 pr-0">
<div class="form-group">
<label class="control-label">Poskod</label>
<input type="text" name="postcode" class="form-control uppercase">
</div>
</div>
<div class="col-md-6 pr-0">
<div class="form-group">
<label class="control-label">Bandar</label>
<input type="text" name="town_area" class="form-control uppercase">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group mb-3">
<label for="custom-select">Negeri</label>
<select class="custom-select select2" name="state_id" id="custom-select">
<option value="17" selected>---Pilih---</option>
<option value="1">SELANGOR</option>
<option value="2">KUALA LUMPUR</option>
<option value="3">JOHOR</option>
<option value="4">PERAK</option>
<option value="5">PENANG</option>
<option value="6">KEDAH</option>
<option value="7">PAHANG</option>
<option value="8">NEGERI SEMBILAM</option>
<option value="9">KELANTAN</option>
<option value="10">TERENGGANU</option>
<option value="11">MELAKA</option>
<option value="12">PUTRAJAYA</option>
<option value="13">PERLIS</option>
<option value="14">LABUAN</option>
<option value="15">SABAH</option>
<option value="16">SARAWAK</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">Tutup</button>
<input type="submit" onclick="this.disabled=true;this.value='Sila
Tunggu';this.form.submit();" id="btn_upd" class="btn btn-primary" value="Daftar">
</div>
<?php echo form_close() ?>
javascript code (onclick) :
<input type="submit" onclick="this.disabled=true;this.value='Sila
Tunggu';this.form.submit();" id="btn_upd" class="btn btn-primary" value="Daftar">
so this is my register form,user can even register even though the form is blank because this.form.submit(); ignore the required input form
I have two group of form fields and in each group there are some fields with required attribute. However, depends on what user selects one group might be hidden and those fields should not be included in HTML form validation. So far if I have only one visible container in the form and I populate all required fields my form won't submit. Those hidden fields are still required for some reason.
Is there a way to exclude those fields from validation?
Here is example:
var checkbox = $('.account-type');
checkbox.on('change', function() {
var checked = false;
checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
checkbox.prop('required', !checked);
});
$('.frm-Submit').on('submit', submitAdminFrm);
function submitAdminFrm(e) {
e.preventDefault(); // Prevnts default form submit.
alert('Submit form!');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
How can I prevent fields inside of the hidden container from being validated?
Since both check boxes are off by default, add disabled to the inputs (selects) inside both divs. Then all you have to do is, inside .change(), toggle that disabled property according to the corresponding check box's state.
var checkbox = $('.account-type');
checkbox.on('change', function() {
var checked = false;
checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
checkbox.prop('required', !checked);
$('div'+$(this).data('target') + ' :input').prop('disabled', !$(this).is(':checked'));
});
$('.frm-Submit').on('submit', submitAdminFrm);
function submitAdminFrm(e) {
e.preventDefault(); // Prevnts default form submit.
alert('Submit form!');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select disabled class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select disabled class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
My demo at here: http://project.bulleno.com/dwi/index2.html
In my demo, the select option of other form work well, but the select of form on slider not work and I cannot figure out and solve it.
I think it is conflict with jquery from master slider and smart form. But I cannot troubleshoot it. So I need help and any help is greatly appreciated. You can check my code below:
<div class="ms-slide slide-1" data-delay="9">
<div class="slide-pattern"></div>
<img src="js/masterslider/blank.gif" data-src="images/slide3.jpg" alt="" />
<h3 class="ms-layer text31 text-center"
style="top: 230px; right: 230px;"
data-type="text"
data-delay="500"
data-ease="easeOutExpo"
data-duration="1230"
data-effect="top(250)">Welcome To DidYouBlow</h3>
<h3 class="ms-layer text36 text-center"
style="top: 20px; right: -900px;"
data-type="text"
data-delay="0"
data-ease="easeOutExpo"
data-duration="1230"
data-effect="top(250)">
<div class="col-md-4 col-sm-6 col-sm-6 col-xs-12 bmargin">
<span class="visible-lg">
<div class="feature-box57 bmargin">
<br />
<font color="000000"><i class="fa fa-university"></i><font size="+2">Submit DWI INFO</font><i class="fa fa-university"></i></font>
<form method="post" action="send.php" id="">
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Full Name">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Phone Number">
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Email">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="City / Court">
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Name">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Name">
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<label for="month" class="field select">
<select id="month" name="month">
<option value="">How Did You Hear About Us?</option>
<option value="Facebook">Facebook</option>
<option value="Google">Google</option>
<option value="Yahoo">Yahoo</option>
<option value="Mailer">Mailer</option>
<option value="Radio">Radio</option>
<option value="Bing">Bing</option>
<option value="Referral">Referral</option>
</select>
<i class="arrow double"></i>
</label>
</div>
<div class="col-sm-5">
<label for="month" class="field select">
<select id="month" name="month">
<option value="">How Did You Hear About Us?</option>
<option value="Facebook">Facebook</option>
<option value="Google">Google</option>
<option value="Yahoo">Yahoo</option>
<option value="Mailer">Mailer</option>
<option value="Radio">Radio</option>
<option value="Bing">Bing</option>
<option value="Referral">Referral</option>
</select>
<i class="arrow double"></i>
</label>
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-11">
<textarea class="form-control" id="sendermessage" name="sendermessage" placeholder="Enter message"></textarea>
</div>
<div class="clearfix"></div>
<br>
<button type="submit" class="btn btn-dark-2 less-round less-padding">Submit Information</button>
</div>
</form>
</div>
</span>
</h3>
</div>
The problem cause this matter is: mouse and loop option in master slider.
I had disable both options and everything work well.
I'm trying to add a submit button beside my select option drop down menu. I can't seem to get to align properly above the message box.
It sits in a basic div but didn't think it was needed.
<form id="contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<h5>Join us now</h5>
<div class="form-group">
<label for="subject">
Select Option</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
Send Message</button>
</div>
</div>
</form>
I modified the rows and columns in your code, you can find it in this JSFiddle , hope this helps.
<form id="contact-form">
<div class="row">
<div class="col-md-6 col-xs-6">
<h5>Join us now</h5>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="subject">
Select Option
</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<button type="submit" class="btn btn-skin pull-right buttonTest" id="btnContactUs">
Send Message
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Message
</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
</div>
</div>
</div>