ng-include not working like it supposed to - javascript

I have a form and it has several buttons. When clicking one of this button, this form should remove and load another form. I'm trying to do this using ng-include method. I have done a similar thing before and got it to work. But I cannot understand why this is not working.
I have given the 2nd form inside script tag and when clicking the above mentioned button it calls for this form. But it does not load.
I have removed the existing form using ng-if method in the controller.
My html code
<div class="container">
<form role="form" id="info_form" name="info_form" ng-controller="infoCtrl" ng-app="app" novalidate>
<div>
<section class="content-header">
<h1>
Fill your medical information
<!--<small>Optional description</small>-->
</h1>
</section>
<!-- Main content -->
<section class="content">
<div>
<div class="box">
<?php
echo form_open('info/addInfo');
?>
<div class="box-body">
<div>
<div class="col-lg-12">
<div style="margin-top: 15px;width: 100%;">
<!--first block-->
<div style="float: left;width: 33%;height: 100%" ng-show="table_remove">
<div class="form-group">
<label class="info_ques_text">Age</label>
<div class="input-group">
<input class='input' type="number" class="form-control" name="Age" id="Age" ng-model="data.age" placeholder="Enter your age" required><br>
<span class="error_msg" ng-show="submitted && info_form.Age.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Sex</label>
<div class="input-group">
<select class='input' name="Sex" id="Sex" ng-model="data.sex" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Sex.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Blood Pressure</label>
<div class="input-group">
<input class='input' type="number" class="form-control" name="Pressure" id="Pressure" ng-model="data.blood_pressure" placeholder="Enter your blood pressure" required><br>
<span class="error_msg" ng-show="submitted && info_form.Pressure.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Blood Sugar</label>
<div class="input-group">
<select class='input' name="Sugar" id="Sugar" ng-model="data.sugar" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="PF">Low</option>
<option value="NPF">Normal</option>
<option value="C">High</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Sugar.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Maximum Heart Rate</label>
<div class="input-group">
<input class='input' type="number" name="Heart" id="Heart" class="form-control" ng-model="data.heart_rate" placeholder="Enter Value" required><br>
<span class="error_msg" ng-show="submitted && info_form.Heart.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
<!--second block-->
<div class="form-group">
<label class="info_ques_text">Slope The Peak Exercise ST Segment</label>
<div class="input-group">
<input class='input' type="number" name="Slope" id="Slope" class="form-control" ng-model="data.slope" placeholder="Enter Value" required><br>
<span class="error_msg" ng-show="submitted && info_form.Slope.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Number of major vessels</label>
<div class="input-group">
<select class='input' name="Vessel" id="Vessel" ng-model="data.vessels" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Vessel.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Smoking</label>
<div class="input-group">
<select class='input' name="Smoke" id="Smoke" ng-model="data.smoking" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">No</option>
<option value="1">Yes - Heavy Smoker</option>
<option value="2">Yes - Light Smoker</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Smoke.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Exercising</label>
<div class="input-group">
<select class='input' name="Exercise" id="Exercise" ng-model="data.exercise" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Exercise.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
<!--third block-->
<div style="float: left;width: 34%;height: 100%" ng-show="table_remove">
<div class="form-group">
<label class="info_ques_text">Consuming Alcohol</label>
<div class="input-group">
<select class='input' name="Alcohol" id="Alcohol" ng-model="data.alcohol" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">No</option>
<option value="1">Yes - Heavy Consumer</option>
<option value="2">Yes - Light Consumer</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Alcohol.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">How Long Do You Work Per Day?</label>
<div class="input-group">
<select class='input' name="Work" id="Work" ng-model="data.work" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">4-5 Hours</option>
<option value="1">5-6 Hours</option>
<option value="2">6-7 Hours</option>
<option value="3">More than 7 Hours</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Work.$error.required">Value cannot be blank</span>
</div>
</div>
<input class="input" type="hidden" name="Email" id="Email" class="form-control" ng-model="data.email" value="<?php echo($email); ?>"><br>
<!-- <div style="margin-left: 10px;"><button1><a href="" ng-click="submitted = true;
submit(data)">Submit</a></button1></div>
-->
</div>
</div>
</div>
</div>
</div>
<div class="box-footer" ng-show="table_remove">
<button href="" type="submit" ng-click="submitted = true;
train(data);" class="btn btn-primary">Train data</button>
<button href="" type="submit" ng-click="submitted = true;
submit(data);
template = 'addeditview'" class="btn btn-primary">Submit</button>
<a type="button" class="btn btn-danger" href="{{url()}}/admin/organizations/view">Cancel</a>
</div>
<?php
echo form_close();
?>
</div>
</section><!-- /.content -->
<ng-include src="template"></ng-include>
<script type="text/ng-template" id="addeditview">
<form class="form-horizontal" role="form" id="prediction_form" name="prediction_form" ng-controller="infoCtrl" ng-app="app" ng-submit="submit(data)" novalidate>
<div class="form-group">
<label class="info_ques_text">How Long Do You Work Per Day?</label>
<div class="input-group">
<select class='input' name="Work" id="Work" ng-model="data.work" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">4-5 Hours</option>
<option value="1">5-6 Hours</option>
<option value="2">6-7 Hours</option>
<option value="3">More than 7 Hours</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Work.$error.required">Value cannot be blank</span>
</div>
</div>
</form>
</script>
</div>
</div>
</body>
</div>


