have javascript trigger on onchange and on load - javascript

I have a javascript which currently gets called using the 'onchange' event.
<SELECT NAME="person<?PHP echo $i; ?>" id="person<?PHP echo $i; ?>" onchange="get(<? echo $i; ?>);">
This select input replies on me having chosen a selection from the drop down list. if the page is loaded and the select has a 'selected' attribute so that a selection is preloaded, the javascript is not called. How can I change this so that the script will be called on load for the existing selection and on change should the user change the option?
this does not work:
<SELECT NAME="person<?PHP echo $i; ?>" id="person<?PHP echo $i; ?>" onchange="get(<? echo $i; ?>);" onload="get(<? echo $i; ?>);">
Thanks for the help.

<SELECT NAME="person<?PHP echo $i; ?>" id="person<?PHP echo $i; ?>" onchange="get(<? echo $i; ?>);">
select does not have onload event. you can call onload function on body tag,
<body onload="get(<? echo $i; ?>);">
But for this function to work $i should be defined before body tag ,otherwise it will return a undefined error.

Its not working because SELECT doesnot have onload event. Use it in windows onload instead. BTW where $i comes from
<script>
window.onload=function(){
get(<? echo $i; ?>);
}
</script>

I would have used jQuery
jQuery(document).ready(function($) {
$('select').each(function() {
$(this).change(function(){
myFunction();
});
});
myFunction();
});

Related

How to disable an input in HTML/PHP

How to disable an input and enable through button click if the ID is something like this id="qty_<?php echo $x; ?>" not a normal id="qty"
<input type="number" name="qty[]" min="0" id="qty_<?php echo $x; ?>" class="form-control" required onclick="getTotal(<?php echo $x; ?>)" onkeyup="getTotal(<?php echo $x; ?>)" value="<?php echo $val['qty'] ?>" autocomplete="off">
javascript - how to use this kind of id? id="qty_<?php echo $x; ?>
function enablebutton(){
$('*#my_field').prop( "disabled", false );
}
the normal id like id="qty" is working but i need the solution on how to use this kind of id id="qty_<?php echo $x; ?>" when enable/disable an input
Assuming that you have the following button:
<input type=button value="Disable" onclick='javascript:disablebutton(<?php echo $x; ?>)'>
Then the JS function to disable the element with id ="qty_<?php echo $x; ?> will be
function disablebutton(var1){
$('#qty_' + var1).prop( "disabled", true );
}
Note: for enablebutton, it will be
function enablebutton(var1){
$('#qty_' + var1).prop( "disabled", false );
}
So, put them all together, will be like
<script
src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"></script>
<?php $x=1; ?>
<input id="qty_<?php echo $x; ?>" value=10>
<input type=button value="Disable" onclick='javascript:disablebutton(<?php echo $x; ?>)'>
<input type=button value="Enable" onclick='javascript:enablebutton(<?php echo $x; ?>)'>
<script>
function disablebutton(var1){
$('#qty_' + var1).prop( "disabled", true );
}
function enablebutton(var1){
$('#qty_' + var1).prop( "disabled", false );
}
</script>
You may click this sandbox to see the effect:
http://www.createchhk.com/SOanswers/testSO26Nov2022.php
Of course in practice, you may have multiple input boxes with multiple buttons, so changing the $x value dynamically (e.g use the database key) will be the usual way to do it.

how can i concatenate string and variable in jquery selector?

