0

I have a XML call that populates a div of 3 input boxes. The data isnt the problem but the JS that formats the input box into 2 decimal places onblur.

I dont have any problem with this before when the input box and the JS are inline. But now that the input boxes are generated by php thru XML, the script doesnt seem to work.

class clear on inputbox3 (name="price_edit") doesnt work. The function clear should activate onblur of inputbox and formats the input as 2 decimal places.

what am I missing?

<div id="info_div" style="float: left;">

</div>

<script>
    function showDescript(str) {
        var xhttp;    
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {
            document.getElementById("info_div").innerHTML = this.responseText;
        }
};  
  xhttp.open("GET", "dropdown.php?q="+str, true);
  xhttp.send(); 
}
</script>

<script>
  $(".clear").blur(function() {
    var num = parseFloat($(this).val());
    var cleanNum = num.toFixed(2);
    $(this).val(cleanNum); 
});
</script>


<?php
session_start();
include '../dbh.php';


$q = $_REQUEST["q"];

$sql = "SELECT * FROM sc_item_master WHERE name='$q'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();

echo "<input type='text' value='".$row['descript']."' style='width: 409px;' name='descript_edit'>";
echo "<input type='text' value='".$row['currency']."' style='margin-left: 3px; width: 83px; padding-left: 3px;' name='currency_edit'>";
echo "<input type='number' name='price_edit' placeholder='price' step='.01' class='clear' style='margin: 0 3px; width: 142px;'>";
?>
bongoloids
  • 19
  • 5
  • You need to put the jQuery code inside `$(document).ready()`. – Barmar Jan 26 '18 at 03:15
  • why not just format it the way you want serverside? – ArtisticPhoenix Jan 26 '18 at 03:16
  • @ArtisticPhoenix He wants the user to see the formatted value when they're filling in the form. – Barmar Jan 26 '18 at 03:18
  • 1
    Also, if you're recreating these inputs with AJAX, you need to use event delegation. See [Event binding on dynamically-created elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Barmar Jan 26 '18 at 03:19
  • @Barmar doesnt work. but thanks for the reply – bongoloids Jan 26 '18 at 03:19
  • Try using `on` while attached to a parent element. `$(body).on('blur', 'input[type="text"]', function(e){ ... });` FYI on is event delegation, the event handler is attached to `body` in my example, but it fires on `'input[type="text"]'` blur event. Basically you cant attach the event directly as the elements don't exist yet. – ArtisticPhoenix Jan 26 '18 at 03:20
  • @Barmar I will check this event delegation. Im kinda new to ajax thanks sir. – bongoloids Jan 26 '18 at 03:22
  • @bongoloids Edit the question and add what you tried after reading those two other questions. – Barmar Jan 26 '18 at 03:22
  • still trying it out atm. Im getting all this stuff. That the reason it doesnt work because the input box doesnt exist yet. But I have adjusted the script to just before the closing body tag..I have tried to place it inside $(document).ready(). I have tried to use na on('blur'). still doesnt work and whats more confusing for me is that another script works. Only the number format doesnt. – bongoloids Jan 26 '18 at 03:35
  • this scrpit works – bongoloids Jan 26 '18 at 03:36
  • thanks for all your contributions and comments. I was able to fix this by creating a new script for that input and calls it onblur – bongoloids Jan 26 '18 at 05:29

0 Answers0