CODEWITHSUNDEEP
javascriptphpjqueryhtml
Christopher
Christopher

Reputation: 590

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

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

Upvotes: 0

Views: 326

Answers (2)

Christopher
Christopher

Reputation: 590

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

Upvotes: 0

luiscrjr
luiscrjr

Reputation: 7268

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:

  1. The value inside <option> tag is a string. So, you should set the value with .val("0");.
  2. The event according to specification is actually onchange, and not onChange (capital "C"). However, modern browsers actually accept both ways.

Upvotes: 1

Related Questions