How to Enable Disabled different Input in Select Event using jQuery - javascript

I want to do that when some one select the option one then 1st input is enabled using jQuery
here is the sample code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-material">
<label for="storeCategory">Store Details</label>
<select class="form-control" id="storeABDetails">
<option value="message">Message</option>
<option value="image">Image</option>
<option value="video">Video</option>
</select>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="text" class="form-control" id="shortMessage" name="shortMessage" placeholder="Please enter the short message" >
<label for="shortMessage">Short Message</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="image" name="storeImage">
<label for="storeImage">Store Image</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="video" name="storeVideo">
<label for="storeVideo">Store Video</label>
</div>
</div>
</div>
If message is selection the message input is enabled and when image and video is selection then image and video selection enabled and disabled.
I want the jquery how to do that please help me out


You need to use change() event to detect when the select was changed.
I was changed the value of Message to shortMessage so it will easier to get the value and find the right input.
Use .prop function to enable\disable the inputs.
var ddl = $('#storeABDetails').change(function() {
var val = ddl.val();
$('.form-material input').prop('disabled', true);
$('#' + val).prop('disabled', false);
});
ddl.trigger('change')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-material">
<label for="storeCategory">Store Details</label>
<select class="form-control" id="storeABDetails">
<option value="shortMessage">Message</option>
<option value="image">Image</option>
<option value="video">Video</option>
</select>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="text" class="form-control" id="shortMessage" name="shortMessage" placeholder="Please enter the short message" >
<label for="shortMessage">Short Message</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="image" name="storeImage">
<label for="storeImage">Store Image</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="video" name="storeVideo">
<label for="storeVideo">Store Video</label>
</div>
</div>
</div>

Related

remove required tags on hidden tabs with Javascript

I would remove required tag from fields are in hidden tabs when I click on tab using Javascript. The fields with required tag, since they are not used, block the submit form, preventing insertion into the database. This is my code:
<ul class="nav nav-tabs nav-justified">
<li class="active">Cliente</li>
<li>Azienda</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="cliente">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="nome">Nome*</label>
<input class="form-control" name="nome" id="nome" required="true" autocomplete="off" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="sesso">Sesso*</label>
<select class="form-control chosen chzn-done" name="sesso" id="sesso" required="true" style="display: none;">
<option value="" selected="\"selected\""></option>
<option value="M">M</option>
<option value="F">F</option>
</select>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="azienda">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ragione_sociale">Ragione sociale*</label>
<input class="form-control " name="ragione_sociale" id="ragione_sociale" required="true" autocomplete="off" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="desc_attivita">Descrizione attività dell'azienda*</label>
<textarea class="form-control " name="desc_attivita" id="desc_attivita" required="true"></textarea></ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="citta">Città*</label>
<input class="form-control " name="citta" id="citta" required="true" value="" autocomplete="off">
</div>
</div>
</div>

First find all the select elements, then loop through them, if they are rendered as display: none then change the required attribute to false.
document.querySelectorAll('select').forEach((elem) => {
if (window.getComputedStyle(elem).display === 'none') {
elem.required = false;
}
});
If you know the id's or classes of the elements that will be display none, then you can just use those instead of using the loop.

Why tinymce looks ugly if I put it inside <div class="row"></div>?

I have a problem with TinyMCE, it looks like in the picture:
enter image description here
my HTML is:
<form action="#" method="post" id="create-product">
<div class="row">
<div class="col-4">
<label for="#product-name">Product name</label>
</div>
<div class="col-8">
<input type="text" name="product-name" class="form-control" id="product-name" placeholder="Product name" required>
</div>
<div class="col-4">
<label for="#product-category">Product category</label>
</div>
<div class="col-8">
<select name="product-category" class="selectpicker form-control" id="product-category" required>
<option value="null">--none--</option>
</select>
</div>
<div class="col-4">
<label for="#product-description">Product description</label>
</div>
<div class="col-8">
<textarea name="product-description" id="product-description"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-success create-product-btn w-25 m-auto"><i class="far fa-save"></i>Save</button>
</div>
</div>
</form>
But if I remove tag, it will fix the issue whitout knowing the reason.
I'm Using Tinymce 4.7.13 and bootstrap 4,
Thanks.

It was this style who caused the problem:
.col-4 ,.col-8{
display:flex;
align-item:center
}

bootstrap datepicker not working if it is cloned