The src attribute has to point to a valid html file, taking into account the root folder as www (or at least where you're supposed to) As such:
<ng-include src="template.html"></ng-include>
I would suggest not to discredit a very respected and solid framework only because you don't understand the documentation :)

Related

ng-disabled button until input file is changed

I have a form and it includes an input file for uploading photos. What I want is to disable the button until input file has no value. I also have other validations that make the button disabled.
My html file is like this
<form name="form" novalidate ng-submit="submitForm();">
<input class="btn btn-primary" type="file" accept="image/*" name="File" id="File" style=" margin-left:5px; width: 100%;">
<div class="form-group">
<label class="text-left control-label">Categories: </label>
<select class="col-xs-5 pull-right" ng-model="cat" name="cat" ng-required="true" required>
<option value="">---Please select---</option>
<option ng-repeat="item in Cat" value="{{item.categories_id}}">{{item.categories_name}}</option>
</select>
</div>
<br/>
<div class="form-group">
<label class="text-left control-label">Types: </label>
<select class="col-xs-5 pull-right" ng-model="type" name="type">
<option value="">---Please select---</option>
<option ng-repeat="item in Types" value="{{item.type_id}}">{{item.type_name}}</option>
</select>
</div>
<br/>
<div class="form-group">
<label class="text-leftcontrol-label">Gender: </label>
<select class="col-xs-5 pull-right" name="category" id="category" ng-model="gender">
<option value="">---Please select---</option>
<option value="0">Female</option>
<option value="1">Male</option>
<option value="2">Both</option>
</select>
</div>
<br/>
<div class="form-group">
<label class="text-left control-label">*Texture: </label>
<select class="col-xs-5 pull-right" ng-model="texture" name="texture" ng-required="true" required>
<option value="">---Please select---</option>
<option ng-repeat="item in Texture" value="{{item.textures_id}}">{{item.textures_name}}</option>
</select>
</div>
<br/>
</div>
<div class="col-xs-5">
<div class="form-group">
<label class="col-md-5 control-label">*Name: </label>
<div class="col-md-7">
<input type="text" class="pull-right input-group inline form-control" ng-model="name" name="name" id="Name" ng-required="true" required>
</div>
</div>
<br/><br/><br/>
</form>
and my button is like this
<button name="submit" type="submit" id="submitsave" class="btn btn-primary" ng-disabled="form.texture.$invalid || form.cat.$invalid || form.type.$invalid " type="button" type="button" style="margin-right:1%; width:10%; height:10%">Finish</button>

It is very easy way to do. Check this out.
angular.module('app', []).controller('mainCtr', function($scope) {
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app" ng-controller="mainCtr">
<form name="mainform">
<input type="text" ng-model="name" required />
<input type="submit" value="Save" ng-disabled="mainform.$invalid" />
</form>
</body>

In meteor how to hide a form on click of a button?

I am trying to display a form on click of a button in the card and button should hide and display the form. But it is not displaying. I thought I have written write code but not getting. Can help me what is the mistake in my code.
<div id="wCard">
{{#each workflow}}
<div class="module-card">
<div class="card-header wfmodule">Cast for '{{project}}'</div>
<div class="assigned-tag">Assigned To:</div>
<div class="assigned-to">{{team}}<hr></div>
<div class="actions">No Actions Created</div>
<div class="due-on">Due on:{{d_date}}</div>
</div>
<div><button class="btn-wf stage-blue-wf button-x-small-wf" id="newAction">New Action</button></div>
{{/each}}
</div>
the below is the form should display when I click the new action button in the above code.
<!-- create new action -->
<div class="workflow" id="createAction">
<form class="workflow-action-form" method="post" id="actionForm">
<div> <input type="text" class="flow-title" name="actionTitle" placeholder="New Action Name" /></div>
<div class="form-line"></div>
<fieldset class="form-group">
<textarea class="form-control" id="skills" name="description" placeholder="Description" required></textarea>
</fieldset>
<fieldset class="form-group">
<select class="form-control m-b" name="team" required>
<option value="" selected="selected">Assign to Team or People</option>
<option>Production Team</option>
<option>Production Team 1</option>
<option>Production Team 2</option>
<option>Production Team 3</option>
</select>
</fieldset>
<div class="row">
<div class="col-md-6">
<fieldset class="form-group">
<div class='input-group date' id='datetimepicker3'>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
<input type='text' class="form-control" name="s_date" placeholder="Start Date" required/>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset class="form-group">
<div class='input-group date' id='datetimepicker4'>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
<input type='text' class="form-control" name="d_date" placeholder="Due Date" required/>
</div>
</fieldset>
</div>
</div>
<fieldset class="form-group">
<select class="form-control m-b" name="link" required>
<option value="" selected="selected">Link to Meeting or Event</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
</fieldset>
<fieldset class="form-group">
<select class="form-control m-b" name="project" required>
<option value="" selected="selected">Create a Path</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</fieldset>
<fieldset class="form-group">
<textarea class="form-control" id="skills" name="notes" placeholder="Notes" required></textarea>
</fieldset>
<div class="flex-btn-force-right">
<div class="btn-box">
<button type="button" class="btn btn-info" id="cancelActionBtn">Cancel</button>
<button type="submit" class="btn btn-info" id="createActionBtn">Create</button>
</div>
</div>
</form>
</div>
and JS is:
$(document).ready(function(){
$('#newAction').click(function(){
$('#newAction').hide();
$('#createAction').show();
});
});

I think it is a same id problem.
<div id="wCard">
{{#each workflow}}
<div class="module-card">
<div class="card-header wfmodule">Cast for '{{project}}'</div>
<div class="assigned-tag">Assigned To:</div>
<div class="assigned-to">{{team}}<hr></div>
<div class="actions">No Actions Created</div>
<div class="due-on">Due on:{{d_date}}</div>
</div>
{{/each}}
<div><button class="btn-wf stage-blue-wf button-x-small-wf" id="newAction">New Action</button></div>
</div>
Each in a wrong place.

How to check if a field from a form is filled?

So I am trying to figure out a way to blank a field if a particular field is entered and vice versa.
The form locates urgent care locations base on the entries that the users enters. So we have the urgent care facility name, city, zip code and miles field.
So what I would like to do is if the user enters the zip code in the zip code field and if the user previously had selected a city based on the selection given, it blanks out the city and vice versa. If the user selects a city from the city drop down list, the zip code field blanks out.
The following is the code I have:
$('#zip').on('input‌', function() { $('#city').val("") })
$('#city').on('input‌', function() { $('#zip').val("") })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
<div class="form-group">
<input class="form-control" id="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
</div>
<!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->
<div class="form-group">
<!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
<option disabled="disabled" selected="selected" value="">City</option> </select>--->
<SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<cfoutput query="UCarecityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select>
</div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
<select class="form-control" name="distance" ng-model="searchParam.distance">
<option selected="selected" value=" "></option>
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group">
<input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
</div>
</form>
</div>
</div>

You have an invisible character with code 0x5396c after input in your .on() calls. When I remove that, the code works.
$('#zip').on('input', function() {
$('#city').val("")
})
$('#city').on('input', function() {
$('#zip').val("")
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
<div class="form-group">
<input class="form-control" id="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
</div>
<!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->
<div class="form-group">
<!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
<option disabled="disabled" selected="selected" value="">City</option> </select>--->
<SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<cfoutput query="UCarecityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select>
</div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
<select class="form-control" name="distance" ng-model="searchParam.distance">
<option selected="selected" value=" "></option>
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group">
<input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
</div>
</form>
</div>
</div>

Stripe checkout button ignores Foundations data-abide

I have a Foundation form that uses data-abide for validation of certain fields. I am using Stripe's checkout for payment which calls javascript.
The problem I have is that Foundations data-abide validation is being ignored and the Stripe checkout windows is being launched.
I want the form to be valid before launching the stripe checkout.
I think this is something to do with the button type having to be button and not a submit.
This is very much stretching my knowledge so I appreciate your patience.
Many thanks,
John
Here's the form:
<form action="#" name="form" method="post" data-abide>
<input type="hidden" name="membership_type" value="<?php echo $mem_id; ?>">
<fieldset>
<legend>Principle Contact</legend>
<div class="row">
<div class="large-2 columns">
<div class="input-wrapper">
<label>
Title
<select name="title" required>
<option selected disabled value=''>Select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Sir">Sir</option>
<option value="Earl">Earl</option>
<option value="Countess">Countess</option>
<option value="Lady">Lady</option>
<option value="Cllr">Cllr</option>
<option value="Dr">Dr</option>
<option value="Lord">Lord</option>
</select>
</label>
<small class="error">Select</small>
</div>
</div>
<div class="large-5 columns">
<div class="input-wrapper">
<label>First Name
<input type="text" name="first_name" required>
</label>
<small class="error">Please input your first name</small>
</div>
</div>
<div class="large-5 columns">
<div class="input-wrapper">
<label>Last Name
<input type="text" name="last_name" required>
</label>
<small class="error">Please input your last name</small>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Known As
<input type="text" name="known_as">
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Address Line 1
<input type="text" name="address_1" required>
</label>
<small class="error">Please input the first line of your address</small>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Address Line 2
<input type="text" name="address_2">
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Address Line 3
<input type="text" name="address_3">
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Town
<input type="text" name="address_4" required>
</label>
<small class="error">Please input your Town</small>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>City
<input type="text" name="address_5" required>
</label>
<small class="error">Please input your City</small>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Post Code
<input type="text" name="post_code" required>
</label>
<small class="error">Please input your Post Code</small>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Home Phone
<input type="tel" id="home_tel" name="home_tel" pattern="(\s*\(?0\d{4}\)?(\s*|-)\d{3}(\s*|-)\d{3}\s*)|(\s*\(?0\d{3}\)?(\s*|-)\d{3}(\s*|-)\d{4}\s*)|(\s*(7|8)(\d{7}|\d{3}(\-|\s{1})\d{4})\s*)" required>
</label>
<small class="error">Please input a valid home telephone number</small>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Mobile
<input type="tel" id="mobile" name="mobile" pattern="^07([\d]{3})[(\D\s)]?[\d]{3}[(\D\s)]?[\d]{3}$" required>
</label>
<small class="error">Please input a valid mobile telephone number</small>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="email-field">
<label>Email Address
<input type="email" id="email" name="email" onchange="grab_email()" required>
</label>
<small class="error">Please input a valid email address</small>
</div>
</div>
<div class="large-6 columns">
<div class="email-confirmation-field">
<label>Confirm Email Address
<input type="email" name="confirm_email" data-equalto="email">
</label>
<small class="error">The email address does not match</small>
</div>
</div>
</div>
<div class="row">
<label style="padding-left: 14px; padding-bottom: 5px;">Date of Birth</label>
<div class="large-2 columns">
<div class="input-wrapper">
<label>
<select name="day_dob" required>
<option selected disabled value=''>Day</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">29</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</label>
<small class="error">Please select a day</small>
</div>
</div>
<div class="large-2 columns">
<div class="input-wrapper">
<label>
<select name="month_dob" required>
<option selected disabled value=''>Month</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</label>
<small class="error">Please select a month</small>
</div>
</div>
<div class="large-2 columns left">
<div class="input-wrapper">
<label>
<select name="year_dob" required>
<option selected disabled value=''>Year</option>
<?php
for($i = date("Y") - 100; $i < date("Y")+1; $i++){
echo '<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>
</label>
<small class="error">Please select a year</small>
</div>
</div>
</div>
<div class="input-wrapper">
<input id="volunteer" type="checkbox" name="volunteer"><label for="volunteer">We are always looking for members to help out at the club - would you be interested in volunteering?</label>
</div>
</fieldset>
<fieldset>
<legend>Employment/Education Details</legend>
<div class="input-wrapper">
<label>Are you?<br>
<input type="radio" onclick="javascript:employmentCheck();" name="employment_status" value="employed" id="employed" required><label for="employed">Employed</label>
<input type="radio" onclick="javascript:employmentCheck();" name="employment_status" value="self_employed" id="self_employed" required><label for="self_employed">Self Employed</label>
<input type="radio" onclick="javascript:employmentCheck();" name="employment_status" value="student" id="student" required><label for="student">Student</label>
<input type="radio" onclick="javascript:employmentCheck();" name="employment_status" value="other" id="other" required><label for="other">Other</label>
</label>
<small class="error">Please select one of the above</small>
</div>
<div id="college_nus" style="display:none">
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>College or NUS Number
<input type="text" name="college_nus">
</label>
</div>
</div>
</div>
</div>
<div id="employment_details" style="display:none">
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Address
<textarea name="employment_address" rows="4"></textarea>
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>
Occupation
<select name="occupation">
<option selected disabled value=''>Select</option>
<option value="Managerial/Professional">Managerial/Professional</option>
<option value="Technical"> Technical </option>
<option value="Clerical"> Clerical </option>
<option value="Sales"> Sales </option>
<option value="General"> General </option>
</select>
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Email
<input type="email" name="employement_email">
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Phone
<input type="tel" name="employement_phone">
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Payment Information</legend>
<div data-alert class="alert-box secondary">
<strong><h4><?php echo ucwords($mem_title); ?></h4></strong><br>
<strong><h5>Total: £<?php echo $amount; ?></h5></strong>
</div>
</fieldset>
<fieldset>
<legend>Terms and Conditions</legend>
<label>I confirm that I have read and accept the 2016/17 <a style="text-decoration: underline;" href="javascript:void(0)" target="_blank">Terms and Conditions</a> and agree to Henley Rugby Club storing your personal details.<br></label>
<input id="terms" name="terms" value="1" type="checkbox" required>
<label for="terms"></label>
<small class="error">Please accept our terms and conditions</small>
<label><strong>NB</strong> All memberships run from 1st June 2015 to 31st May 2016</label>
</fieldset>
<br>
<input type="button" id="charge-button" class="button radius member_button" value="Continue">
</form>
And the javascript that calls the Stripe checkout is here:
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
key: '<?php echo $stripe['publishable_key']; ?>',
image: '/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
$.post("", {token: token, type: 'charge'}, function(res){
if(res.status){
$('form').submit();
}
},"json");
console.log(token);
}
});
</script>
<script>
$('#charge-button').on('click', function(e) {
var userEmail = $('#email').val();
handler.open({
image: '/logo.png',
name: 'Shop.com',
description: 'Product',
email: userEmail,
currency: 'gbp',
amount: 20000
});
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
</script>

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.

Categories

Resources