On my expectation, I want to make an Add button on the bottom of option.
Here is my code:
<select class="form-control" name="id_sales" style="margin-bottom:15px;">
<option value="" selected disabled>Sales</option>
<?php
$result = mysqli_query($con,"SELECT * FROM sales");
while ($row = mysqli_fetch_array($result)) {
?>
<option value="<?= $row['id_sales']; ?>"><?= $row['id_sales']; ?> - <?= $row['nama_sales']; ?></option>
<?php } ?>
<a href="index.php?page=sales" class="btn btn-primary">
<span class="fa fa-plus"></span> Add new sales
</a>
</select>
How to make it works?
You can use Jquery fo this, As you can't put an anchor in option tag
Here is the solution for question,
<select class="form-control" name="id_sales" id="id_sales" style="margin-bottom:15px;">
<option value="" selected disabled>Sales</option>
<option value="" >sales 1</option>
<option value="" >sales 2</option>
<option value="" >sales 3</option>
<option value="add_sales" id="add_sales">Add new sales</option>
<script type="text/javascript">
$(document).on('change','#id_sales', function (){
var selected_value = $(this).val();
if(selected_value=="add_sales"){
window.location.replace("url where you want to go on clicking 'Add new sales'");
}
});
</script>
In HTML, a possible element inside a select can only be a options element. You can not put anything inside the select tag except this.
This also makes sense as select and options define a single element. They represent a single entity.
So, first of all you need to declare the anchor outside the select tag to be able to see the link.
And, Using HTML a data can only be submitted using a form element. There is no substitute of it.
So, you need to wrap your fields in a form element too or you should use ajax. But Ajax also has its own use case so shouldn't be use if not necessary.
To make this work first wrap your element inside a HTML form and change the anchor to a submit type input/button. And, define the script url in form's action tag. And, if you must use anchor to submit the form do it using JavaScript.
Hope this is what you asked.
Related
On the frontend of my Laravel application I have a list of users (people looking for work) which I have filters to filter certain parameters of the users which appends the URL using the request().
My current filters are all anchors, so I am using the HREF attribute to update the url like so:
Filter By Full Time
Full Time
The above filter will append the url with mysite.io/users/?work_type=full_time and filter all users who work Full Time. I have this all working for all filters using anchor tags and href.
What I cannot work out is how to do a similar approach using a Select Menu to filter users by their city?
I have a list of cities in my database. They are dynamically added to the select menu and displaying on the page.
<select>
<option value="1">City Name 1</option>
<option value="2">City Name 2</option>
</select>
What I am trying to achieve is how 'OnChange' of the select menu I can pass the city ID to the Request query paramater as &city=2
You can add an event listener to the dropdown element and reload the page or anything else if you want. Let's see an example on reloading the page with the query param.
I have changed your select dropdown markup a little bit, adding an ID and a default option,
<select id="myFancyDropdown">
<option>Choose city</option>
<option value="1">City Name 1</option>
<option value="2">City Name 2</option>
</select>
Then in JS, do your thing when the dropdown is changed,
let elmSelect = document.getElementById('myFancyDropdown');
if (!!elmSelect) {
elmSelect.addEventListener('change', e => {
let choice = e.target.value;
if (!choice) return;
let url = new URL(window.location.href);
url.searchParams.set('city', choice);
// console.log(url);
window.location.href = url; // reloads the page
});
}
You could use a form to set the URL parameters.
<form id="myForm" method="get">
<button
id="workTypeButton"
type="button"
data-value="full_time"
onclick="setWorkTypeInput(this);"
>
Full Time
</button>
<select name="city">
<option value="1" {{ request('city') === '1' ? 'selected' : '' }}>City Name 1</option>
<option value="2" {{ request('city') === '2' ? 'selected' : '' }}>City Name 2</option>
</select>
<input id="workTypeInput" type="hidden" name="work_type" value="{{ request('work_type') }}">
</form>
Then add an event listener to submit the form if any input inside it changes. Instead of using a anchor to filter by full time, you could bind a button (workTypeButton) onclick event to a hidden input (workTypeInput) inside the form.
let myForm = document.getElementById('myForm');
let workTypeInput = document.getElementById('workTypeInput');
myForm.querySelectorAll('input, select, textarea')
.forEach(item => {
item.addEventListener('change', event => {
myForm.submit();
});
});
function setWorkTypeInput(event) {
let changeEvent = new Event('change');
workTypeInput.value = event.dataset.value;
workTypeInput.dispatchEvent(changeEvent);
}
If you use a radio or checkbox to set the work type. This way you would not need to define a onclick handler.
On button click event, I want to redirect to a specific section of page (a form in my case) and also put a focus on that section.
How do I achieve that focus?
<button class="btn btn-primary" id="addNewRequest" onclick="window.location='<?php echo Utility::getBaseUrl();?>leave/request/#addEmergencyLeave'">Add New Request</button>
Here's a form I want to point to and focus
<div>
<form id="addEmergencyLeave" method="POST" action="<?php echo Utility::getBaseUrl();?>addEmergencyLeave">
<select name="user_id" class="select2-container form-control" id="employee_list">
<option></option>
<option></option>
</select>
<select id="EmergencyLeaveType" class="select2-container form-control" name="EmergencyLeaveType">
<option></option>
<option value="2">Personal Leave</option>
<option value="1">Sick Leave</option>
<option value="6">Substitute/Others Leave</option>
<option value="7">Special Leave</option>
</select>
<select name="emergency_leave_length" class="select2-container form-control" id="emergency_leave_length">
<option></option>
<option value="0">Full Day</option>
<option value="1">First Half</option>
<option value="2">Second Half</option>
</select>
<div class="form-group">
<button class="btn btn-default" type="submit" value="" name="EmergencyLeaveSubmit">Submit and Approve Leave</button>
</div>
</form>
</div>
I have managed to redirect to that specific #addEmergencyLeave portion but couldn't put a focus on it.
Any help is very much appreciated. Thanks.
What do you mean, when saying focus a form? If you'd like to focus first select in your form just use #employee_list in your href.
Another way is to use an autofocus attribute on your select, but I think it's not exactly what you was looking for.
You can't focus a form, you can only focus a form element, and it is usually achieved using javascript.
Add this code into your HTML (before the closing </body> element), it will check if the hash #addEmergencyLeave is in the URL, and in this case it will focus on the form's first element:
<script>
function onload() {
if (location.href.indexOf('#addEmergencyLeave') != -1) {
document.getElementById('employee_list').focus();
}
}
window.addEventListener('load', onload, false);
</script>
addEventListener is the correct way to add an event listener on javascript, here it is the load event on the window element, usually if you use jQuery you will prefer the document ready event which is way faster.
I'm trying to create a drop-down list with four options such that if I select the 4th option, I want a text box created so that I can get the value typed in that box using "$_GET"
Something like this;
<select name="value">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<!-- And a 4th one -->
</select>
And if the 4th one is selected, a box should appear like this;
<input type="text" name="firstname">
Edit;
My current code;
<script>
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='sortby']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "byDefindex"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "defindex"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
</script>
<form action="<?php $_PHP_SELF ?>" method="GET">
Select:
<br />
<select name="sortby">
<option value="playHours">Play Hours</option>
<option value="lastLogin">Last Login</option>
<option value="byDefindex">By Defindex</option>
</select>
<br />
<input type="submit" />
</form>
If your 4th option is this:
<option value="value4">Option 4</option>
You can use jQuery to display the field.
Put your field in a <div>
<div id="field"><input type="text" name="firstname"></div>
Now,
<script type="text/javascript">
$(document).ready(function(){
$('input[name="value"]').change(function(){
var v = $('input[name="value"]').val();
if(v=="value4") $('#field').show();
else $('#field').hide();
})
})
This is usually done via javascript; something like this (by using popular JavaScript library, jQuery) :
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='value']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "value4"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "firstname"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
Hope that helps. You can find more here jQuery site
I'm not certain this is what you're asking, but it seems you're wanting to add new lines to your select list?
I often do something similar to this for adding new options to lists. The first option would be 'add a new record', like this:
<select name="value">
<option value="-1">Add New Option</option>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
Note that the value for "add new" is -1... you could put anything here, but it should be something that would never show up in the other options, so your javascript knows what to do when it is selected.
Add a 'onchange' to the select box like this:
<select name="value" onchange="if(this.value == -1) addOption(this);">
Note that if the selected option is -1, then a javascript function is called. It references itself (this), so that your function knows who called it.
Then create a function that allows adding a new option:
function addOption(theSelectElement){
// create a text box, underneath the select box:
var newInput=document.createElement('input');
newInput.type='text';
theSelectElement.parentNode.insertAfter(newInput,theSelectElement);
}
You'll want to add more code to this function so that the new text field has a name and perhaps an ID.
Hope this helps, or at least points you in the right direction.
I have the following HTML select FORM:
<select name="quantity">
<option value="0" >Select</option>
<option value="125" >1</option>
<option value="250" >2</option>
<option value="375">3</option>
</select>
I know how to GET the value of each option above but is there any way to GET the variable (1,2.3...)
Try this:
<select name="quantity" onchange="javacript: var valor = this.options[selectedIndex].text; alert(valor); document.getElementById('shadow').value = valor;">
<option value="0" >Select</option>
<option value="125" >1</option>
<option value="250" >2</option>
<option value="375">3</option>
</select>
<input type="hidden" id="shadow" value="">
With this combination you can accomplish your task.....javascript + hidden input, and php $_GET['shadow'] ;)
Saludos.
Under normal circumstances, when a form is submitted, only the value(s) of the selected item(s) in a select element will be submitted. The label will not.
Your options:
Keep a map of values/labels on the server and use the submitted value to retrieve the label
Store the label in the value (possibly by encoding the existing value and the label as JSON)
Use JavaScript to add the label to the submitted data
I strongly suggest the first option.
If you put in a hidden field called SelectedHTML you can achieve this with javascript.
<input type="hidden" id="SelectedHTML" name="SelectedHTML" />
for example with an onchange event on the select to put the innerHTML of the selectedIndex into the hidden field, when posted you will be able to use $_GET['SelectedHTML'] to retreive the data
<select onchange="document.getElementById("SelectedHTML").value=this.options[this.selectedIndex].text;" name=....>
No, not in standard HTML.
You could use JavaScript to do it somehow.
You can't do that with PHP. You need javascript (jQuery).
Method text()
$('option').text();
would return that for you and then you can send it with GET with window.location
window.location = 'yoururl.php?value=' + $('option').text();
I want to implement dynamic select box. I have do it success fully, but when my page is submitted I the value is not there
See my code below
<select name="frm_child" id="frm_child" style="width:50px;" onchange="addFLd(this.value)" >
<option value="0" >0</option>
<option value="1" >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
Dynamic field display in childDynamic div. Which is inside the form tag? But when I submit my form, I can't see the result from select box. See my js code below
<div id="childDynamic" style="display:none;">
<input type="text" name="child1" value="" />
</div>
My JavaScript code id
<script type="text/JavaScript">
Function addFLd(val){
var d=document.getElementById("childDynamic");
d.style.display='block';
d.innerHTML="";
if(val!=0){
d.innerHTML="<b>Please specify the ages of children:</b><br><br>";
for(var i=1;i<=val;i++){
if(i%2!=0 && i!=1){
d.innerHTML+="<br><br>";
}
var name='child'+i;
d.innerHTML+=" Child "+i+": ";
d.innerHTML+=" <select name='"+name+"' id='"+name+"'><option value=''>--select--</option><option value='1'>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><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option>";
d.innerHTML+="</select>";
}
d.innerHTML+="<br><br>";
document.getElementById('childDynamic').appendChild(d);
}
}
</script>
Does anyone know how I add dynamic fields and get the values in action with the form elements?
in your code you could replace the entire string with all the option elements with a for loop going from 0 to 17, like
for (var age = 0; age < 18; age++) {
d.innerHtml += "<option value='" + age + "'>" + age + "</option>"
}
although I think it is not so nice coding to keep on appending to innerHTML the way you do.
one alternative is to have a variable called 'selectHtml' and add the code to that, and set
d.innerHTML to selectHtml in the end.
Perhaps a better alternative is to include the form inputs in the original markup and rather than appending them if necessary, simply enable them by removing the disabled="disabled" attribute and also removing display:none style to reveal them on the page.
I would think you'd get more luck with cross browser support, as some don't submit dynamically added form elements.
Alternatively, I recommend using a javascript framework to do the appending, such as jQuery.
See this link for details on how you might append form elements to a page:
http://api.jquery.com/append/