I created a form for product sale. admin can add fields for multiple product's click on add button using jquery and can remove by clicking on remove button. I'm trying to append this using div id but this doesn't work.
here is my html part.
<div class="row" id="dsf">
<div class="col-md-2">
<select name="p_name" class="form-control" id="p_name">
<option value="">-Select Product-</option>
#foreach($products as $product)
<option value="{{$product->product_id}}">{{$product->name}}</option>
#endforeach
</select>
</div>
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
Here is my jquery part.
$(document).ready(function(){
$("#addrow").click(function(){
$("#dsf").append();
});
});
if you want to append data after div then use this code
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$('#addrow').append(content);
});
});
this is demo code for test
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$('#addrow').append(content);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="dsf">
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
<div id="addrow">Click</div>
or you can append after addrow
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$( content ).insertBefore( "#addrow" );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="dsf">
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
<div id="addrow">Click</div>
Related
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>
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>
I wanted to disable the div when i click the the checkbox. if the current address and permanent address are the same, the user just click the check box to disabled the field of the permanent address. Thanks!
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>
Add the following JS to your code.
$(document).ready(function(){
$('input[type="checkbox"]').change(function(){
$('.permanentAdd').attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group ">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control permanentAdd" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>
You can try something like this
<input type="checkbox" id="check_box" onchange="set_status();">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <div id="txt_field" name="txt_field"> </div>
<script type="text/javascript">
function set_status() {
var appendData = '';
var checkbox = document.getElementById("check_box");
if (checkbox.checked == true) {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" readonly="readonly" data-validate="required" placeholder="Zip Code" />';
}
else {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" data-validate="required" placeholder="Zip Code" />';
}
window.jQuery('#txt_field').html(appendData);
}
</script>
</div>
</div>
</div>
</div>
Here is the example how you do this thing easy. make sure you have only one checkbox in this window. else this not working, then you need to change something.
jQuery
$( "input[type=checkbox]" ).on( "click", function(){
var n = $("input[type=checkbox]:checked").length;
if(n){
$(".permanent-address").attr("disabled", 'disabled');
}else{
$(".permanent-address").removeAttr("disabled");
}
});
HTML
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
<input class="form-control permanent-address" rv-value="address:address" name="model.cid" data-validate="required" />
Pure javascript anwser
function checkAddress(checkbox) {
var inputs = document.querySelectorAll('input:not([type=checkbox])');
var selects = document.querySelectorAll('select');
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = checkbox.checked;
}
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = checkbox.checked;
}
}
HTML code
<input type="checkbox" onclick="checkAddress(this)">
https://jsfiddle.net/0ba4f7jd/
Simply create a function that gets called when the checkbox is checked, which disables the div and all child elements:
$('#checkbox').change(function(){
var div = $('#everything');
if (div.attr('class')!="disabled") {
div.addClass("disabled");
$("#everything *").attr("disabled", true);
}
else {
div.removeClass("disabled");
$('#everything *').attr('disabled',false);
}
});
DEMO
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>
I have only one form in my html.
<form role="form" class="form-horizontal" id="WebToLeadForm" action="http://Sujay-Y510p:80/suitecrm/index.php?entryPoint=WebToLeadCapture" method="POST" name="WebToLeadForm">
<div class="form-body">
<div class="form-group form-control-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Salutation</label>
<div class="col-md-10">
<select class="form-control" id="salutation" name="salutation">
<option value="" disabled selected>Select your option</option>
<option value="">Ms</option>
<option value="">Mr</option>
<option value="">Mrs</option>
<option value="">Doctor</option>
<option value="">Prof</option>
</select>
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="name">First Name</label>
<div class="col-md-10">
<input class="form-control" id="first_name" placeholder="Enter your name" type="text" name="first_name">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Last Name</label>
<div class="col-md-10">
<input class="form-control" id="last_name" name="last_name" placeholder="Enter your name" type="text">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Mobile</label>
<div class="col-md-10">
<input class="form-control" id="phone_mobile" name="phone_mobile" placeholder="Enter your name" type="text">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Email Address</label>
<div class="col-md-10">
<input class="form-control" id="email1" name="email1" placeholder="Enter your email" type="email" onchange="validateEmailAdd();">
<div class="form-control-focus">
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-2 col-md-10">
<button type="button" class="btn default">Cancel</button>
<button type="button" class="btn blue" id="submitButton">Submit</button>
</div>
</div>
<div class="row">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<tr>
<td style="display: none;">
<input id="campaign_id" type="hidden" name="campaign_id" value="34101a86-12b1-bec3-2c18-560ed4c48ddb" />
</td>
</tr>
<tr>
<td style="display: none;">
<input id="assigned_user_id" type="hidden" name="assigned_user_id" value="1" />
</td>
</tr>
<tr>
<td style="display: none;">
<input id="req_id" type="hidden" name="req_id" value="last_name;" />
</td>
</tr>
</form>
In my script when I write the below mentioned code it submits properly. It takes me to the response page.
$('form').submit();
but when I write the below code it doesn't even enter the function. No submit takes place. It doesn't even display the alert.
$('form').submit(function (e) {
e.preventDefault();
alert('inside');
});
What could be the issue?
I guess I got your issue. You don't have a submitButton to process the submission of the form.
<button type="button" class="btn blue" id="submitButton">Submit</button>
Change the above code to:
<input type="submit" class="btn blue" id="submitButton" />
Working Snippet
$('form').submit(function (e) {
e.preventDefault();
alert('inside');
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form role="form" class="form-horizontal" id="WebToLeadForm" action="http://Sujay-Y510p:80/suitecrm/index.php?entryPoint=WebToLeadCapture" method="POST" name="WebToLeadForm">
<div class="form-body">
<div class="form-group form-control-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Salutation</label>
<div class="col-md-10">
<select class="form-control" id="salutation" name="salutation">
<option value="" disabled selected>Select your option</option>
<option value="">Ms</option>
<option value="">Mr</option>
<option value="">Mrs</option>
<option value="">Doctor</option>
<option value="">Prof</option>
</select>
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="name">First Name</label>
<div class="col-md-10">
<input class="form-control" id="first_name" placeholder="Enter your name" type="text" name="first_name">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Last Name</label>
<div class="col-md-10">
<input class="form-control" id="last_name" name="last_name" placeholder="Enter your name" type="text">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Mobile</label>
<div class="col-md-10">
<input class="form-control" id="phone_mobile" name="phone_mobile" placeholder="Enter your name" type="text">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Email Address</label>
<div class="col-md-10">
<input class="form-control" id="email1" name="email1" placeholder="Enter your email" type="email" onchange="validateEmailAdd();">
<div class="form-control-focus">
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-2 col-md-10">
<button type="button" class="btn default">Cancel</button>
<input type="submit" class="btn blue" id="submitButton" />
</div>
</div>
<div class="row">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<tr>
<td style="display: none;">
<input id="campaign_id" type="hidden" name="campaign_id" value="34101a86-12b1-bec3-2c18-560ed4c48ddb" />
</td>
</tr>
<tr>
<td style="display: none;">
<input id="assigned_user_id" type="hidden" name="assigned_user_id" value="1" />
</td>
</tr>
<tr>
<td style="display: none;">
<input id="req_id" type="hidden" name="req_id" value="last_name;" />
</td>
</tr>
</form>
You are over-riding the function handler with your custom function, that prevents the default action of submitting the form.
e.preventDefault();
This prevents the form from submitting. Here the e is the generated event, which is the form submission and the function preventDefault() prevents it from happening.
Generally this is used for AJAX based form submissions, where you submit the form, but actually, JavaScript sends the data to the server through AJAX. Hope this is clear enough. :)
An example of AJAX based form submission would be:
$('form').submit(function (e) {
e.preventDefault();
$.post("url.php", $(this).serialize(), function (data) {
if (data = "okay")
alert("Form is submitted!");
});
});
For your issue, try giving this instead of calling the submit:
$("form").trigger("submit");
when you call:
$('form').submit();
in simple words, it tells jquery "please submit the form"
when you call this however:
$('form').submit(function (e) {
e.preventDefault();
alert('inside');
});
it tells jquery: "in case the form is submitted, run this function"
meaning:
the first script calls the submission, while the 2nd script attaches a handler to the submission event but does not call the submission
if in addition to attaching the handler, you want to submit the form then you need to call the submit without arguments in it after:
$('form').submit(function (e) {
e.preventDefault();
alert('inside');
});
$('form').submit();
the same works similarly with other jquery functions, click, load, etc.
without arguments its an invokation, while with a function it is simply a handler attaching without invokation.