Ajax multiple input fields (.on input) POST multiple input fields value

Posted 11 months ago by newbie360

i have a form in create view, when client input on title field

it will do a live-search, if found any records, the submit button will be disabled to prevent create duplicate record

i have finished the backend code and how to disable the submit button

the problem is i know how to trigger the ajax call when title changed

but now i want if ANY of (title or author or description) changed, post all 3 fields value to backend

for example,

-- in title input aaa (post the 3 fields value to backend)
title = aaa
author = 
description =


-- ok now in author input bbb (post the 3 fields value to backend)
title = aaa
author = bbb
description =
// create view
<input type="text" id="title" name="title">
<input type="text" id="author" name="author">
<input type="text" id="description" name="description">

$(function() {
    $("#title").on("input", function () {
        var title = $("#title").val();

        // prevent spamming send request to backend
        setTimeout(function() {

            if ($("input[name=title]").val() == title) { // if true, means client is finish typing

                $.ajax({
                    type:'POST',
                    url:'/live-search',
                    data:{title: title},
                    cache: false,
                    success:function(data){
                        $("#search_result").html(data.html);
                    }
                })
                
            }

        }, 2000);
    });
});

Please sign in or create an account to participate in this conversation.