Display related data from database based on dropdown selection JavaScript - javascript

In my task I want to select one name from drop down. Then I want to print the technology related to that name in other div tag. I don't know how to do this. I successfully get data from data base for dropdown option. Here is my code.
candidate name:
<select name="candidate_id" class="form-control" id="can_name" value="<?php echo set_value('candidate_id');?>"palceholder="candidate full name" required>
<option></option>
<?php foreach ($candidate as $r): ?>
<option value="<?php echo $r->candidate_id; ?>"><?php echo $r->candidate_name." "; ?></option>
<?php endforeach; ?>
</select>
</select>
<div class="error"><?php echo form_error("candidate_name");?></div><br>
<div></div><br> <!-- here I want to print technology related to canididate name -->

let's use the jQuery library, as this will simplify the syntax of what you want to do considerably.
You include it in your page like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This will pull in the most recent minified version of the 1.x branch of the library.
Then you need a select. I was about to say, let's use below ex.
Let's use a select anyway, you can change it if it isn't correct:
<label for="meetingPlace">Meeting place: </label>
<select id="meetingPlace">
<option>Please select</option>
<option>Buckingham Palace</option>
<option>The White House</option>
<option>Mount Everest</option>
</select>
With that in place you need to hook into the select's on change event.
you can do this in your JavaScript:
$("#meetingPlace").on("change", function(){
// This code will fire every time the user selects something
})
All this does is select the element with an id of "#meetingPlace" and declare an anonymous function which should be run every time the user selects something different.
As a final step for this post, let's have the JS output what the user selected to the page.
Create a div with an id of "results":
<div id="results"></div>
Then within the onchange callback add the following code:
var selected = $(this).val();
$("#results").html("You selected: " + selected);
What this does is assign the value of the selected option element to a variable, then set the innerHTML of the results accordingly.

Related

how to display values in dropdown

enter image description hereI am trying to display values in a multi-select dropdown, those values are coming from an API. below I have given JSON format in which data is received from API.
the below data is that the user already selected values, now I am displaying a popup to edit the selected values, before this, I need to show the user that the user is previously selected in the multi-select dropdown.
//below is my values coming from API
[
{id: 1, name: "selected 1"},
{id: 2, name: "selected 2"}
]
// below is my dropdown element
<select id="selected" name="selected[]" multiple>
<option value="" > </option>
</select>
If you are using PHP, I think you can do like this.
<select name="selected[]" id="selected" multiple>
<option selected="selected">Choose one</option>
<?php
foreach($users as $user) {
?>
<option value="<?php echo $user['id'] ?>"><?php echo $user['name'] ?></option>
<?php
}
?>
</select>
Well, as per my understanding from your question, you would like to show all those values which the user selected before. If I'm right, then we may have 2 solutions. 1) To keep the track at server end(i.e in the database) 2) To keep track at the client side (i.e in cookies on a temporary basis),
Please let me know if I answered your question. If don't then please elaborate your question in more detail with the reference code snippet.

Make bootstrap-select dropdown required