<?php
for($i=0;$i<5;$i++){
?>
<button id="text<?php echo $i; ?>">hello </button>
<script>
var i=<?php echo $i; ?>;
$(document).ready(function(){
$("#text"+i).click(function(){
alert("hello");
})
})
</script>
<?php } ?>
If I have a varying id like this and I want to call it in jQuery using this code its give me no result. Where is the problem? How can I call an element like this button?
Would be better to move the script out of the loop, get the buttons all at once and then bind the click event:
// Create all buttons, with class "text-button"
<?php for($i=0;$i<5;$i++): ?>
<button class="text-button" id="text<?php echo $i; ?>">hello </button>
<?php endif; ?>
<script>
// On document ready
$(document).ready(function() {
// Find all buttons with class "text-button"
$(".text-button").click(function(e) {
alert("hello");
// Log the clicked button
console.log(e.currentTarget);
console.log(e.currentTarget.id);
})
})
</script>
I am satisfied with #Emre's answer. And also remove $(doucment).ready() will solve your problem. Like this.
<?php
for($i=0;$i<5;$i++){
?>
<button id="text<?php echo $i; ?>">hello </button>
<script>
var i=<?php echo $i; ?>;
$("#text"+i).click(function(){
alert("hello");
});
</script>
<?php } ?>

How to set value of input field on select from form created using loop

I need to set value of text box on change from select box created using jquery
<?php for($i=0;$i<5 ;$i++) { ?>
<select id="<?php echo 'aaa'.$i ?>" class="<?php echo 'aaa'.$i ?>">
<?php for($i=0;$i<5 ;$i++) { ?>
<option value="1112" data-xyz="dynamic_value " data-abc="dynamic_value">dynamic_value</option>
</select>
<input type="hidden" class="<?php echo 'bbb'.$i ?>" id="bbb" name="<?php echo 'bbb'.$i ?>"/>
<input type="hidden" class="<?php echo 'ccc'.$i ?>" name="<?php echo 'ccc'.$i ?>" id="ccc" />
<?php } ?>
<?php } ?>
<script>
$('.aaa').change(function () {
var otherValue=$(this).find('option:selected').attr('data-xyz');
var someOtherValue=$(this).find('option:selected').attr('data-abc');
$('.bbb').val(otherValue);
$('.ccc').val(someOtherValue);
});
</script>
How to change value class bbb0-bbb5 in jquery without using loop in jquery
Do not update the class names in php-loop, classes need not be unique.
To select input:hidden elements, no need to specify ID attribute
$('.aaa').change(function() {
var otherValue = $(this).find('option:selected').attr('data-xyz');
var someOtherValue = $(this).find('option:selected').attr('data-abc');
$(this).siblings('.bbb').val(otherValue);
$(this).siblings('.ccc').val(someOtherValue);
});
<?php for($i=0;$i<5 ;$i++) { ?>
<select id="<?php echo 'aaa'.$i ?>" class="aaa">
<?php for($i=0;$i<5 ;$i++) { ?>
<option value="1112" data-xyz="dynamic_value " data-abc="dynamic_value">dynamic_value</option>
</select>
<input type="hidden" class="bbb" name="<?php echo 'bbb'.$i ?>" />
<input type="hidden" class="ccc" name="<?php echo 'ccc'.$i ?>" />
<?php } ?>
<?php } ?>

Updating input form after updating a table using jquery or ajax