By using jquery clone() i am repeating div section of my document. This div also contains bootstrap datepicker. But, cloned div's datepicker won't work. I am using this datepicker https://eonasdan.github.io/bootstrap-datetimepicker/
Note: In code snippet add multiple files in choose file option then only you will see extra datepicker's.
/* Depending on number of documents description box and datepicker will repeat */
$("#docsUpload").change(function() {
$("#multiShow").empty(); // removes child elements
var ele = document.getElementById($(this).attr('id'));
var result = ele.files;
var ff = result[0];
$("#ff").html("<strong> File Name : </strong>"+ ff.name);
for(var x = 0;x< result.length-1;x++){
var fle = result[x+1];
$('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
$('#multiShow').append(" <strong> File Name : </strong>"+fle.name);
$('#multiShow').append("</div><div class='col-sm-3'></div></div>");
$("#selectAll").clone(true).prop({ id:'thisisid_'+x}).appendTo('#multiShow');
}
});
/* depending on selection box type of date changes */
$(document).ready(function(){
$(".static").show(); // always display on page load
$(".period").on('change',function(changeEvent){ //selection box value changed
// var realId = $(".period").closest("div[id]").attr("id"); //get id
var realId = $(changeEvent.target).closest("div[id]").attr("id");
$('#'+realId+' .dateSelector').hide();
//alert('#'+realId+' '+'.dateSelector'); // display id only show 'selectAll'
var operation = '.'+this.value;
$('#'+realId+' '+operation).show();
}); // on period change
}); // document ready state
/* Format of datepicker */
$(document).ready(function(){
$('.datetimepicker1').datetimepicker({
format : "DD/MM/YYYY"
});
$('.datetimepicker2').datetimepicker({
format : "MM/YYYY"
});
$('.datetimepicker3').datetimepicker({
format : 'YYYY'
});
$('.datetimepicker5').datetimepicker({
format : 'YYYY'
});
$('.datetimepicker7').datetimepicker({
format : 'YYYY'
});
$('.datetimepicker9').datetimepicker({
format : "DD/MM/YYYY"
});
$('.datetimepicker10').datetimepicker({
format : "DD/MM/YYYY"
});
});
.dateSelector{
display: none;
}
h1{
color:#2F4F4F;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<div class="container-fluid">
<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>"
method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
<hr/>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<label for="upload">Upload Files : </label>
<input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<span id="ff"></span>
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div id="selectAll">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="upload"> Select Type & Date of document below: </label>
</div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-2">
<div class="form-group">
<select name="period" class="period">
<option value="static" selected="selected">Static</option>
<option value="monthly">Monthly</option>
<option value="quaterly">Quaterly</option>
<option value="semester">Semester</option>
<option value="yearly">Yearly</option>
<option value="other">Other</option>
</select>
</div>
</div>
<!-- begin : datepicker -->
<div class="col-sm-4 dateSelector static">
<div class="input-group date datetimepicker1">
<input type="text" name="staticDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="col-sm-4 dateSelector monthly">
<div class="input-group date datetimepicker2">
<input type="text" name="monthlyDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="dateSelector quaterly">
<div class="col-sm-2">
<select name="periodQuater[]">
<option value="first">January - March</option>
<option value="second">April - June</option>
<option value="third">July - September</option>
<option value="fourth">October - December</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker3">
<input type="text" name="quaterlyDate" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector semester">
<div class="col-sm-2">
<select name="periodSemester[]">
<option value="semfirst">April - September </option>
<option value="semsecond">October - March</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker5">
<input type="text" name="semesterDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector yearly">
<div class="col-sm-2">
<div class="input-group date datetimepicker7">
<input type="text" name="yearDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector other">
<div class="col-sm-2">
<div class="input-group date datetimepicker9">
<input type="text" name="otherDateF[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div> <br/></div>
<div class="col-sm-2">
<div class="input-group date datetimepicker10">
<input type="text" name="otherDateS[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div></div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row for selector-->
</div> <!-- #selectAll -->
<div id="multiShow"> </div>
<!-- end : datepicker -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 form-group">
<br/>
<button type="submit" class="btn btn-primary form-control"> Submit </button>
</div>
<div class="col-sm-3"></div>
</div>
</form>
</div> <!-- .container -->

After cloning date picker to DOM you must have to do following things to bind date-picker to the newly created elements i recommend to apply same class to all datepicker inputs and than do same as follow to bind datepicker.
You can also read this documentation for more information
$('.datepicker').datepicker('update');

$("#docsUpload").change(function() {
debugger;
$("#multiShow").empty(); // removes child elements
var ele = document.getElementById($(this).attr('id'));
var result = ele.files;
var ff = result[0];
$("#ff").html("<strong> File Name : </strong>"+ ff.name);
for(var x = 0;x< result.length-1;x++){
var fle = result[x+1];
$('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
$('#multiShow').append(" <strong> File Name : </strong>"+fle.name);
$('#multiShow').append("</div><div class='col-sm-3'></div></div>");
$("#selectAll").clone().prop({ id:'thisisid_'+x}).appendTo('#multiShow');
}
$('.dpstatic').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpmonthly').datetimepicker({
format : "MM/YYYY"
});
$('.dpquaterly').datetimepicker({
format : 'YYYY'
});
$('.dpsemester').datetimepicker({
format : 'YYYY'
});
$('.dpyearly').datetimepicker({
format : 'YYYY'
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
});
/* depending on selection box type of date changes */
$(document).ready(function(){
$(".static").show(); // always display on page load
$("body").on('change','.period',function(changeEvent){ //selection box value changed
// var realId = $(".period").closest("div[id]").attr("id"); //get id
var realId = $(changeEvent.target).closest("div[id]").attr("id");
$('#'+realId+' .dateSelector').hide();
//alert('#'+realId+' '+'.dateSelector'); // display id only show 'selectAll'
var operation = '.'+this.value;
$('#'+realId+' '+operation).show();
}); // on period change
}); // document ready state
$(document).ready(function(){
$('.dpstatic').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpmonthly').datetimepicker({
format : "MM/YYYY"
});
$('.dpquaterly').datetimepicker({
format : 'YYYY'
});
$('.dpsemester').datetimepicker({
format : 'YYYY'
});
$('.dpyearly').datetimepicker({
format : 'YYYY'
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
});
.dateSelector{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<div class="container-fluid">
<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>"
method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
<hr/>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<label for="upload">Upload Files : </label>
<input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<span id="ff"></span>
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div id="selectAll">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="upload"> Select Type & Date of document below: </label>
</div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-2">
<div class="form-group">
<select name="period" class="period">
<option value="static" selected="selected">Static</option>
<option value="monthly">Monthly</option>
<option value="quaterly">Quaterly</option>
<option value="semester">Semester</option>
<option value="yearly">Yearly</option>
<option value="other">Other</option>
</select>
</div>
</div>
<!-- begin : datepicker -->
<div class="col-sm-4 dateSelector static">
<div class="input-group date datetimepicker dpstatic">
<input type="text" name="staticDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="col-sm-4 dateSelector monthly">
<div class="input-group date datetimepicker dpmonthly">
<input type="text" name="monthlyDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="dateSelector quaterly">
<div class="col-sm-2">
<select name="periodQuater[]">
<option value="first">January - March</option>
<option value="second">April - June</option>
<option value="third">July - September</option>
<option value="fourth">October - December</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpquaterly">
<input type="text" name="quaterlyDate" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector semester">
<div class="col-sm-2">
<select name="periodSemester[]">
<option value="semfirst">April - September </option>
<option value="semsecond">October - March</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpsemester">
<input type="text" name="semesterDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector yearly">
<div class="col-sm-2">
<div class="input-group date datetimepicker dpyearly">
<input type="text" name="yearDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector other">
<div class="col-sm-2">
<div class="input-group date datetimepicker dpother">
<input type="text" name="otherDateF[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div> <br/></div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpother">
<input type="text" name="otherDateS[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div></div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row for selector-->
</div> <!-- #selectAll -->
<div id="multiShow"> </div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 form-group">
<br/>
<button type="submit" class="btn btn-primary form-control"> Submit </button>
</div>
<div class="col-sm-3"></div>
</div>
</form>
</div> <!-- .container -->
Run the snippet to check what changes i have made compare to original code.
Changes I have made:
(1) As point out by Curiousdev
remove true from clone()
in period repeat all the date formats
(2) This is very important,
Add unique class element to each calendar types. Checkout JSFiddle and search for dpstatic , dpmonthly, dpquaterly, dpsemester, dpyearly, dpother. Without adding this elements calendar will not show respective date formats and some time even calendar wont appear.
For fiddle : https://jsfiddle.net/rv285q8x/
Thank you #Curiousdev and #Ataur Rahman Munna for valuable information and help.

you should simply copy and paste my code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">

Bootstrap Grid Form

I'm trying to modify a Form which has field and value into another with two columns, something like this.
Now I have:
HEADER 1
FIELD 1: VALUE
FIELD 2: VALUE
FIELD 3: VALUE
HEADER 2
FIELD 4: VALUE
FIELD 5: VALUE
FIELD 6: VALUE
And I tried to do this:
HEADER 1 HEADER 2
FIELD 1: VALUE FIELD 4: VALUE
FIELD 2: VALUE FIELD 5: VALUE
FIELD 3: VALUE FIELD 6: VALUE
Here is my code:
<div class="row">
<div class="col-lg-6 col-md-6">
<div> <h3> Datos Personales </h3><hr></div>
<div class="form-group">
<label class="control-label col-md-2">DNI</label>
<div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->usi_dni?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Apellido y Nombre</label>
<div class="col-md-8"><input class="form-control input-sm" name="apynom" value='<?=$beca->usi_nombre?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Legajo</label>
<div class="col-md-8"><input class="form-control input-sm" name="legajo" value='<?=$beca->usi_legajo?>'></div>
</div>
<div> <h3> Datos Laborales </h3><hr></div>
<div class="form-group">
<label class="control-label col-md-2">Fecha Ingreso PJCABA</label>
<div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->f_ingreso_caba?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Fuero</label>
<div class="col-md-8">
<select class="form-control" name="car_id">
#foreach($helpers['fuero'] as $key=>$fuero)
<?php if( $fuero->fuero_id == $beca->fuero_id ){?>
<option value="{{$fuero->fuero_id}}" selected>{{$fuero->fuero_nombre}}</option>
<?php }else{?>
<option value="{{$fuero->fuero_id}}">{{$fuero->fuero_nombre}}</option>
<?php }?>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Dependencia</label>
<div class="col-md-8">
<select class="form-control" name="car_id">
#foreach($helpers['cargos'] as $key=>$cargo)
<?php if( $cargo->car_id == $beca->cargo_id ){?>
<option value="{{$cargo->car_id}}" selected>{{$cargo->car_nombre}}</option>
<?php }else{?>
<option value="{{$cargo->car_id}}">{{$cargo->car_nombre}}</option>
<?php }?>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">Aceptar</button>
Cancel
</div>
</div>
</form>
</div>
Hope someone can help me.
Thanks!

If you're trying to set your form to have two sides you can nest your columns/rows to split it into parts. Docs
See working example (full page).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form id="theForm">
<div class="container">
<div class="row">
<!-- START CONTAINER-->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h3>Datos Personales</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">DNI</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="dni">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Apellido y Nombre</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="apynom">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Legajo</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="legajo">
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<!-- START CONTAINER-->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h3>Datos Laborales</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Fecha Ingreso PJCABA</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="dni">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Fuero</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" name="car_id">
<option selected>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Dependencia</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" name="car_id">
<option selected>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<div class="col-sm-12">
<div class="form-group">
<button type="submit" class="btn btn-default">Aceptar</button> Cancel
</div>
</div>
</div>
</div>
</form>
<hr>

Get selected text from drop down list using name attribute jQuery

I am trying to get the selected value from the dropdown.
I am creating the controls dynamically. I am not using ID attribute to avoid the problem of having multiple controls with the same ID/ duplicate IDs.
Here is how I am able to get the values of the textbox controls
$('.btn-success').off('click').on('click', function (e) {
e.preventDefault();
var row = $(this).closest(".row");
var lnameval = row.find("input[name='ContactLastName']").val();
});
Is it possible to get the selected value of the dropdown using the name attribute.
something like : var titleVal = row.find("input[name='ContactTitle']").val();
HTML :
<form id="formAddContact" role="form" class="form-horizontal">
<div class="modal-body">
<div id="errorMessageContainer2" class="alert alert-danger" role="alert" style="display:none;">
<ul id="messageBox2" class="list-unstyled"></ul>
</div>
#foreach (string cInfo in Model.emailList)
{
<div class="row" id="#cInfo.Replace("#","")" style="display: none;">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-3 control-label">
<label>Title:</label>
</div>
<div class="col-md-3">
<select class="form-control ToCapture" name="ContactTitle">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lblfname">First Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactFirstName" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lbllname">Last Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactLastName" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Contact" class="btn btn-success">
<input type="button" value="Cancel" class="btn btn-default">
</div>
<br/>
}
<hr />
</div>
</form>

Just a little change needed :
row.find("select[name='ContactTitle']").val();
It's not an input.

Categories

Resources