Develop Reference

how to separate and display select option data?

I have two forms. form1's content is a choice option filled by name, matricule, and salary, and a button validate, which hides form1 and displays form2. I want when I click on the button, the contents of select to separate and show like this:
name:
registration number :
salary :
$(document).ready(function() {
$("#hide").click(function() {
let name1 = $('#name').text();
let matricule1 = $('#matricule').text();
let salary1 = $('#salary').text();
$('#nam').text(name1);
$('#mat').text(matricule1);
$('#sal').text(salary1);
$("#form1").hide();
$("#form2").show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form1">
<div class="form-group col-md-3">
<select class="form-control">
<option>
<div id="name">imad</div>
<div id="matricule">22</div>
<div id="salary">6000</div>
</option>
</select>
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " id="hide">valider</button>
</div>
</div>
<!--form 2-->
<div id="form2">
<h4>name : <span id="nam"></span></h4>
<h4>matricule : <span id="mat"></span></h4>
<h4>salary : <span id="sal"></span></h4>
</div>

As Rory said, you cannot have HTML within an option element, this is invalid. Use a custom drop-down select library (some examples of such are here: https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/)
Now, if you know the format of the data you are using to populate the select option values with (you are getting data from server side, etc.), you could then format the data on the client side with some sort of separator to create a chained together option value for the 3 different fields, like I've done in the example below using a dash (-). You could then split the string value of the option selected, and parse it out to individual text fields. Again, this is all dependent on how you get and format the data within the select element.
$(document).ready(function() {
$("#hide").click(function() {
let selectOption = $('.form-control').val();
let optionSplits = selectOption.split('-');
let name1 = optionSplits[0];
let matricule1 = optionSplits[1];
let salary1 = optionSplits[2];
$('#nam').text(name1);
$('#mat').text(matricule1);
$('#sal').text(salary1);
$("#form1").hide();
$("#form2").show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form1">
<div class="form-group col-md-3">
<select class="form-control">
<option value="imad-22-6000">imad 22 6000</option>
<option value="gupta-24-8000">gupta 24 8000</option>
<option value="ganesh-27-5000">ganesh 27 5000</option>
</select>
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " id="hide">valider</button>
</div>
</div>
<!--form 2-->
<div id="form2">
<h4>name : <span id="nam"></span></h4>
<h4>matricule : <span id="mat"></span></h4>
<h4>salary : <span id="sal"></span></h4>
</div>

Autofill text box from dropdown list ERROR

I am trying to fill a textbox when a value is selected from a dropdown list.
I am able to do that, but in the process of doing so, I am unable to pick the value appearing in the textbox in my python script.
Now in my database I am getting a none value for the UserID. And the actual user ID is appearing in the Name column, as you can see in the screenshot.
This is the HTML:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="margin:0px 0px 0px 50px"><label for="form_lastname" class="control-label">Name</label>
<select name="username" id="username" required class="form-control">
<option value=""></option>
<option value="maahir10">Dadlani, Maahir</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="width:145px
<label for="form_lastname" class="control-label">User ID</label>
<textarea type="text" id="userid" style="height:35px;width:120px;font-family:Raleway" disabled="yes" required></textarea>
</div>
The JS:
<script type="text/javascript">
var mytextbox = document.getElementById('userid');
var mydropdown = document.getElementById('username');
mydropdown.onchange = function(){
mytextbox.innerHTML = this.value;
}
</script>
So, how do i fix this error and get both the values in my DB. Please advise. Thank you.

You should use .value option for input field not .innerHTML
<script type="text/javascript">
var mytextbox = document.getElementById('userid');
var mydropdown = document.getElementById('username');
mydropdown.onchange = function(){
mytextbox.value = this.value;
}
</script>
also you used disabled on your textarea, and that prevents the value to be sent via POST, use readonly instead.

Jquery Need siblings value but not working

I want to populate the value of the "eventTitle" in "Requirement" input box when some one click on the corresponding check box. i.e If some one clieck on the check box of Vels Group Of Instutions then automatically i want this to populate in texbox with name "Requirement" if multiple check box are clicked i want it to be comma seperated. Below is the code i tried to get but it is not working and getting undefined.
<div class="wid100">
<div class="eventTitle">Vels Group Of Instutions</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">This is world wide institute of technology </div>
<div class="selectEvent">
<input type="checkbox" class="seminar selected" id="179">
<label for="179"></label>
</div>
</div>
<div class="wid100">
<div class="eventTitle">Title goes here</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">sdfdsafasdfdsafdsafsadfsdfsdf </div>
<div class="selectEvent">
<input type="checkbox" class="seminar" id="179">
<label for="179"></label>
</div>
</div>
<input type="text" name="Requirement" placeholder="Title 01" id="divclass" required="required" class="pull-left" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
$(".seminar").click(function () {
if ($(this).is(":checked")) {
//checked
$(this).addClass("selected");
var event_title = "";
event_title = $(".selected").siblings('.eventTitle').val();
console.log(event_title); return false;
} else {
//unchecked
$(this).removeClass("selected");
}
});

.eventTitle is not the sibling of .selected and the .eventTitle is a div element having no value, text there. change this line
event_title = $(".selected").siblings('.eventTitle').val();
to
event_title = $(this).parent().siblings('.eventTitle').text();
or
event_title = $(this).parent().siblings('.eventTitle').html();

The issue you have is because .eventTitle is not a sibling of the clicked checkbox, so the DOM traversal logic is wrong. div elements also do not have a val(), so you should use text() or html() instead.
However, you can improve the logic and also achieve the comma separated list of the selected event titles by using map() to build an array which you can then join() before setting in the value of #divclass. Try this:
$(".seminar").click(function() {
$(this).toggleClass('selected', this.checked);
var eventNames = $('.seminar:checked').map(function() {
return $(this).closest('.wid100').find('.eventTitle').text();
}).get().join(',');
$('#divclass').val(eventNames);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wid100">
<div class="eventTitle">Vels Group Of Instutions</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">This is world wide institute of technology </div>
<div class="selectEvent">
<input type="checkbox" class="seminar selected" id="179">
<label for="179"></label>
</div>
</div>
<div class="wid100">
<div class="eventTitle">Title goes here</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">sdfdsafasdfdsafdsafsadfsdfsdf </div>
<div class="selectEvent">
<input type="checkbox" class="seminar" id="179">
<label for="179"></label>
</div>
</div>
<input type="text" name="Requirement" placeholder="Title 01" id="divclass" required="required" class="pull-left" size="100" />
I'd suggest changing the id of the #divclass to something more descriptive, as the element is not a div, and it's an identifier, not a class.
Finally, your .seminar elements have the same id attribute which is invalid. You should ensure that the ids are unique within the DOM - assuming that this is not just a typo from copy/pasting the code in the question.

Laravel show input (jQuery)

I have following code
<div class="form-group">
<select class="form-control" name="persons">
<option value="1">{{Lang::get('user')}}</option>
<option value="0">{{Lang::get('admin')}}</option>
</select>
</div>
I want something like this if is selected the option with value = 1 to show an input like this
<div class="form-group">
{{ Form::text('name','',['required', 'class'=>'form-control', 'placeholder'=>Lang::get('user_name')]) }}
</div>
else if the value is 0
<div class="form-group">
{{ Form::text('admin','',['required', 'class'=>'form-control', 'placeholder'=>Lang::get('admin_name')]) }}
</div>
I'm new in Laravel and I don't know how to show inputs by value.

acually this is DOM issues
$('#persons').on('change', function(){
var value = $(this).val();
$('.form').find('div').addClass('hide');
if(value === 1){
$('.form').find('.one').remove('hide')
$('.form').find('.one').addClass('show')
}else{
$('.form').find('.two').remove('hide')
$('.form').find('.two').addClass('show')
}
});
enter code here
i made example . refer i update code
https://jsfiddle.net/channasmcs/5fmmLqax/
thanks
refre on change JQ
jQuery select change show/hide div event

jquery dynamic subselection combining last and form elements

Update
Tidied up the solution in progress and added some extra details
I have a form area which creates clones based on a template. In order to make sure the form transmits in an order, the script goes through the form at send time appending a number which defines the current batch set. Below is an over simplified representation of what is going on:
<form>
<div class="batch-template">
<div class="batch-piece">
<a class="clone" />
<input name="test-input">
<input name="another-test-input">
<select name="a-drop-down">
</div>
</div>
<div class="batch-paste-area">
</div>
</form>
When the page starts:
The contents of "batch-template" are stored to an object variable
The original template is removed from the page
An instance of the template is appended to the "batch-paste-area"
The following is an example of the output created after clicking twice.
<form>
<div class="batch-template">
</div>
<div class="batch-paste-area">
<div class="batch-piece">
<a class="clone" />
<input name="test-input">
<input name="another-test-input">
<select name="a-drop-down">
</div>
<div class="batch-piece">
<a class="clone" />
<input name="test-input">
<input name="another-test-input">
<select name="a-drop-down">
</div>
</div>
</form>
When it comes to submitting the form: prior to serialization, I would like the script to loop through each "batch-piece" within "batch-paste-area" and add a count value to the end of each form field name. Continuing with the set above, the result (to a browser) would seem like that shown below:
<form>
<div class="batch-template">
</div>
<div class="batch-paste-area">
<div class="batch-piece">
<a class="clone" />
<input name="test-input1">
<input name="another-test-input1">
<select name="a-drop-down1">
</div>
<div class="batch-piece">
<a class="clone" />
<input name="test-input2">
<input name="another-test-input2">
<select name="a-drop-down2">
</div>
</div>
</form>
So far, I can either loop through EVERY input within the paste area or just select the last.
Selecting the last batch-piece is simple:
var intCount = 1;
$('.batch-paste-area .batch-piece').each(function(){
/*
* Would like to be able to loop through form fields here
* Below is an attempt to select all form fields for current set
*/
$(this + ' input, '+ this + ' select').each(function() {
var strName = $(this).attr('name') + intCount;
$(this).attr('name', strName);
});
intCount++;
});

Frustratingly, I had actually tried the correct solution in advance but had forgotten to use the comma at the time!
var intCount = 1;
$('.batch-paste-area .batch-piece').each(function(){
/*
* Would like to be able to loop through form fields here
* Below is an attempt to select all form fields for current set
*/
$(this).find("input, select").each(function() {
var strName = $(this).attr('name') + intCount;
$(this).attr('name', strName);
});
intCount++;
});