PHP textarea combined with select change and .load() function

Question

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 "";
?>

I've also tried putting this inside load_myinvoices_defaul_terms(): $("#default_terms").val($("#default_terms").html()) but something is still off. — Christopher
– Christopher, Commented Feb 15, 2017 at 3:37

luiscrjr · Accepted Answer · 2017-02-15 03:55:54Z

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 was thinking is there some jquery code that could queue the scripts in order? like: 1. $("#default_terms").load("load_myinvoices_default_terms.php?id="+id); 2. alert($("#default_terms").val()); executes #2 only after #1 has been done?
.load accepts a complete callback as second argument: .load(url, function() { /* code to run when load is complete */ });.

Christopher · Accepted Answer · 2017-02-15 05:49:39Z

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 :)

oh on second thoughts its more ok not to have the .$("#setDefaultTermSelection").trigger("change"); because it will cause to lose focus on the textarea.

Collectives™ on Stack Overflow

PHP textarea combined with select change and .load() function

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related