1

I'm trying (and failing) to make an ajax process work when people leave a form input field. I need it to happen for each input field, of any type, on the form.

I'm trying to modify the following (which does work):

$("document").ready(function() {
    $("#getcontent").click(getContent);
});

function getContent() {
    $("#example").load("sampletextcontent.txt");
}

(there would be a button with id="getcontent" in the html, and a div with id="example" also in the html. When button clicked, contents of external file sampletextcontent.txt is displayed within said div)

jquery IS being used, version 2.0.3 jquery.min.js

So I am trying (and this is where I am failing) is to convert the above to become:

$("document").ready(function() {
    $("#input_1_1").onblur(doSend);
    $("#input_1_2").onblur(doSend);
    $("#input_1_3").onblur(doSend);
    $("#input_1_4").onblur(doSend);
    $("#input_1_5").onblur(doSend); // etc for as many fields there are
})

function doSend() {
    // Do some ajax stuff to send the entire value of all form fields in here
}

But it does not seem to like the concept of using the replacement of the ".click" to ".onblur" here. Why is this? Isn't onblur a valid JS function/item?

Sorry I'm not a JS guru, I have great problems understanding JS.

C

Edit - sorry I was not clear about the code I am trying to get working. There is no button in the version I want to work, it's just wanting to trigger by when a user clicks/tabs away from each input field. Sorry about not making that clear before.

Cassandra
  • 284
  • 4
  • 18
  • You should just class your field like `.send_on_blur` and attached the event handler based on class like `$('.send_on_blur').on('blur',doSend)` rather than attaching an event to a bunch of different id's, especially if you are going to send the entire form contents anyway (as there is no difference in behavior based on which field is blurred). – Mike Brant Feb 02 '15 at 22:25
  • True and understood, but there is no promise that there will always be no difference in behaviour per field, so reverting back to original question. I can tidy it up later once it's working and what I am doing is more refined. – Cassandra Feb 03 '15 at 00:38

2 Answers2

1

For dynamic jQuery event binding, I would try switching out the .click and .blur functions with the .on function.

As an example, I would try the following:

$('body').on('click', '#getcontent', function(){
    DoSomething();
});

and

$('body').on('blur', '#input_1_1', function(){
    DoSomething();
});

The documentation for the on function can be found http://api.jquery.com/on/.

Here is another Stack Overflow article that also explains this: Event binding on dynamically created elements?.

Community
  • 1
  • 1
puddinman13
  • 1,408
  • 4
  • 18
  • 35
0

Thanks to the comments and answer attempts. However the answer that I'm using, that actually does answer the specific question is the following. Simply change:

$("document").ready(function() {
    $("#input_1_1").onblur(doSend);
    $("#input_1_2").onblur(doSend);
    $("#input_1_3").onblur(doSend);
    $("#input_1_4").onblur(doSend);
    $("#input_1_5").onblur(doSend); // etc for as many fields there are
})

To become:

$("document").ready(function() {
    $("#input_1_1").blur(doSend);
    $("#input_1_2").blur(doSend);
    $("#input_1_3").blur(doSend);
    $("#input_1_4").blur(doSend);
    $("#input_1_5").blur(doSend); // etc for as many fields there are
})

And it works. This retains the ability to call different functions per field if I so wish, and is very straightforward for a JS novice like me to work with.

A better cleaner solution may be implemented later, but for now this will do and directly answers the original question.

Cassandra
  • 284
  • 4
  • 18