I am getting a SelectChanged is not defined message when using the following code. For the life of me, I cant figure why since I have used this before:
jQuery
jQuery("#name").on("change", function() {
alert(this.value);
});
dropdown
echo('<td class="table-font"><select id="name" onchange="SelectChanged(this)">');
foreach($Staff_On_Duty as $person){
$sf_name_option=$person->Staff_First_Name;
$sl_name_option=$person->Staff_Last_Name;
echo("<option value = $sf_name_option $sl_name_option");
if (($sf_name_option == $sf_name) && ($sl_name_option == $sl_name)) echo (" selected");
echo(">$sf_name_option $sl_name_option</option>");
}
echo("</select></td>");
Yes I am aware that the above method of showing the menu isn't the best, I am working on getting the functionality I need, then can make it better through separating the HTML and PHP etc
You're trying to do the same thing twice.
You can call a function inline using onchange=function() or you can add a JQuery event listener using $(elem).on('change', function() {}).
Your code is actually working (using the jquery event listener) but you are also getting an error from the attempt to run an inline function. The inline function is not defined (i.e. when the select is changed it tries to find a function called SelectChanged but as it has not been defined you are getting an error).
The example below shows both methods functioning.
// Add a jquery event listener to the element with the id name, listening for any change
jQuery("#name").on("change", function() {
// Print the value of the element
console.log("From JQuery function: " + this.value);
});
// Function that can be called inline using onchange = "SelectChanged(this)"
function SelectChanged(el) {
// Print the value of the inline element
console.log("SelectChanged function: " + el.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="table-font">
<select id="name" onchange="SelectChanged(this)">
<option value="Firstname Surname 1" selected>Firstname Surname 1</option>
<option value="Firstname Surname 2">Firstname Surname 2</option>
</select>
</td>
jQuery("#name").change("#name")
function SelectChanged() {
alert(this.value);
}
Related
I have a form which sends information with post method to another page. In the form I have a select box with three options, for example:
<select name="slctstate" id="slctstate">
<option value="0">aaaaa</option>
<option value="1">bbbbb</option>
<option value="2">ccccc</option>
</select>
In another page, I read the selected item with $_POST['slctstate'], but I want to read all options (key & value) in the select tag.
Can I do this?
First use a jquery function which stores all the options in a string
$(document).ready(function()
{
var myoption = '';
$('#drop_down option').each(function()
{
myoption = myoption + ',' + ($(this).val());
});
$('#hidden_text').val(myoption);
}
);
in the html use a hidden field
<input type="hidden" id="hidden_text" name="hidden_text"/>
WHen you will submit the form, catch this value with a list of options separated by (,);
On the action page, you can split the value using php explode() function
Check the fiddle
http://jsfiddle.net/1u9x5nbq/3/
No you can't without a work-around. The only value gets passed is the selected value. If you want to know all values you can use a work-around in javascript e.g.:
<select name="slctstate" id="slctstate">
<option value="0">aaaaa</option>
<option value="1">bbbbb</option>
<option value="2">ccccc</option>
</select>
//Include JQuery
<script>
$(function()
{
$('#slctstate option').each(function()
{
$('#slctstate').after('<input type="text" value="'+$(this).text()+'" name="slctstateOptions['+$(this).val()+']" style="display:none;" />');
//Where val() is the key and text() is the value.
});
});
</script>
Then you can access the values by using $_POST['slctstateOptions'].
No, you can't do that from the form. When you do submit, you send only selected value(s).
No,
The only value that is "selected" will be POSTed on Submit.
So I am trying to output a dynamically populated dropdown through jquery. The problem is that it just works for one iteration. The script -
<script> $(function()
{
$("#projects").change(function() {
$("#tasks").load("getdata.php?choice=" + $("#projects").val());
});
}); //getdata.php queries data and echoes <option>
//#projects -> <select> id and #tasks->options id
</script>
I know it has something to do with introducing each there, but I cannot seem to get it to work.
This is the div where that is being looped -
foreach($days as $key=>$day) //inside <select id="projects">
{
echo '<td align="center" width="65">
<div>'.$day.'<br><input name="hours" type="text" size="2" placeholder="hours">
<select id="tasks">
<option>Select a Project First</option>
</select>
</div>
</td>';
}
Return from php file will change content of #task
$(document).ready(function(){
$('.#projects').change(function(){
var getdata = 'getdata.php?choice='+$("#projects").val();
alert(getdata);
$('#tasks').load(getdata);
});
})
You need to use .on() for the elements which will come dynamically.
$(document).on('change','#projects',function(){
//code here
});
you need to refresh the dropdown list after you dynamicaaly appen val
//refresh value
$('select').selectmenu('refresh');
//refresh and force rebuild
$('select').selectmenu('refresh', true);
So I figured this one out with a friends help.
Firstly, a very fundamental mistake of mine -
Since <select id="tasks"> field is being looped over for display it is more viable to change id to class.
After that its just comes to changing the #tasks to .tasks and the jscript does the work.
Otherwise each() can also be used to achieve the result like this -
$(".tasks").each(function()
{
$(this).(load)("getdata.php?choice=" + $("#projects").val());
});
I am trying to disable a submit button when one or more of the selectors (generated dynamically) shown in the picture are empty..
I tried the following jQuery code:
<script>
var $submit = $("input[name=store_values]");
$(".ownlevelselect").each(function(){
if($(".ownlevelselect:empty").length>0){
$submit.attr("disabled","disabled");
}else {
$submit.removeAttr("disabled");
}
});
</script>
and these are the relevant parts of my form:
echo "<select class='ownlevelselect' id='ownlevelselect' name='level-".$compi['Competence_ID']."' >";
and the input buttons:
echo "<input type='submit' name='submit_values' value='Save'>";
echo "<input type='submit' name='store_values' value='Store'></form>";
The one I want to disable is the one with name='store_values'
There's something ambiguous in your question, do you mean empty like DOM empty (selects that contains no elements) or empty like selects with an empty value selected ?
If you mean empty like emtpy value, you can try this, handling change event like Shadow Wizard said:
$('document').ready(function(){
var submitButton = $('input[name="store_values"]');
/* Called to disable button on page load, done here but probably possible server-side */
checkValues()
/* Called on change event on dropdowns */
$('select.ownlevelselect').on('change',function(){
checkValues();
});
function checkValues(){
/* Disable button if found an empty <select> (mean, no <option> inside), or a select with an empty value selected */
submitButton.prop('disabled',$(".ownlevelselect > option:selected[value=''],.ownlevelselect:empty").length > 0);
}
});
If you mean empty like "Dom empty" (no option defined inside the select), you can try this (you can place it into a function and call it each time you dynamically add an element)
$('document').ready(function(){
var submitButton = $('input[name="store_values"]');
submitButton.prop('disabled',$(".ownlevelselect:empty").length > 0);
});
EDIT
Be carefull about your IDs, I don't have any relevant part of code to be sure, but you seem to reuse same ID for your selects, which is a bad idea :)
EDIT2
Here's a fiddle, so as you can see if I missed something:
http://jsfiddle.net/d8rb9/
you can use the event onBlur for each select to trigger a function that tests if all the other select are not empty, and then activate the submit button if so.
here is an exemple:
The select Tag :
<select class="ownLevelSelect" onBlur="checkSelects()">
<option></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>
</select>
The Javascript function:
<script>
function checkSelects(){
// integer to count the number of select with a correct value
var nonEmpty = 0;
// loop on all the select in the page with the class attribute : "ownLevelSelect"
$('.ownLevelSelect').each(function(){
if($(this).val()) {
nonEmpty++;
}
});
//desactivate the submit button if the number of selects in the page <> nonEmpty
($('.ownLevelSelect').length == nonEmpty)? $('#theSubmit').removeAttr("disabled") : $('#theSubmit').attr("disabled","disabled");
}
</script>
and maybe you need to call this function on page load so the button is disabled by default if one of the fields are empty
<script>
$(document).ready(function() {
checkSelects();
});
</script>
Note :
The ID attribut must be unique on the page, so in your code change this :
<select class='ownlevelselect' id='ownlevelselect' name='level-".$compi['Competence_ID']."' >";
By this :
<select class='ownlevelselect' id='ownlevelselect-".$compi['Competence_ID']."' name='level-".$compi['Competence_ID']."' >";
I hope this helped.
I have a drop down list (ddlAccount) which i can choose an item from it and do a db query in test.php to retrieve corresponding data, then output an input element with the returned data.
This is my javascript code:
function load1(){
$('#divAccountNum').load('test.php?accountInfo=' + document.getElementById('ddlAccount').value , '' ,function() {
alert('Load was performed.')});
}
load1 function called when i change the dropdown list items, and it takes the value of the selected option and sends it to test.php in a parameter called "accountInfo".
my html:
<select name="ddlAccount" id="ddlAccount" onchange="load1();">
<option value="1"> Account1</option>
<option value="2"> Account2</option>
<option value="3"> Account3</option>
</select>
<div id="divAccountNum" >
</div>
And test.php :
if($_GET['accountInfo'])
{
$account = $accountDAO->load($_GET['accountInfo']); //mysql query
//print an input holding account number as its value
echo "<input type='text' name='txtAccountNum' id='txtAccountNum' value='".$account->accountnumber."'/>";
}
The problem is that nothing happened when i choose an option (nothing appear in div (divAccountNum))
Any suggestions? Thanks in advance.
Edit:
I used #thecodeparadox 's bit of code and it works and i found a solution for the problem that i mentioned in the comments below which is that when choosing one item from the dropdown list it shows the value in input element and loads the form again. The solution is in:
jQuery Ajax returns the whole page
So my jquery code now looks like:
$(document).ready(function(){
$('#ddlAccount').on('change', function() {
$.get('testJquery.php?accountInfo=' + $(this).val(), function(accountNum) {
//console.log(accountNum);
$('input#txtAccountNum').val(accountNum);
});
});
And testJquery.php :
if($_GET['accountInfo'])
{
$account = $accountDAO->load($_GET['accountInfo']);
$accountNum = $account->accountnumber;
echo $accountNum;
}
And at last i added input element in divAccountNum which has id="txtAccountNum"
Though you don't give enough info about your problem, but you can try this:
function load1(){
$('#ddlAccount').on('change', function() {
$.get('test.php?accountInfo=' + $(this).val(), function(response) {
$('div#divAccountNum').html(response);
}, 'html');
});
}
NOTE:
$('#ddlAccount').on('change', fires when dropdown change
$.get('test.php?accountInfo=' + $(this).val().. send a get(ajax) request to test.php with value selected from drop down
parameter response with in $.get() second parameter callback function is the response from the server
'html' as third parameter of $.get() for data type you return, as you return a html so it is html.
for more info read:
change()
$.get()
To get selected option value from select input use:
$('#ddlAccount option:selected').val()
I am working in the confines of a CMS system, which defines certain fields which can be used to make forms for use within the application in PHP.
The list function has the signature:
function inputBasicList ($id,$value = "",$list = array(), $displayName = NULL, $displayLabel = true)
I use it thusly:
$theinput = new inputBasicList("type",$therecord["paymenttype"],array("Cash"=>"cash","Credit"=>"credit"), "Payment Type");
Likewise, there is a checkbox, which has the signature:
function inputCheckbox($id,$value = false, $displayName = NULL, $disabled = false, $displayLabel = true)
I use it thusly
$theinput = new inputCheckbox("paid", $therecord["paid"], "Paid");
What I would like to do, is if the list is set to credit instead of the default cash, to automatically set the checkbox to true/checked.
I don´t think the CMS system allows a way to do this using any built in functions, and am wary of adding any javascript.
Is such a thing possible with just PHP?
Otherwise, how complicated would the javascript have to be to do such a thing?
edit:
The generated HTML from the phpBMS forms
<p class="big"><label for="type" class="important">Payment Type</label>
<br />
<select name="type" id="type" class="important" >
<option value="cash" >Cash</option>
<option value="credit" >Credit</option>
</select>
</p>
<p class="big">
<input type="checkbox" id="paid" name="paid" value="1" class="radiochecks" />
<label id="paidLabel" for="paid" >Paid</label>
</p>
It's not possible to do such thing with PHP only, because PHP is run on your server. You need some code that is run on the client.
I believe that the first paramater $id is used as id attribute for the elements? If I'm wrong correct me. If so you can do the following using the jQuery JavaScript Library:
jQuery(function($){
$('#type').change(function(){
if ($(this).val() == "credit") {
$('#paid').attr('checked','checked');
} else {
$('#paid').removeAttr('checked');
}
});
});
UDPATE
BMS is using Mootools, the JavaScript should like like this to work in mootools:
window.addEvent('domready', function(){
$('type').addEvent('change',function(){
if($(this).get('value') == 'credit') {
$('paid').set('checked','checked');
} else {
$('paid').removeProperty('checked');
}
});
});
I would recommend using the mootools version of this snippet, but just for your interest, if you want to install jQuery, you can add the jquery.js into phpbms/common/javascript. Then you can edit phpbms/header.php to include this:
after the last $tempjsarray[] add:
$tempjsarray[] = "common/javascript/jquery.js";
then after $phpbms->showJsIncludes(); you need to include this, so jQuery works without problems besides mootools:
echo '<script type="text/javascript">jQuery.noConflict();</script>';
If this doesn't work, you should post what the html output looks like.
It should be fairly easy in the javascript . You can attach an event listener on the onchange function of the list and set the value of checkbox in that function .