I have dropdown list in my form which used bootstrap-select to show the dropdown. I want to make if user submit the form it will check the dropdown is have value or not. I already added required inside the <select> tag but nothing happen if I leave it empty and press submit button.
This is my code :
<div class="form-group">
<label for="location">Location</label>
<select name="location" id="location-form" required>
<option value="">Choose Location</option>
<?php foreach($location as $row) : ?>
<option value="<?=$row['location_id']?>"><?=$row['location_name']?></option>
<?php endforeach; ?>
</select>
</div>
How to make my select dropdown required and can validate it must filled in if user press submit button ? Thanks before.
A select always has a value set into it. Try using a radio group instead.
Check here for more information on a radio group. HTML5: How to use the "required" attribute with a "radio" input field
There is two way that helps me will share with you below.
Using this way also problem getting solved.
<form action="whatever" method="post" novalidate>
OR using this too
please try following code.
/* For checking the drop-down contain value of not use this. */
if(jQuery('#location-form').val() == ''){
alert('Please select the option for location');
}else{
return false;
}
I hope this will help you.
Thanks.
By using default bootstrap 4.* JS validations you can simply add to sezel
<select ... required="true">
and an empty option with value=""
<option value="">Select one</option>
In this way Bootstrap JS library check if is selected
Add "disabled" in yout first option(along with required in select tag) as:
<div class="form-group"> <label for="location">Location</label> <select name="location" id="location-form" required> <option value="" disabled>Choose Location</option> <?php foreach($location as $row) : ?> <option value="<?=$row['location_id']?>"><?=$row['location_name']?></option> <?php endforeach; ?> </select> </div>
I am new to coding but I have done a lot of research on this site and I found a solution (not so efficient but works). This solution is based on the fact that the html5 "required" attribute worked at least somewhat - it prevents you from proceeding next or submitting but nothing else other than that - e.g. no error message, no alert, nothing at all.
The idea of the solution is to use the "invalid-feedback" class to show an error message, make use of the fact that it won't show until you pass in a "d-block" class. Then use a couple of functions on click of a button.
$('#button').click(function () {
$('#id-error').hide(); //if there is indeed a html5 message showing, but it looks bad, then just hide it, if you inspect the msg, html has automatically generate this "id-error" id
if ($('#id').is(':disabled')){
$('#errormsg-id').removeClass('d-block');
} else if (!$('#id').val()){
$('#errormsg-id').addClass('d-block');
};
});
$('#id').change(function () {
if($('#id').val()){
$('#errormsg-id').removeClass('d-block');
};
});
<div class="form-group ">
<select id="id" class="selectpicker" required>
<option >...</option>
</select>
<div id="errormsg-id" class="invalid-feedback ">Please make a selection.</div>
</div>
This is PHP; however, for Angular (which is what I came here looking for), you could create a custom validator that checks if the <option value="">Choose Location</option> is selected. Inside the validator, you'd check the value of the control. If the control value is '', then you fail the validation.
This would work for both template driven and reactive forms.
Custom Validators in Angular
Have you put your select in form tag?
If not try placing it inside form tag.
Please refer - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required
If required is not working you can add java script validation as given below and replace "FormnameId" with your form tag id.
<script type="text/javascript">
$(document).on('submit','form#FormnameId',function(event){
event.preventDefault();
var sel = $("#location-form").val();
if(sel == ''){
alert('Please select value first');
return false;
}
});
</script>

how to set the html selected option value as selected in each page when including the same code in multiple pages

Ok I have a page name "my_file.html" with the code,
<script> //Beahvior on change
jQuery("#selectBox").change(function() {
document.getElementById("selectBox").value =$( "#selectBox).val();
location = $("#selectBox option:selected").val();
});
</script>
<!--A select html tag -->
<div class="block2">
<select id="selectBox">
<option value="check.html">Check.html</option>
<option value="going.html">Going.html</option>
<option value="check123.html">Check123.html </option>
</select>
</div>
Now this page(my_file.html) is loaded externally into the three files "check.html" ,"going.html" and "check123.html" with Jquery.Ok now I manually type the directory of "check.html" and the page is loaded,when selecting "going.html" from the option list the page going.html is loaded with the 'my_file.html' content but the option 'value="going.html"'is not mark as selected.The option list simply shows "check.html" as the selected option.This same behavior happens on selecting 'check123.html' option too.I also cannot load the 'check.html' page because it is already set as selected.
I have been trying to figure out the solution of this problem but to no avail,any help would be good.
If you want to know what I want to achieve go to this link http://readcomiconline.to/Comic/The-Walking-Dead/Issue-1?id=1715
Below the navigation bar you will see the "Issue" select option tag and when you choose any chapter from the drop down list,that issue is loaded and also the selected 'Issue' is set as selected.
Maybe the selectedIndex would do what you want:
document.getElementById("selectBox").selectedIndex = 2;
This way you can control what option is selected.
that site seems use "get" to achieve that,
in the top of my_file.html
<?php
$selectedCheck = $_GET['selected'];
?>
and in your div
<div class="block2">
<select id="selectBox">
<option value="check.html" <?php echo (($selectedCheck == 'check.html') ? 'selected':'');?>Check.html</option>
<option value="going.html" <?php echo (($selectedCheck == 'going.html') ? 'selected':'');?>>Going.html</option>
<option value="check123.html" <?php echo (($selectedCheck == 'check123.html') ? 'selected':'');?>>Check123.html </option>
</select>
</div>
it maybe not a smart way but it work and pretty easy to use :)
or maybe just add a default option like "Please choose one" and set it as selected, then whatever u selected the select will mark "Please choose one" selected.

