Develop Reference

js this.form.submit(); ignore the required input html

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 want to create multiple forms based on the user input of a dropdown list

I want to create multiple forms based on user input of a dropdown list. For example, if the user selects 3, then I have to create 3 same forms, one after another. I have the code below:
HTML code
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="selectPassegners">Select the number of passengers:</label>
<select class="form-control" id="passengersSelector">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" onclick="GetSelectedValue()" style="margin-left: 390px;">Get Selected Value</button>
<p id="result" style="text-align: center;"></p>
<div class="container" id="outside-container">
<div class="row">
<div class="col-md-12">
<h1>Passenger Info</h1>
<p>Enter your personal info below. These data will be displayed on your ticket.</p>
<form id="lead-passenger" action="" method="post">
<div class="container" id="inside-container">
<h2>Passenger One (Lead passenger)</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="firstname">First name:</label>
<input type="text" class="form-control" id="firstname" name="firtName">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lastname">Last name:</label>
<input type="text" class="form-control" id="lastname" name=lastName>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ptitle">Sex:</label>
<select class="form-control" id="sel-title" name="sex">
<option style="display:none"></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="birthday">Date of birth: </label>
<input type="date" class="form-control" name="birthday">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" class="form-control" id="phone" name="phone" pattern="[6]{1}-[9]{1}-[0-9]{8}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address" name="address">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" id="city" name="city">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="address">Postal code:</label>
<input type="text" class="form-control" id="address" name="postalCode">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
And JS code I found that shows the result of the dropdown list
function GetSelectedValue() {
var e = document.getElementById("passengersSelector");
var numberOfPassengers = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = "You selected " + numberOfPassengers + " passengers";
}
I am still a beginner, so any tips would be appreciated! :)

You can store the contents of your outside-container class in a separate variable. And depending on the user selection, add this variable that many times to the array.
const formMarkup = `<div class="row">
<div class="col-md-12">
<h1>Passenger Info</h1>
<p>Enter your personal info below. These data will be displayed on your ticket.</p>
<form id="lead-passenger" action="" method="post">
<div class="container" id="inside-container">
<h2>Passenger One (Lead passenger)</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="firstname">First name:</label>
<input type="text" class="form-control" id="firstname" name="firtName">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lastname">Last name:</label>
<input type="text" class="form-control" id="lastname" name=lastName>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ptitle">Sex:</label>
<select class="form-control" id="sel-title" name="sex">
<option style="display:none"></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="birthday">Date of birth: </label>
<input type="date" class="form-control" name="birthday">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" class="form-control" id="phone" name="phone" pattern="[6]{1}-[9]{1}-[0-9]{8}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address" name="address">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" id="city" name="city">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="address">Postal code:</label>
<input type="text" class="form-control" id="address" name="postalCode">
</div>
</div>
</div>
</div>
</form>
</div>
</div>`
And then
function GetSelectedValue() {
var e = document.getElementById("passengersSelector");
var numberOfPassengers = e.options[e.selectedIndex].value;
var result = [];
for(var i=0; i < numberOfPassengers; i++) {
result.push(formMarkup);
}
document.getElementById("outside-container").innerHTML = result.join('');
}
Also, update your original markup to
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="selectPassegners">Select the number of passengers:</label>
<select class="form-control" id="passengersSelector">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" onclick="GetSelectedValue()" style="margin-left: 390px;">Get Selected Value</button>
<p id="result" style="text-align: center;"></p>
<div class="container" id="outside-container">
</div>

parsley lib is not showing validation messages on this wizard

<form id="form1" action="" method="POST" data-parsley-validate="true" name="form-wizard">
<div class="wizard-step-1">
<fieldset>
<legend class="pull-left width-full">Search Slot </legend>
<!-- begin row -->
<div class="row">
<div class="col-md-3">
<div class="form-group block1">
<label>Date *</label>
<input type="text" name="dtpSearch" id="dtpSearch" placeholder="DD-MM-YYYY" class="form-control datepicker-autoClose1" data-parsley-group="wizard-step-1" required />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Start Time *</label>
<div class="input-group date 24hourtime" >
<input type="text" class="form-control" id="txtFromTime" name="txtFromTime" value="00:00 AM" placeholder="Enter StartTime" data-type="alphanum" data-parsley-required="true" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>End Time</label>
<div class="input-group date 24hourtime" >
<input type="text" class="form-control" id="txtToTime" name="txtToTime" value="23:59 PM" placeholder="Enter EndTime" data-type="alphanum" data-parsley-required="true" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Court Type</label>
<select class="form-control" id="ddlCtype" name="ddlCtype" data-parsley-required="true">
<option value="">Any</option>
<option value="1">Concrete</option>
<option value="2">Clay</option>
<option value="3">Grass</option>
<option value="4">Sand</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Roofed *</label>
<div>
<label class="radio-inline"><input type="radio" name="optRoofed" checked data-parsley-validate="false" value="0">No</label>
<label class="radio-inline"><input type="radio" name="optRoofed" data-parsley-validate="false" value="1">Yes</label>
</div>
</div>
</div>
</div>
<!-- end row -->
</fieldset>
</div>
<!-- end wizard step-1 -->
I am using this lib on this wizard. I have removed some of wizard step for sake of clarity. Now work fine on webapp other pages where i did not use this wizard. why it is not working on this wizard??
Note:Skipping some wizard step for the sake of clarity.

How to trigger Bootstrap 3 data-toggle with JQuery?

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>

Select option form not work in master slider?

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.