i want to make if else statement based on the input id of select given
here is my code
my attribute id
<select name="cu" id="cu" class="input-sm form-control" onchange="">
My if else condition
#if(??)
<a class="btn btn-sm btn-default pull-right" type="button"
title="Search Category" onclick="openNewWindow('{{ route('reporting.') }}')" >
<i class="fa fa-hand-o-up"></i> Choose Category</a>
#else
<a class="btn btn-sm btn-default pull-right" type="button" title="Search Category"
onclick="openNewWindow('{{ route('reporting.categoryCheckBoxList', ['cuid' => '_cuid_']) }}'.replace('_cuid_', document.getElementById('cu').value))" >
<i class="fa fa-hand-o-up"></i> Choose Category</a>
#endif
what source code i need to put inside if statement
The short answer you can't pass selected value (JS variable) to #if() statement (PHP code).
Here is why
On page request: The process flow looks like this:
Server Side PHP code rendering
Response sent to the Browser
Browser begins rendering and executing JS
You would want to hide (using bootstrap d-none class utility) both a tags on page load then on user select "change" event you show/hide your correspondant a tag.
Blade Code
<select name="cu" id="cu" class="input-sm form-control">
<option value="option-value1"> Opt 1</option>
<option value="option-value2"> Opt 2</option>
</select>
//...
<a id="option-value1" class="btn btn-sm btn-default pull-right d-none" type="button"
title="Search Category" onclick="openNewWindow('{{ route('reporting.') }}')" >
<i class="fa fa-hand-o-up"></i> Choose Category</a>
<a id="option-value2" class="btn btn-sm btn-default pull-right d-none" type="button" title="Search Category"
onclick="openNewWindow('{{ route('reporting.categoryCheckBoxList', ['cuid' => '_cuid_']) }}'.replace('_cuid_', document.getElementById('cu').value))" >
<i class="fa fa-hand-o-up"></i> Choose Category</a>
//...
<script>
//...
//make sure you already loaded Jquery
$('select#cu').on('change', function() {
value = this.value;
$("a#" + value).show();
$("a id[value!='" + value + "']").hide();
});
</script>
You cannot pass js value inside php. You can achieve the same result using Jquery show and hide element:
<select name="cu" id="cu" class="input-sm form-control" onchange="showLink(this.value)">
<a style="display:none" id="first" class="btn btn-sm btn-default pull-right" type="button"
title="Search Category" onclick="openNewWindow('{{ route('reporting.') }}')">
<i class="fa fa-hand-o-up"></i> Choose Category</a>
<a style="display:none" id="second" class="btn btn-sm btn-default pull-right" type="button" title="Search Category"
onclick="openNewWindow('{{ route('reporting.categoryCheckBoxList', ['cuid' => '_cuid_']) }}'.replace('_cuid_', document.getElementById('cu').value))">
<i class="fa fa-hand-o-up"></i> Choose Category</a>
<script>
function showLink(value) {
if (value == < your value >)
{
$("#first").show();
$("#second").hide();
}
else
{
$("#second").show();
$("#first").hide();
}
}
</script>
Related
I have a question. I'm beginner in web development.
So basically, I want to get the selected value for the dynamic dropdown in order to edit the form. I'm using the dselect https://github.com/jarstone/dselect/ js file for the dynamic dropdown.
I've tried using this $('#stock_category').val(data.stock_category); in order to get the selected value for the dropdown. But still didn't manage to get the selected value.
/////////////////////
When I did inspect the dropdown, it doesnt catch the selected value
$(document).on('click', '.edit_button', function() {
var stock_id = $(this).data('id');
$('#stock_out_form').parsley().reset();
$.ajax({
url: "stock_out_exec.php",
method: "POST",
data: {
stock_id: stock_id,
action: 'fetch_single'
},
dataType: 'JSON',
success: function(data) {
$('#stock_category').val(data.stock_category);
$('#stock_item').val(data.stock_item);
$('#modal_title').text('Edit Stock Out');
$('#action').val('Edit');
$('#submit_button').val('Edit');
$('#stockOutModal').modal('show');
$('#hidden_id').val(stock_id);
}
})
});
<!-- first dynamic dropdown -->
<select class="form-select" name="stock_category" id="stock_category" onchange="getId(this.value)" required="" style="display: none;">
<option value="0">Select Category</option>
<option value="1">PRODUCTS - MARKETING - LOGISTIC</option>
<option value="2">FREEGIFT</option>
</select>
<div class="dropdown dselect-wrapper ">
<button class="form-select " data-dselect-text="Select Category" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Category
</button>
<div class="dropdown-menu">
<div class="d-flex flex-column">
<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
<div class="dselect-items" style="max-height:360px;overflow:auto">
<button class="dropdown-item active" data-dselect-value="0" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Select Category</button>
<button class="dropdown-item" data-dselect-value="1" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">PRODUCTS - MARKETING - LOGISTIC</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
<!-- selected value should be right here -->
<button class="form-select " data-dselect-text="Select Category" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Category
</button>
<p></p>
<!-- second dynamic dropdown -->
<select class="form-select" name="stock_item" id="stock_item" data-dselect-search="true" required="" style="display: none;">
<option value="0">Select Item</option>
</select>
<div class="dropdown dselect-wrapper ">
<button class="form-select " data-dselect-text="Select Item" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Item
</button>
<div class="dropdown-menu">
<div class="d-flex flex-column">
<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
<div class="dselect-items" style="max-height:360px;overflow:auto">
<button class="dropdown-item active" data-dselect-value="0" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Select Item</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
<button class="form-select " data-dselect-text="Select Item" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Item
</button>
Try grabbing the option element with: $('#stock_category').find("option:selected")
Then try: $('#stock_category').find("option:selected").val()
and if that doesn't work, just grab the text with: $('#stock_category').find("option:selected").text()
and if there's extra whitespace, just strip it: $('#stock_category').find("option:selected").text().trim()
Edit 1, Showing copy element in dev console
Right link on Element + Inspect
Find Select in Element's Pane, should already be highlighted blue, and Copy. (when you hover over elements in the pane, the element on the page is highlighted)
When you Copy Element, it will copy the select field + ALL the options it contains. It should look like a complete mess when pasted. You can Chop out some Options and get rid of actual values (if needed) just be careful not to remove the option that is selected
Edit 2
This works: document.getElementById("stock_category").value
For some reason I can't access it using JQuery, but I can in Vanilla JS.
I have a html code where I want to find a tag that contains a value in one of its attributes to extract the text of it. Then with this text, I want to change the text of another tag.
Here is the html code :
<select name="client" class="select form-select" id="id_client" style="display : none ">
<option value="1109">Charles</option>
<option value="1108">Fred</option>
<option value="1107">Lionel</option>
<option value="1106">Robert</option>
<option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
<button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Charles
</button>
<div class="dropdown-menu">
<div class="d-flex flex-column">
<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
<div class="dselect-items" style="max-height:360px;overflow:auto">
<button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
<button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
<button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
<button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
<button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
On another button that it is not in this html, I get an ID : <button onclick="myFunc(this.id)" id="1106">Select client</button>. I get in this case the value 1106 with this function.
I want to find the tag in the html code above that contains the attribute data-dselect-value="1106". It is the same id value from the button. Then I want to extract the text from it, so in the exemple the name "Robert" to be able to change the attribute and the text of the button (still on the html above)
<button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Charles
</button>
to
<button class="form-select " data-dselect-text="Robert" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Robert
</button>
So it means to change the value of the attribute data-dselect-text and the text of the tag by Robert.
I have this code, I do not see how to extract the text of the tage to change it in the another tag
function myFunc(clicked_id){
var elem = document.querySelector('[data-dselect-value="'+clicked_id+'"]');
};
Thank you
Let's use vanilla js for this. There isn't much to explain except the part getting from the dropdown item to the dropdown toggle which involved going up with closest then going down with querySelector.
function myFunc(clicked_id) {
var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
var text = elem.innerText;
var parent = elem.closest(".dropdown");
var button = parent.querySelector("[data-bs-toggle=dropdown]");
button.innerText = text;
button.setAttribute('data-dselect-text', text);
};
<select name="client" class="select form-select" id="id_client" style="display : none ">
<option value="1109">Charles</option>
<option value="1108">Fred</option>
<option value="1107">Lionel</option>
<option value="1106">Robert</option>
<option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
<button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Charles
</button>
<div class="dropdown-menu">
<div class="d-flex flex-column">
<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
<div class="dselect-items" style="max-height:360px;overflow:auto">
<button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
<button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
<button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
<button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
<button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
<button onclick="myFunc(this.id)" id="1106">Select client (1106)</button>
So I have this code:
$(document).ready(function(){
if($('#proofAttach-filemanager').val().length !=0){
$('#download_now').attr('disabled', false);
}
else
{
$('#download_now').attr('disabled', true);
}
});
The field with id proofAttach-filemanager is filled up dynamically using elFinder every time I upload a file.
Since the code above is only running every time the page loads, I don't know how to update the download_now button to enable dynamically every time the field is filled (and without keyUp)
HTML Segment:
<div class="form-group col-md-12">
<label>Attachment</label>
<input type="text" id="proofAttach-filemanager" name="proofAttach" value="" class="form-control" readonly="">
<div class="btn-group" role="group" aria-label="..." style="margin-top: 3px;">
<button type="button" data-inputid="proofAttach-filemanager" class="btn btn-default popup_selector">
<i class="fa fa-cloud-upload"></i> Browse uploads</button>
<button type="button" data-inputid="proofAttach-filemanager" id="download_now" class="btn btn-default download_now">
<i class="fa fa-cloud-download"></i> Download</button>
<button type="button" data-inputid="proofAttach-filemanager" class="btn btn-default clear_elfinder_picker">
<i class="fa fa-eraser"></i> Clear</button>
</div>
Writing your logic inside the change event of that text box should work.
$(document).ready(function(){
toggleDownloadButtonAccess();
$('#proofAttach-filemanager').change(toggleDownloadButtonAccess);
function toggleDownloadButtonAccess(){
var $btnDownload = $('#download_now');
if($('#proofAttach-filemanager').val().length !=0){
$btnDownload.attr('disabled', false);
}
else
{
$btnDownload.attr('disabled', true);
}
}
});
I need one help.I need to add input field name attribute dynamically using Javascript/Jquery. I am each time creating new field by clicking on + button and delete the required field by clicking on - button.I am explaining my code below.
function createNew(evt){
$('#questionshowp1').append('<div class="form-group"><input name="questions1" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
$(evt).css('display', 'none');
$(evt).siblings("button.btn-danger").css('display', 'block');
}
function deleteNew(evnt){
$(evnt).closest(".form-group").remove();
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<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="questionshowp" id="questionshowp1">
<div class="form-group">
<input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
</div>
Here i am creating new field using + button and here i need to increment the name attribute value like questions0,questions1,questions2.... this.Suppose user delete any field then also this given order will remain with all field as name attribute value.Please help me.
Have a look attached snippet.
function createNew(evt){
var cur=$("input:text").length+1;
$('#questionshowp1').append('<div class="form-group"><input name="questions'+cur+'" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
$(evt).css('display', 'none');
$(evt).siblings("button.btn-danger").css('display', 'block');
var i=0;
$('input[type="text"]').each(function(){
$(this).attr('name', 'questions' + i);
$(this).attr('id', 'questions' + i);
i++;
});
}
function deleteNew(evnt){
$(evnt).closest(".form-group").remove();
var i=0;
$('input[type="text"]').each(function(){
$(this).attr('name', 'questions' + i);
$(this).attr('id', 'questions' + i);
i++;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionshowp" id="questionshowp1">
<div class="form-group">
<input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
</div>
First of all, your aproach is pretty bad. It's not a good idea to put everything in a long string and place it somewhere in your JS. But, this is not your question.
Just create a new variable in your script for counting.
var count = 0;
And then increase the count in your createNew function and place the value everywhere you need it in your element string.
++count;
'<input name="questions' + count + '" id="questions' + count + '"'
That's it.
You simply have to count the number of clicks
and use that count in your script to have unique name attributes.
<script type="text/javascript">
var clicks = 0;
function createNew() {
clicks += 1;
var ques = "questions" + clicks;
$('#questionshowp1').append('<div class="form-group"><input name='+ques+' id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
$(evt).css('display', 'none');
$(evt).siblings("button.btn-danger").css('display', 'block');
};
</script>
Create a global variable idCount in your script and in createNew function increment its value.
var idCount = 0;
function createNew(evt){
idCount++;
$('#questionshowp1').append('<div class="form-group"><input name="questions'+idCount+'" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
$(evt).css('display', 'none');
$(evt).siblings("button.btn-danger").css('display', 'block');
}
function deleteNew(evnt){
$(evnt).closest(".form-group").remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionshowp" id="questionshowp1">
<div class="form-group">
<input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
</div>
Hello Everyone
I am trying to get option value from select box on button click but it shows undefined in console .Options value are coming from server
Here is my html code
<div class="form-group">
<label class="control-form" for="cityid">Selct City</label>
<select type="text" class="form-control" placeholder="City" id="acity" >
<option value="">--Select City--</option>
<option ng-repeat="city in cityinfo" ng-value="{{city.id}}" ng-selected="{{city.id ==cityid}}">{{city.cityname}}</option>
</select>
<button class="btn btn-info prevnext pull-right" ng-click="nextpage()">Next <i class="fa fa-arrow-right"></i></button>
Controller.js file code
$scope.nextpage = function(pageno) {
console.log($scope.cityinfo);
}
Thanks in advance
Use ng-options instead of ng-repeat.
Like this:
Updated
<select type="text" class="form-control" placeholder="City" id="acity" ng-options="city.id as city.cityname for city in cityinfo track by city.id" ng-model="selectedCity">
<option value="">--Select City--</option>
</select>
<button class="btn btn-info prevnext pull-right" ng-click="nextpage(selectedCity)">Next <i class="fa fa-arrow-right"></i></button>
JS:
$scope.nextpage = function(selectedCity){
console.log(selectedCity);
}
Here is the sample code.
Html code
<select type="text" class="form-control" placeholder="City" id="acity" ng-options="city.id as city.cityname for city in cityinfo track by city.id" ng-model="currentCity">
<option value="">--Select Cities--</option>
</select>
<button class="btn btn-info prevnext pull-right" ng-
click="nextpage(currentCity)">Next <i class="fa fa-arrow-right"></i>
</button>
JS function
$scope.nextpage = function(currentCity){
console.log(currentCity);
}