PHP Simple HTML DOM and Dropdown Element Selected Option

I'm generating dropdown inputs with php simple html dom. I have some values from database and according them i will add 'selected' value into my select->option dom elements.
<select name="myDropDown" id="someID">
<option value="someValue1">Value1Value</option>
<option value="someValue2">Value2Value</option>
<option value="someValue3">Value3Value</option>
</select>
this is the default one. i would like to add value like this, check on option 2 :
<select name="myDropDown" id="someID">
<option value="someValue1">Value1Value</option>
<option value="someValue2" selected>Value2Value</option>
<option value="someValue3">Value3Value</option>
</select>
and while doing that i want to use my plugin.
<?php
$html = new simple_html_dom();
$html->load('
<select name="myDropDown" id="someID">
<option value="someValue1">Value1Value</option>
<option value="someValue2">Value2Value</option>
<option value="someValue3">Value3Value</option>
</select>
');
echo $html;
?>
Everything works nicely until here. Yeah now i need to insert selected into my second option. I don't know how to do this with PHP Simple HTML DOM, or i'm missing something in the documentation : http://simplehtmldom.sourceforge.net/manual.htm#section_access
What i have tried so far and got many errors in my php section :
<?php
$html = new simple_html_dom();
$html->load('
<select name="myDropDown" id="someID">
<option value="someValue1">Value1Value</option>
<option value="someValue2">Value2Value</option>
<option value="someValue3">Value3Value</option>
</select>
');
//here's where i'm trying to reach the child nodes :
$ret = $html->getElementById('someID');
$ret->children(2)->GOTTADOSOMETHINGHEREANDIREALLYDUNNO;
echo $html;
?>
By the way, if you offer another easy way to do this, i'd appreciate.
Thank you in advance !
With minimal research you can figure this out for yourself.
$ret->children(2)->selected = true;
Why you use simple_html_dom and not simply a template file (with PHP)?
<select name="test" <?php if($selected){echo 'selected'}?> />
Or even better Smarty.
<select name="test" {if $selected}selected{/if} />
Simple_html_dom is a class for parsing complex html documents like exchanging image urls or something like that. I cant' see any reason why you need to use this class.
for getting Dropdown Element Selected Option with Simple HTML DOM
just try this simple and easy method
$element = $html->find('#selectIDGoesHere',0)->find('option');
foreach($element as $elemen) {
echo "Display text:".($elemen->plaintext)."<br>";
echo "value:".($elemen->value)."<br>";
}

Bootstrap Multiselect: On submit getting length of selected options list instead of option values

This is my first time using Bootstrap Muliselect; it's been a completely elegant experience until this:
When my form is submitted, what comes through the POST request is the number of selected options from each select.multiselect element, not their values, ie:
If I create:
<select name='foo'>
with 3 options
<option value='b' selected='selected'>B</option>
<option value='a' selected='selected'>A</option>
<option value='r' selected='selected'>R</option>
subsequently typing print_r($_POST) produces:
Array
(
[foo] => 3
)
I feel like this must be a facepalm sort of moment, but I've been at it for about two hours and though I can write ways to achieving this end, I can only assume Bootstrap is supposed to have such functionality by default. Anyone able to point me in the right direction, here?
Notes:
For sure dependencies are installed & jQuery is loaded properly
I'm using CakePHP & Foundation 4, but I don't think there are any conflicts/collisions
I'm submitting the form via $("#MahFormNaym").submit(); which I think doesn't matter but I am a JavaScript nub
The PHP/HTML:
<select id="<?php echo $model;?>-filter" class="multiselect" multiple="multiple">
<?php foreach($elements as $id => $element):?>
<option value="<?php echo $id;?>"> <?php echo $element;?> </option>
<?php endforeach;?>
</select>
The JavaScript:
$(".multiselect").multiselect({
buttonWidth:"600px",
includeSelectAllOption: true,
enableFiltering:true
});
You haven't assigned your option a corresponding value to reflect [foo] => 3. So, in order for this object to work like what you wanted, you need to assign the value with number like this:
<option value='0' selected='selected'>B</option>
<option value='1' selected='selected'>A</option>
<option value='2' selected='selected'>R</option>
Once node finds the specific number that matches to value, it'll then grab the content of the selected.

Categories

Resources