I want to change which form to show using dropdown and jquery but doesn't seem to work. I did try a simple code using just a couple of divs and a paragraph and it worked or so I thought, because it's no longer work when I put my forms into it.
By the way, here's my code:
//this is the form
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
Here is the jquery:
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'{
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
I also tried any different ways but I can't yet find out what I'm missing.
Would you be so kind to help me?
Your else if condition is not close with ) and add jquery, check it
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'){
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<h2>qnap</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<h2>asustor</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
Related
I am collecting an ABN (Australian Business Number) on a registration form. I have written some javascript that does validation based on the ABN validation rule here:
function validateABN (abnNumber) {
var weights = [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
var result = false;
if (abnNumber.length === 11) {
var sum = 0;
var weight;
for (var index = 0; index <= weights.length - 1; index++) {
weight = weights[index];
digit = abnNumber[index] - (index ? 0 : 1);
sum += weight * digit;
}
result = sum % 89 === 0;
}
return result;
}
console.log(validateABN('43154365778'));
The form field name is: CompanyABNACN
It is a bootstrap form. I'm a little familiar with bootstrap but not to the point where I can add custom form field validation on a form element. I want an error message to be displayed "Invalid ABN format" if the javascript validation fails.
I have searched google and within the stack overflow forums and have not been able to find an example similar to mine or I have found really complicated examples I'm not able to understand.
Would someone please explain to me how to incorporate this custom function into validation on my registration form please.
<div class="account-hold my-account register">
<div class="container">
<div class="row mt-30">
<div class="col-sm-12">
<h1 class="my-account-label">Create Account</h1><hr class="ghr">
</div>
<div class="col-sm-6 pull-right">
<img src="assets/images/content-images/register/image.jpg" class="img-responsive" alt="" />
</div>
<div class="col-sm-6">
<p class="my-account-label-p mb-30">Already have an account? Click here to sign in or complete the form below to create a new account</p>
<form name="registrationform" id="registration-form" action="/registration/" method="post" class="form-horizontal validate-form" role="form">
<input type="hidden" name="page" value="register" />
<input type="hidden" name="redirect" value="/content/thank-you-registration/" />
<input type="hidden" id="validated" value="f" />
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">First Name:</label>
<div class="col-lg-8 col-md-8">
<input name="firstname" type="text" id="firstname" placeholder="" class="form-control required" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Last Name :</label>
<div class="col-lg-8 col-md-8">
<input name="lastname" type="text" id="lastname" placeholder="" class="form-control required" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Email Address :</label>
<div class="col-lg-8 col-md-8">
<input name="email" type="email" id="registration-email" placeholder="" class="form-control required email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">ABN :</label>
<div class="col-lg-8 col-md-8">
<input name="CompanyABNACN" type="text" id="CompanyABNACN" placeholder="" class="form-control required is-invalid" />
<div class="form-control hidden invalid-feedback">Please provide a valid ABN.</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Company :</label>
<div class="col-lg-8 col-md-8">
<input name="CompanyName" type="text" id="CompanyName" placeholder="" class="form-control required company" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Phone Number :</label>
<div class="col-lg-8 col-md-8">
<input name="PhoneNumber" type="text" id="PhoneNumber" placeholder="" class="form-control phone-number" />
</div>
</div>
<input name="birthday" type="hidden" id="birthday" class="form-control" placeholder="" />
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Capricorn Member Number:</label>
<div class="col-lg-8 col-md-8">
<input name="capicorn_number" type="text" id="capicorn_number" class="form-control" placeholder="" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Street Address :</label>
<div class="col-lg-8 col-md-8">
<input name="streetaddress" type="text" id="street-address" placeholder="" class="form-control street-address required auto-streetaddress" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Suburb / City :</label>
<div class="col-lg-8 col-md-8">
<input name="suburb" type="text" id="suburb" placeholder="" class="form-control city required auto-suburb" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">State :</label>
<div class="col-lg-8 col-md-8">
<select name="state" class="form-control required auto-state" id="state">
<option value="">Please Select</option>
<option value="ACT">Australian Capital Territory</option>
<option value="NSW">New South Wales</option>
<option value="NT ">Northern Territory</option>
<option value="QLD">Queensland</option>
<option value="SA ">South Australia</option>
<option value="TAS">Tasmania</option>
<option value="VIC">Victoria</option>
<option value="WA ">Western Australia</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Country : </label>
<div class="col-lg-8 col-md-8">
<select name="country" id="Country" class="form-control clone required auto-country" data-native-menu="false" data-rel="country-field">
<option value="">Please Select</option>
<option value="Australia" >Australia</option>
<option value="New Zealand" >New Zealand</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Post Code : </label>
<div class="col-lg-8 col-md-8">
<input name="postcode" type="text" id="postcode" class="form-control required auto-postcode" placeholder="" />
</div>
</div>
<!---
<input type="hidden" name="password">
<input type="hidden" name="password2">
--->
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Account Password :</label>
<div class="col-lg-8 col-md-8">
<input type="password" name="password" id="password" class="form-control required" placeholder="" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Confirm Password :</label>
<div class="col-lg-8 col-md-8">
<input type="password" class="form-control required" id="password2" name="password2" data-rel="password" placeholder="" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label">Newsletter: </label>
<div class="col-lg-8 col-md-8">
<input type="checkbox" name="newsletter1" id="newsletter1" value="1" checked="true">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-4 col-lg-3 col-md-offset-4 col-md-3 text-left">
<input name="submitbutton" id="submit-button" type="submit" value="Register" class="btn partwise-btn btn-block text-uppercase" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
You didn't specify when the validation should occur, e.g. as the user is entering the ABN number or when they submit the form. Assuming the former, you can do the following:
Add an 'input' event listener to the ABN input field so that it validates every time the user enters something in that field:
<input name="CompanyABNACN" type="text" id="CompanyABNACN" placeholder="" class="form-control required is-invalid" oninput="do_validate();" />
(You can also use jQuery to add an event listener rather than doing it inline as in my example above.)
Your validation function should look something like this:
function do_validate() {
if ( validateABN( $('input#CompanyABNACN').val() ) ) {
$( '.invalid-feedback' ).hide();
$('input#CompanyABNACN').removeClass( 'is-invalid' )
} else {
$( '.invalid-feedback' ).show();
$('input#CompanyABNACN').addClass( 'is-invalid' )
}
}
You need to add "is-invalid" class to the input to invalidate for ABN via javascript.
<div class="col-md-3 mb-3">
<label for="ABNnumber">Zip</label>
<input type="text" class="form-control" id="ABNnumber" name="ABNnumber" required>
<div class="invalid-feedback">
Please provide a valid ABN.
</div>
</div>
Your javascript should be sth like this
$("form#abnFormSubmit").on("submit", function(e){
e.preventdefault;
var isAbnValid = validateABN($("#ABNnumber").val());
if(!isAbnValid){
$("#ABNnumber").addClass("is-invalid");
}
else{
$("#ABNnumber").removeClass("is-invalid");
}
})
I am having trouble executing a function on form submit. When I test by calling a simple alert() function using the onclick event it works fine onclick="alert('hi')" but when I change the event to onsubmit="alert('hi')" it does not call the function? Can anyone tell me why? How do I fix it?
<form role="form" id="theForm" name="myForm" method="POST" action="processApplication.cfm">
<fieldset id="personal">
<legend>Personal</legend>
<div class="form-group row">
<div class="col-sm-1"><span></span></div>
<div class="col-sm-3 col-md-2 text-nowrap">
<label for="cfnm" class="control-label form-adjust">First Name*</label>
</div>
<div class="col-sm-8 col-md-4 form-adjust">
<input type="text" class="form-control" id="cfnm" name="firstName" placeholder="First Name" value="" maxlength="30"><i class="form-control-feedback glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="form-group row">
<div class="col-sm-1"><span></span></div>
<div class="col-sm-3 col-md-2 text-nowrap">
<label for="cmnm" class="control-label form-adjust">Middle Name</label>
</div>
<div class="col-sm-8 col-md-4 form-adjust">
<input type="text" class="form-control" id="cmnm" name="middleName" placeholder="Middle Name" value="" maxlength="30">
</div>
</div>
<div class="form-group row">
<div class="col-sm-1"><span></span></div>
<div class="col-sm-3 col-md-2 text-nowrap">
<label for="clnm" class="control-label form-adjust">Last Name*</label>
</div>
<div class="col-sm-8 col-md-4 form-adjust">
<input type="text" class="form-control" id="clnm" name="lastName" placeholder="Last Name" value="" maxlength="40"><i class="form-control-feedback glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="form-group row">
<div class="col-sm-1"><span></span></div>
<div class="col-sm-3 col-md-2 text-nowrap">
<label for="ceml" class="control-label form-adjust">Email*</label>
</div>
<div class="col-sm-8 col-md-4 form-adjust">
<input type="text" class="form-control" id="ceml" name="email" placeholder="Email" value="" maxlength="128"><i class="form-control-feedback glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="form-group row">
<div class="col-sm-1"><span></span></div>
<div class="col-sm-3 col-md-2 text-nowrap">
<label for="czip" class="control-label form-adjust">Personal URL</label>
</div>
<div class="col-sm-8 col-md-4 form-adjust">
<input type="text" class="form-control" id="curl" name="url" placeholder="Personal URL" value="" maxlength="10">
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group row">
<div class="col-sm-4 col-md-3">
<input id="sbtn" name="submit_button" type="submit" value="Submit" class="btn btn-primary form-adjust" onsubmit="alert('hi');">
</div>
</div>
</fieldset>
</form>
Onsubmit is a attribute for the form so try change it to
<form role="form" id="theForm" name="myForm" method="POST" action="processApplication.cfm" onsubmit="alert('hi');">
<fieldset id="personal">
<legend>Personal</legend>
<div class="form-group row">
<div class="col-sm-1"><span></span></div>
<div class="col-sm-3 col-md-2 text-nowrap">
<label for="cfnm" class="control-label form-adjust">First Name*</label>
</div>
<div class="col-sm-8 col-md-4 form-adjust">
<input type="text" class="form-control" id="cfnm" name="firstName" placeholder="First Name" value="" maxlength="30"><i class="form-control-feedback glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="form-group row">
<div class="col-sm-1"><span></span></div>
<div class="col-sm-3 col-md-2 text-nowrap">
<label for="cmnm" class="control-label form-adjust">Middle Name</label>
</div>
<div class="col-sm-8 col-md-4 form-adjust">
<input type="text" class="form-control" id="cmnm" name="middleName" placeholder="Middle Name" value="" maxlength="30">
</div>
</div>
<div class="form-group row">
<div class="col-sm-1"><span></span></div>
<div class="col-sm-3 col-md-2 text-nowrap">
<label for="clnm" class="control-label form-adjust">Last Name*</label>
</div>
<div class="col-sm-8 col-md-4 form-adjust">
<input type="text" class="form-control" id="clnm" name="lastName" placeholder="Last Name" value="" maxlength="40"><i class="form-control-feedback glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="form-group row">
<div class="col-sm-1"><span></span></div>
<div class="col-sm-3 col-md-2 text-nowrap">
<label for="ceml" class="control-label form-adjust">Email*</label>
</div>
<div class="col-sm-8 col-md-4 form-adjust">
<input type="text" class="form-control" id="ceml" name="email" placeholder="Email" value="" maxlength="128"><i class="form-control-feedback glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="form-group row">
<div class="col-sm-1"><span></span></div>
<div class="col-sm-3 col-md-2 text-nowrap">
<label for="czip" class="control-label form-adjust">Personal URL</label>
</div>
<div class="col-sm-8 col-md-4 form-adjust">
<input type="text" class="form-control" id="curl" name="url" placeholder="Personal URL" value="" maxlength="10">
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group row">
<div class="col-sm-4 col-md-3">
<input id="sbtn" name="submit_button" type="submit" value="Submit" class="btn btn-primary form-adjust">
</div>
</div>
</fieldset>
</form>
I had a html form with set of input fields for each of which I am giving required="true" for validation. But when I click on submit after entering the mandatory fields it is give an error:
An invalid form control with name='' is not focusable
I know if we use novalidate to the form I wont get that error, but my validation wont work. How can I make my validation work without error?
<form name="customerForm" class="form-horizontal" id="custForm">
<fieldset>
<div class="form-group">
<label for="customerName" class="col-lg-4 col-lg-offset-1 control-label">Name</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerName" placeholder="Enter customer name" type="text" required="true" value = "{{customerName}}">
</div>
</div>
<div class="form-group">
<label for="postCode" class="col-lg-4 col-lg-offset-1 control-label">Post code</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.postcode" placeholder="Enter post code" type="text" value = "{{postCode}}">
</div>
<div class="col-lg-2">
<button type="next" class="btn btn-primary" ng-click="$ctrl.findAddress()">Find address</button>
</div>
</div>
<div class="form-group">
<label for="selectAddress" class="col-lg-4 col-lg-offset-1 control-label">Select address</label>
<div class="col-lg-4">
<select class="form-control" id="selectAddress" ng-model="$ctrl.quote.newClient.customerAddress" ng-change="$ctrl.populateAddressFields()">
<option ng-repeat="address in addresses"
value="{{address}}" >{{address}}</option>
</select>
</div>
</div>
<div class="form-group ng-hide">
<label for="textArea" class="col-lg-4 col-lg-offset-1 control-label">Address</label>
<div class="col-lg-4">
<textarea ng-model="$ctrl.quote.newClient.customerAddress" class="form-control" rows="3" required="true"></textarea>
</div>
</div>
<div class="form-group">
<label for="address1" class="col-lg-4 col-lg-offset-1 control-label">Address 1</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine1" placeholder="Enter Address 1" type="text" required="true" value = "{{addressLine1}}">
</div>
</div>
<div class="form-group">
<label for="address2" class="col-lg-4 col-lg-offset-1 control-label">Address 2</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine2" placeholder="Enter Address 2" type="text" required="true" value = "{{addressLine2}}">
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-4 col-lg-offset-1 control-label">Email address</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required="true" value = "{{emailId}}">
</div>
</div>
<div class="form-group">
<label for="customerMobile" class="col-lg-4 col-lg-offset-1 control-label">Mobile number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerMobile" placeholder="Enter customer mobile number" type="text" required="true">
</div>
</div>
<div class="form-group" ng-show="$root.customerDetails.tradeType.description == 'Limited Company'">
<label for="inputCompanyRegistrationNumber" class="col-lg-4 col-lg-offset-1 control-label">Company registration number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.companyRegNo" placeholder="Enter company registration number" type="text" required="true">
</div>
</div>
</fieldset>
</form>
And Iam using $valid to validate the form
<div class="col-lg-1">
<button form="custForm" type="submit" class="btn btn-primary right-button" ng-click="customerForm.$valid && $ctrl.proceedToPaymentDetails()">Next</button>
</div>
I am new to Jquery and ajax.I want to check if mail id is already exist in database. So I use Ajax to check email is exist or not. I check this condition during submitting a form, so I use onSubmit event.
when I enter submit button the above condition is checked and then inserted into database.but If condition fails that email also inserted into database.
what is the error? I cannot find this error please help me!
my html code is:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="inner">
<h3>Registration</h3>
<form class="form-horizontal" method="post" action = "" onSubmit=" return checkmail();">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Firstname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Firstname" name="fname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Lastname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Lastname"name="lname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" >
<span id="check"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pass" placeholder="Password" name="pass" >
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">re-Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="repass" placeholder="re-Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Mobile no</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mob" placeholder="Mobile no" name="phone">
</div>
<h6 id="aaa"></h6>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address1</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address1" name="addr1"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address2</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address2(optional)"name="addr2"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >Country</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Country" name="country">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="State" name="state">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="City" name="city">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Zipcode</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="zip" placeholder="EX:456322" name="zip" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" name="submit" value="Register">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
my Jquery function is
function checkmail(){
var mail= $('#email').val();
if(mail ==""){
$("#email").focus();
alert("Enter mail id");
return false;
}
else
{
$.ajax({
type:'post',
url :'check.php',
data: {emailid:mail},
success: function(responseText){
$("#check").html(responseText);
if(responseText != 1) { // if the response is 1
$("#check").html("Available!");
return true;
}
else {
// else blank response
$("#email").focus();
$("#check").html("Email are already exist.");
return false;
}
}
});
}
}
</script>
check.php
<?php
$con = new mysqli('localhost','root','','registration'); //set coonection to db
$mail = $_POST['emailid'];
$query = mysqli_query($con, "select email from user where email='".$mail."' ");
if(mysqli_num_rows($query) > 0)
{
echo '1'; // if mail exist
}
?>
thank you in advance.
You should do something like this:
<form class="form-horizontal" method="post" action = "" onSubmit="checkmail()">
And put the script right after body tag starts.
I will recommend you to do this from jquery
$("#form-id").on('submit',function(e){
e.preventDefault();
// Validation for data
});
use below code with few modification.
The HTML
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="inner">
<h3>Registration</h3>
<form id="myForm" class="form-horizontal" method="post" action="">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Firstname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Firstname" name="fname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Lastname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Lastname"name="lname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" >
<span id="check"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pass" placeholder="Password" name="pass" >
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">re-Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="repass" placeholder="re-Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Mobile no</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mob" placeholder="Mobile no" name="phone">
</div>
<h6 id="aaa"></h6>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address1</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address1" name="addr1"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address2</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address2(optional)"name="addr2"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >Country</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Country" name="country">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="State" name="state">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="City" name="city">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Zipcode</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="zip" placeholder="EX:456322" name="zip" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" onClick="checkmail();" class="btn btn-default" name="submit" value="Register">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
JQuery Code
function checkmail(){
var mail= $('#email').val();
if(mail ==""){
$("#email").focus();
alert("Enter mail id");
return false;
}
else
{
$.ajax({
type:'post',
url :'check.php',
data: {emailid:mail},
success: function(responseText){
$("#check").html(responseText);
if(responseText != 1) { // if the response is 1
$("#check").html("Available!");
$("#myForm").submit();
}
else {
// else blank response
$("#email").focus();
$("#check").html("Email are already exist.");
return false;
}
}
});
}
}
Change the id of form accordingly, which kept as myForm
I am trying to create a form where users can click a plus button to add another row of fields and a remove button. This is what I have so far:
$(".add").click(function() {
$(".frm > div:first-child").clone(true).insertBefore(".frm > div:last-child");
return false;
});
$(".remove").click(function() {
$(this).parent().remove();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form class="frm">
<div>
<div class="form-group col-md-1">
<br/>
<h4 style="text-align:right">1.</h4>
</div>
<div class="form-group col-md-1">
<label for="title" class="control-label">Title</label>
<input type="text" value='' class="form-control" id="title" placeholder="Title"/>
</div>
<div class="form-group col-md-1">
<label for="fname" class="control-label">First Name</label>
<input type="text" value='' class="form-control" id="fname" placeholder="First Name"/>
</div>
<div class="form-group col-md-2">
<label for="sname" class="control-label">Surname</label>
<input type="text" value='' class="form-control" id="sname" placeholder="Surname"/>
</div>
<div class="form-group col-md-2">
<label for="job" class="control-label">Job</label>
<input type="text" value='' class="form-control" id="job" placeholder="Job"/>
</div>
<div class="form-group col-md-2">
<label for="class" class="control-label">Class</label>
<input type="text" value='' class="form-control" id="class" placeholder="Class"/>
</div>
<div class="form-group col-md-2 col-md-inset-1">
<label for="emailadd" class="control-label">Email Address</label>
<input type="email" value='' class="form-control" id="emailadd" placeholder="Email Address"/>
</div>
<span class="remove">Remove</span>
</div>
<div>
<span class="add">Add fields</span>
</div>
</form>
With the code above I can add the rows but for some reason I cannot remove them. Also when I do add them the layout gets ruined, instead of the rows appearing underneath each other they append to the end and then break off to another line. what could be causing the remove to not work?
COUNTER JS
$(document).on('click', '.add', function() {
$('.counter').html(function(i, val) { return val*1+1 });
});
$(document).on('click', '.remove', function() {
$('.counter').html(function(i, val) { return val*1-1 });
});
If you want to add fields even when there are no fields, then one option is a hidden field with the full code.
jsfiddle fullscreen demo (code)
$(document).ready(function() {
$(".add").click(function() {
$(".cloneDefault").clone(true).insertBefore(".frm > div:last-child");
$(".frm > .cloneDefault").removeClass("cloneDefault");
return false;
.cloneDefault{
display: none;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div class="row cloneDefault">
<div class="form-group col-md-1">
<br/>
<h4 style="text-align:right">1.</h4>
</div>
<div class="form-group col-md-1">
<label for="title" class="control-label">Title</label>
<input type="text" value='' class="form-control" id="title" placeholder="Title"/>
</div>
<div class="form-group col-md-1">
<label for="fname" class="control-label">First Name</label>
<input type="text" value='' class="form-control" id="fname" placeholder="First Name"/>
</div>
<div class="form-group col-md-2">
<label for="sname" class="control-label">Surname</label>
<input type="text" value='' class="form-control" id="sname" placeholder="Surname"/>
</div>
<div class="form-group col-md-2">
<label for="job" class="control-label">Job</label>
<input type="text" value='' class="form-control" id="job" placeholder="Job"/>
</div>
<div class="form-group col-md-2">
<label for="class" class="control-label">Class</label>
<input type="text" value='' class="form-control" id="class" placeholder="Class"/>
</div>
<div class="form-group col-md-2 col-md-inset-1">
<label for="emailadd" class="control-label">Email Address</label>
<input type="email" value='' class="form-control" id="emailadd" placeholder="Email Address"/>
</div>
<span class="remove">Remove</span>
</div>
<form class="frm">
<div class="row">
<div class="form-group col-md-1">
<br/>
<h4 style="text-align:right">1.</h4>
</div>
<div class="form-group col-md-1">
<label for="title" class="control-label">Title</label>
<input type="text" value='' class="form-control" id="title" placeholder="Title"/>
</div>
<div class="form-group col-md-1">
<label for="fname" class="control-label">First Name</label>
<input type="text" value='' class="form-control" id="fname" placeholder="First Name"/>
</div>
<div class="form-group col-md-2">
<label for="sname" class="control-label">Surname</label>
<input type="text" value='' class="form-control" id="sname" placeholder="Surname"/>
</div>
<div class="form-group col-md-2">
<label for="job" class="control-label">Job</label>
<input type="text" value='' class="form-control" id="job" placeholder="Job"/>
</div>
<div class="form-group col-md-2">
<label for="class" class="control-label">Class</label>
<input type="text" value='' class="form-control" id="class" placeholder="Class"/>
</div>
<div class="form-group col-md-2 col-md-inset-1">
<label for="emailadd" class="control-label">Email Address</label>
<input type="email" value='' class="form-control" id="emailadd" placeholder="Email Address"/>
</div>
<span class="remove">Remove</span>
</div>
<div>
<span class="add">Add fields</span>
</div>
</form>