I have this table i've built with jquery and ajax (watching some tutorials, so i'm not an advanced programmer). Well, what i do is i insert some values in a table and i need to get all the sum of this values in an input form.
I can do that, but what i need is to get the sum without refreshing the page, so anytime i enter:
200 in the Value column, the Sum should become :
Sum + 200
Please i need some help with what to do, i've searched for datagrid, but sincerely i don't know how can i do it.
Thanks
Php code of the input :
<table class="vlera">
<tr id="<?php echo $id; ?>" class="edit_tr">
<td class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $kodi; ?></span>
<input type="text" value="<?php echo $kodi; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="last1_<?php echo $id; ?>" class="text"><?php echo $pershkrimi_pjeses; ?></span>
<input type="text" value="<?php echo $pershkrimi_pjeses; ?>" class="editbox" id="last_input1_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $vlera; ?></span>
<input type="text" value="<?php echo $vlera; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="last2_<?php echo $id; ?>" class="text"><?php echo $kosto; ?></span>
<input type="text" value="<?php echo $kosto; ?>" class="editbox" id="last_input2_<?php echo $id; ?>"/>
</td>
</tr>
<?php
}
?>
</table>
<?php
$sql_shuma="SELECT SUM(vlera) AS shuma FROM servis_pjeset_perdorura WHERE random=$random";
$resultshuma = odbc_exec($connection, $sql_shuma) or die(odbc_error());
while( $rowshuma = odbc_fetch_array($resultshuma ) ) {
$total1 = $rowshuma['shuma'];
}
?>
<label for='shuma'>Shuma:</label>
<input id="shuma" name="shuma" type="text" value=" <?php echo $total1;?>" size="20" />
the code you posted doesn't really show the full format (what the inputs look like)... but if you do something like:
$(".values").keyup(function() {
var sum = 0;
$(".values").each(function(){
sum += Number($(this).val());
});
$("#shuma").val(sum)
});
and each of your text inputs you want to go towards the total sum has a class of "values" on it, it should work. http://jsfiddle.net/NNbtk/
try this code... This code get the value of the text box when value enter and add it to the sum.
$(document).ready(function(){
$('#shuma').keyup(function(){
var val=$('#shuma').val();
sum=sum+val;
});
});
just put this code inside another php file...say abc.php
<?php
$sql_shuma="SELECT SUM(vlera) AS shuma FROM servis_pjeset_perdorura WHERE random=$random";
$resultshuma = odbc_exec($connection, $sql_shuma) or die(odbc_error());
while( $rowshuma = odbc_fetch_array($resultshuma ) ) {
$total1 = $rowshuma['shuma'];
}
echo $total1;
?>
Then from the main page do the following call on a button lets say button1
$(document).ready({
setInterval(function(){
$.ajax({
url: 'abc.php',
type: "POST",
success: function(contents){
$('#shuma').val(contents);
}
});
}, 1000);
});
Now the explanation:
In the main page when document gets ready, setInterval method of javascript will be called which takes 2 parameters, code and delay time in ms. this code will call the abc.php after every 1 sec and check the db for the new value and return it and put it in the field.
Hope that was what you were looking for.

How to add tags/images on javascript fetched textarea data?

I have this javascript function that puts a double --- quote ---- which people can use on the site. My goal is to replace the ---quote--- with a image or a blockquote (styled with CSS) that I already have. So if someone clicks on the button, they have to get a quote image or blockquote, which would be visible on the textarea. The problem is that I can't get it working.
<input type="button" onclick="hen('d','--- (<? echo $language[quote2] ?>: <? echo $language[quote] ?>) ---\n\r','\n\r--- (<? echo $language[quote2] ?>: <? echo $language[quote] ?>) ---\r')" value="- <? echo $language[quote] ?> -" />
This is what I tried for example, which did not show the button anymore.
<input type="button" onclick="hen('d','--- (<blockquote id="entry"><? echo $language[quote2] ?>: <? echo $language[quote] ?></blockquote) ---\n\r','\n\r--- (<? echo $language[quote2] ?>: <? echo $language[quote] ?>) ---\r')" value="- <? echo $language[quote] ?> -" />
How can I make it work my friends?
Well, I can tell you why the button is disappearing at least. You're breaking out of the onclick attribute by listing the blockquote id within double quotes. Try this and see where it gets you:
<input type="button" onclick="hen('d','--- (<blockquote id=\'entry\'><? echo $language[quote2] ?>: <? echo $language[quote] ?></blockquote) ---\n\r','\n\r--- (<? echo $language[quote2] ?>: <? echo $language[quote] ?>) ---\r')" value="- <? echo $language[quote] ?> -" />
Although if you're trying to insert HTML elements into a Textarea, I do not believe that is possible. You may want to try using a <div contenteditable="true"></div> instead (of course, that will only work in browsers that support the contenteditable attribute.

Categories

Resources