I have a textarea where I will load the term respective to the value of my select. I'm loading the content to the textarea using .load("load_myinvoices_default_terms.php?id="+id). I can load the content successfully. But when I'm to type on the textarea and then change the selected option, the .load() function wont load anymore.
My hunch is that when I type on the textarea it is put on the value, while on I use the .load it is put on the html.
I just want to be able to type on the textarea and still be able to change it's value when I change the selected option.
invoice.php:
<select id="setDefaultTermSelection" name="invoice_term_id" onChange="load_myinvoices_default_terms();">
<option value="0">Set as new term</option>
<option value="1">Term 1</option>
<option value="2">Term 2</option>
</select>
<textarea id="default_terms" name="invoice_terms" placeholder="Enter your terms and conditions" rows="5"></textarea>
script:
<script type="text/javascript">
function load_myinvoices_default_terms()
{
var id = $("#setDefaultTermSelection").val();
$("#default_terms").load("load_myinvoices_default_terms.php?id="+id);
}
$("#default_terms").keyup(function(e)
{
$("#setDefaultTermSelection").val(0);
});
</script>
load_myinvoices_default_terms.php:
<?php
include ("includes/connection.php");
$id = $_REQUEST['id'];
if($id > 0)
{
$query = "SELECT * FROM terms WHERE user_id = $_SESSION[user_id] AND term_id = $id";
$selectQuery = mysqli_query($con,$query);
$row = mysqli_fetch_array($selectQuery);
echo $row['term_description'];
}
else
echo "";
?>
What's happening is that, when you set your select value programmatically like this: $("#setDefaultTermSelection").val(0);, the event change is not triggered.
onchange only triggers when the user clicks. From MDN:
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
But, you can trigger the change manually ("simulating" user click) with the jQuery's trigger() method. Something like this:
$("#setDefaultTermSelection").val("0");
$("#setDefaultTermSelection").trigger("change");
Or (one line):
$("#setDefaultTermSelection").val("0").change();
In the last example, .change() is an alias for .trigger("change")
Some points:
The value inside <option> tag is a string. So, you should set the value with .val("0");.
The event according to specification is actually onchange, and not onChange (capital "C"). However, modern browsers actually accept both ways.
I've solved the problem.
First, I've put these on my script as mrlew suggested.
$("#setDefaultTermSelection").val("0");
$("#setDefaultTermSelection").trigger("change");
then on the load_myinvoices_default_terms.php:
<?php
include ("includes/connection.php");
$id = $_REQUEST['id'];
if($id > 0)
{
$query = "SELECT * FROM terms WHERE user_id = $_SESSION[user_id] AND term_id = $id";
$selectQuery = mysqli_query($con,$query);
$row = mysqli_fetch_array($selectQuery);
$x = $row['term_description'];
json_encode($x);
}
else
echo "";
?>
<script>
var ar = <?php echo json_encode($x) ?>;
$("#default_terms").val(ar);
</script>
tho there are more efficient ways of solving this, so please let me know, thanks :)
Related
Hello I want to achieve is to make "Select Form HTML" dynamic using JavaScript, What I mean by that is I expect every time I select a dropdown must be selected the value that I set to that tag.
The data from tag is from database I loop the data using php
ex. 1 src: Get selected value/text from Select on change
This example is 100% working correct but what I need is not to get the value but to assign like sample below next example 2
function handleSelectChange(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
<select onchange="handleSelectChange(event)">
<option value="1">one</option>
<option value="2">two</option>
</select>
ex 2 Those function will alert or run everytime I select/Click each of them F1 or F2
<table>
<tr>
<td onclick="myFunction1()">F1</td>
<td onclick="myFunction2()">F2</td>
</tr>
</table>
<script>
// Function 1 will run when I click the F1
function myFunction1() { alert('myFunction1'); }
// Function 2 will run when I click the F2
function myFunction2() { alert('myFunction2'); }
In example 1 As you can see the first example select form html will grab the the value of option tag, right?.
Now In example number 2 it will run the function when I click each of the F1 or F2
So what I need to the program is pass a value from my database to my javaScript function and run it like in alert or example 1 but in "Select tag" HTML version
ex. 3 Here's my query
<form action="">
<select name="customers" id="myId" class="form-control">
<option value="">Select a customer:</option>
<?php
$user_id = 1;
$sql = "SELECT * FROM `myTable` WHERE user_id = '$user_id' Order by create_at DESC";
$result = $mysqli->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc())
{ ?>
<!-- appsFunction('<?php echo $row['colName2']; ?>') << will be the value that should run in console.log -->
<option value="<?php echo $row['id']; ?>" onclick="appsFunction('<?php echo $row['colName2']; ?>')"><?php echo $row['colName1']; ?></option>
<?php }
} else { return false; }
?>
</select>
</form>
ex. 3 part 2 javascript
<script>
function appsFunction(passVar) {
colose.log(passVar);
}
</script>
As you can see in my first example a "Select Tag" HTML when I select dropdown it returns to me a value right?, in second example when I click F1 or F2 it will run the function then return alert, What I need here is When I select the dropdown it will accept the value I pass in function "appsFunction(passVar)" appsFunction('<?php echo $row['colName2']; ?>') from select tag which the value is from my database.. so I need help idea how to do that properly..
NOTE: The function must be run when I select the dropdown, the function must be accept the value I set which from my database it's like totally example number 2 but in Select tag HTML version not just text or html table.
Thanks in advance for solving my problem.
If you register an event handler on the select element itself that listens for change events you will be able to process the selected OPTION and access any value/property associated with it. You cannot assign an event handler directly to an OPTION element as you are trying to do here. You can add as many dataset attributes as you need to the OPTION elements however which you can easily access in the Javascript event handler.
If the value you pass into the SQL statement is to be dynamic ( from a GET or POST request most usually ) you really need to use a Prepared Statement to help mitigate SQL Injection attacks.
As your select menu is making use of only 3 columns from the mytable table you should limit the returned fields to those columns which in turns helps when using a Prepared Statement as you can easily assign the results as variables.
<form name='geronimo'>
<select name="customers" class="form-control">
<option selected hidden disabled>Select a customer:
<?php
$user_id = 1;
$sql="select `id`, `colName1`, `colName2` from `mytable` where user_id = ? order by create_at desc";
$stmt=$mysqli->prepare($sql);
$stmt->bind_param('s',$user_id);
$res=$stmt->execute();
if( $res ){
$stmt->bind_result($id,$col1,$col2);
while( $stmt->fetch() ){
printf('<option value="%s" data-col="%s">%s', $id, $col2, $col1 );
}
$stmt->free_result();
$stmt->close();
}
?>
</select>
</form>
<script>
document.forms.geronimo.customers.addEventListener('change',function(e){
let id=this.value;
let col2=this.dataset.col;
let col1=this.options[this.options.selectedIndex].text;
alert( id + ' ' + col2 + ' ' + col1 )
});
</script>
As i mention on the question, i want to update one select box if another value in the another select box is selected.
for example:
<select id="makale" size="4"name="formMakale"style="height:7em;width:16em;border:0px;outline:0px;font-size:16px;padding-left:10px;" >
<?php
$authorsQuery = $hb->authors();
foreach($authorsQuery as $v){
echo '<option value="'.$v->id.'">'.$v->name.'-'.count($hb>aticlesbyauthor($v),1000).' yazi</option>';}
?>
</select>
<select id="kategoriSec" size="4" name="formCat"style="height:7em;width:16em;border:0px;outline:0px;fontsize:16px;padding-left:10px;" >
<?php
$catQuery = $hb->db->get_results("SELECT * FROM category");
foreach ($catQuery as $v) {
echo '<option value="'.$v->id.'">'.$v->name.'</option>';
}
?>
if i select something from this select box with id makale, i want to update the options of the select box with id kategorisec.
can you help me?
Thank you.
If you just want to change it on the browsers side, use the onchange event handler.
If you want to update the checkboxes based on server data, you could use ajax or simply use an iframe:
<input onclick="update(this)">
<iframe src="checkboxes.php">Oh ,update your browser</iframe>
<script>
function update(elem){
if(elem.selected){ iframe=document.getElementsByTagName("iframe")[0]
iframe.src="checkboxes.php?select="+elem.value;
}
}
</script>
I've made a select list and filled it with info from a DB. Now i'm trying to make it so whenever you select a different item in the list it calls a javascript function that checks if the selected item/entity (or whatever it's supposed to be called) has a comment or not, and reacts accordingly.
So far I have this, which does work, and only shows the paragraph if the ID of the selected item sent is over 5. However, I don't know how to send the comment that is in the query as the parameter, so that it can then check the length and react.
This is what I have so far:
// Create connection
$conn = mysql_connect("localhost", "root", "admin")
or die("Could not connect: " . mysql_error());
// Selecting the DB
mysql_select_db("tickets") or die("Could not connect: " . mysql_error());
$query = mysql_query("SELECT * FROM tickets order by ID");
$numrows = mysql_num_rows($query);
//I want to change this.value to be the selected item's comment
echo '<select name="Tick" size='.$numrows.' onChange="checkSelectedValue(this.value)">';
while ($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['ID'].'">Comment: '.$row['comments'].' </option>';
}
echo '</select>';
echo '<p id="commentNotifier" style='display:none;'> Selected item has a comment. </p>';
How would I modify this so the parameter of onChange="checkSelectedValue(this.value)" would be the selected item's comment instead of this.value which is, in my case, the ID.
Note that I don't want to change the value of each option to be comments instead of ID.
This is the javascript functon that works with the ID sent, and if it is over 5 it shows the paragraph that's otherwise hidden:
<script type="text/javascript">
function checkSelectedValue(val){
var element=document.getElementById('commentNotifier');
if(val > 5) //I would change this to val.length > 0 to check if comments exists or not
element.style.display='block';
else
element.style.display='none';
}
</script>
Pretty straightforward function. Cheers in advance!
In a pure javascript solution the best answer of this stack would helps : Get selected value in dropdown list using JavaScript?
You can use this to select the comment from the dropdown:
$('#mySelect').find(":selected").text()
But it requires you to use jQuery
Working fiddle: https://jsfiddle.net/b1qjw214/
In pure javascript:
function findElem() {
var elem = document.getElementById("mySelect");
var elemTxt = elem.options[elem.selectedIndex].text;
}
Fiddle: https://jsfiddle.net/dsy3tgmy/
Use data-* attributes and instead of this.value, pass this as argument so that you can deal with element and all its attributes.
Element.dataset returns the object of all the data-* attributes of the element
Try this:
function checkSelectedValue(elem) {
console.log('Value: ' + elem.value);
console.log('Comment: ' + elem.options[elem.selectedIndex].dataset.comment);
}
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<select onChange="checkSelectedValue(this)">
<option data-comment='Comment goes here' value="volvo">Volvo</option>
<option data-comment='Comment goes here' value="saab">Saab</option>
<option data-comment='Comment goes here' value="mercedes">Mercedes</option>
<option data-comment='Comment goes here' value="audi">Audi</option>
</select>
I have a problem that it's been haunting me for a few days already, I have a dynamic select field where the user pick an ingredient from the DB and if he wants to add more ingredients he just click on 'Add' button and another select field is created, all select fields show its name and price(as text) and there's an input text field( basePrice) that should have the sum of every select created
Select field
<select name="ingredienteId[]" id="ingredienteId" onchange="DoMath()">
<?php foreach($ingredientes as $ingrediente) {
$essaEhATorta = $torta['ingredienteId'] == $ingrediente['id'];
$selecao = $essaEhATorta ? "selected='selected'" : "";
?>
<option value="<?=$ingrediente['id']?>" <?=$selecao?>>
<?=$ingrediente['nome']?> <?=$ingrediente['price']?>
</option>
<?php } ?>
</select>
Dynamic select field
$('#add').click(function() {
var newSelect = $('<label>Ingrediente</label> <select name="ingredienteId[]" id="ingredienteId" class="form-control"> <?php foreach($ingredientes as $ingrediente) {$essaEhATorta = $torta["ingredienteId"] == $ingrediente["id"];$selecao = $essaEhATorta ? 'selected="selected"' : "";?> <option value="<?=$ingrediente["id"]?>" <?=$selecao?>><?=$ingrediente["nome"]?><?=$ingrediente["preco"]?> </option><?php } ?> </select>')
$('#notas').append(newSelect);
});
basePrice input text field
<input class="form-control" type="text" value="<?=$torta['precoBase']?>" name="precoBase" id="basePrice"/>
As I said before, the select option has the name/price of the product as text, <?=$ingrediente['nome']?><?=$ingrediente['price']?>, so as I only wanted the price I came up with this code:
DoMath()
function DoMath(){
var e = document.getElementById("ingredienteId");
var finalPrice= e.options[e.selectedIndex].text;
var noLetterPrice = finalPrice.replace(/[^0-9,"."]/g,'');
var result = parseFloat(noLetterPrice);
document.getElementById("basePrice").value = result;
View
Part of my code is in portuguese but I hope u guys understand
As you can see the conversion part works but I have no idea how to make the sum part work, I have tried a few things but nothing seems to work
Instead of taking value and find price using regex will create issue when options names contains some digital values.
In Jquery we can provide any custom attribute to any field.So take that price in one of custom attribute in option.It will be very easy.
Just try below code
Select Field HTML Structure
<input type="button" name="add" id="add" value="Add" />
<input class="form-control" type="text" value="0" name="precoBase" id="basePrice"/>
<div id="notas">
<div id="ing_div">
<label>Ingrediente</label>
<select name="ingredienteId[]" class="baseingredient">
<option value="" ing-price="0"> Select Price</option>
<?php
foreach ($ingredientes as $ingrediente) {
$essaEhATorta = false;
$selecao = $essaEhATorta ? "selected='selected'" : "";
?>
<option value="<?= $ingrediente['id'] ?>" <?= $selecao ?> ing-price="<?= $ingrediente['price'] ?>">
<?= $ingrediente['nome'] ?> <?= $ingrediente['price'] ?>
</option>
<?php } ?>
</select>
</div>
</div>
In above HTML i have taken Price in ing-price attribute.
Javascript Code
<script>
$(document).on("click",'#add',function() {
var newSelect = $('#ing_div').clone();
newSelect.find("select[name='ingredienteId[]'").val();
$('#notas').append(newSelect);
});
$(document).on("click",".baseingredient",function(){
tot=0;
$(".baseingredient").each(function(){
tot+=parseFloat($(this).find("option:selected").attr("ing-price"));
})
$("#basePrice").val(tot);
});
</script>
You should use .on() instead of .click() and onchange, like this:
$(document).on('click','#add',function(){
var newSelect = $('<label>Ingrediente</label> <select name="ingredienteId[]" id="ingredienteId" class="form-control"> <?php foreach($ingredientes as $ingrediente) {$essaEhATorta = $torta["ingredienteId"] == $ingrediente["id"];$selecao = $essaEhATorta ? 'selected="selected"' : "";?> <option value="<?=$ingrediente["id"]?>" <?=$selecao?>><?=$ingrediente["nome"]?><?=$ingrediente["preco"]?> </option><?php } ?> </select>')
$('#notas').append(newSelect);
});
$(document).on('change','#ingredienteId',function(){
// calculate sum of every select fields
});
The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().
From the documentation of .on():
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.
You can use each() inside your script, which totals the cost of ingredients, when a select field has been changed.
We have to assign first class tag for your select inputs.
<select class="ing" .....
Have it also to the "to be appended" select inputs.
var newSelect = $('<label>Ingrediente</label> <select class="ing" .....
Using each(), we can run through all the select fields that has class tag of ing:
$(document).on("change", ".ing", function(){ /* WHEN A SELECT FIELD HAS CHANGED */
var total = 0;
$('.ing').each(function() { /* RUN ALL SELECT FIELD */
total = total + parseInt($(this).val()); /* SUM UP ALL */
});
$("#basePrice").val(total); /* CHANGE THE VALUE OF BASE PRICE FIELD */
});
I prefer having
$(document).on("change", ".ing", function(){
rather than your previous
function DoMath(){
function due to the dynamically appended select fields.
Here is a jsfiddle (example) that you can look up to.
I am trying to make an html select box which dynamically disables and enables based on what the user select in a different select box... This was working fine when I used just html, but I would like to use the jQuery plugin Chosen for this, and it is not working... The main thing I need dynamic chosen to be disabled or enabled based on the onchange for the other select box. Is this possible with chosen? And how? Thanks so much.
Old Code : Working
<script>
function myDisable() {
a=1;
b=3;
for (i=1;i<3;i++){
posi=a+b*i;
document.getElementById('drop'+posi).disabled = true;
} }
</script>
New code with PHP : Not Working
<script>
function myDisable() {
a=<?php echo $angka; ?>; // a variable number for id select box
b=<?php echo $fields; ?>; // b variable number of many fields table
j=<?php echo $jp; ?>; // j variable number of select boxes that will disable
for (i=1;i<j;i++){
posi=a+b*i;
document.getElementById('drop'+posi).disabled = true;
} }
</script>
PHP select box looping +/- 50 :
<select name="modul[]" id="drop<?php echo $angka ?>" onchange="fetch_select<?php echo $random ?>(this.value); check(this); myDisable();">
<option value="0">Lanjutan</option>
<?php
include 'include/conn.php';
$select=mysql_db_query(#$db,"select nama_modul,jp from modul where nama_pelatihan='$nama_pelatihan'",#$koneksi);
while($row=mysql_fetch_array($select))
{
$jp=$row['jp'];
echo "<option value='".$row['nama_modul']."'>".$row['nama_modul']."(".$row['jp'].")</option>";
}
?>
</select>
Try executing a call to $("#form_field").trigger("chosen:updated"); after the for loop just before exiting the myDisable() function. In your case #form_field will be some selector that identifies your html select box element. Chosen might need to redraw itself to reflect the updated options and this is how we can tell it to do that.