jQuery function not firing before Ajax code

Question

My jQuery code won't fire before my Ajax code. (What the jQuery code does is change my select element to an input). However, it only fires after my Ajax code, but gives an unwanted result - it will insert the value for the (now hidden) select element to the database instead of the value of the visible input element. How do I get my jQuery code to work so that it will successfully change my select element to an input and insert the right value into the database?

What are you trying to achieve?. As per the change event only considering its actions if the selected value is 11. Please clarify your questions so that everybody can understand it. — sarath s rajendran, May 28 '19 at 04:48
As outlined in the description, I want to insert my select value into my database when the select element is visible, and insert my input value into my database when my input element is visible. The select element is hidden when the input element is visible and vise versa - _that_ is what the jQuery code does. But for some reason the jQuery code is not working alongside the Ajax code I posted. The Ajax code inserts the values to the database. And what you mentioned is EXACTLY the problem I'm facing - it keeps inserting the value "11" instead of the value of the input element. — misner3456, May 28 '19 at 04:58
@sarathsrajendran Also on the jQuery code, basically when the select value changes to "11", the input element shows and hides the select element - that's what the code does. — misner3456, May 28 '19 at 04:58
Did you try the beforeSend method of Ajax? https://stackoverflow.com/questions/21648356/jquery-ajax-beforesend-and-success-error-complete — Vishnu Chauhan, May 28 '19 at 05:25
@VishnuChauhan I haven't tried beforeSend yet, and when I get off work tomorrow I will experiment with it and update you with an answer on whether it resolves my issue. Thanks for your advice, I am learning new things every minute! — misner3456, May 28 '19 at 07:14

score 0 · Accepted Answer · answered May 28 '19 at 05:11

I made some minor correction in script

$(function(){
    $(document).on("submit", "#toctform", function(event){
        event.preventDefault();
        var selectValue = $('#quantsel').val();
        var inputValue = $('#inphid').val();
        var strid = '<?php echo $prodtab->strid; ?>';
        var prodid = '<?php echo $prodtab->prodid; ?>';
        $.ajax({
            type: 'POST',
            url: "jtest.php?strid="+strid+"&prodid="+prodid,
            data: {selectValueBox: selectValue, inputValueBox: inputValue},
            success: function(data){
                alert("Data Save: " + data);
            }
        });
    });
});

Check it and let me know it fix the issue.

Wow NICE, you made the jQuery code work! (It's because I made typos in my ajax code, how stupid of me, my first time with ajax). But I also get an error that says my input value keeps being inserted as "null" to database even though I typed a value (example: 44) into it? — misner3456, May 28 '19 at 05:28

jQuery function not firing before Ajax code

1 Answers1