using jquery on checking duplicate data in database with dynamic textfields

[eluser]Vitek[/eluser]
Hi clariz,

A couple of points to answer some of your other questions:

1. The reason blur() was only being applied to the first #Que element was because you were not binding blur() to the other #Que elements as they were being created. jQuery will only bind functions to elements that exist at the point blur() is invoked.

2. When using classes you use CSS class notation: $('.class')

Onto the JS:

Code:

$(function() {
     //NOTE: Edited in line with the posts below
     //This function sets the value of #txtQuestion and submits the form via Ajax
     function checkQuestion() {

        $('#txtQuestion').val($(this).val());
                
        $('#formCheck').ajaxSubmit({

            success :  function(response) {                  
                if (response > 0) {
                    alert('Question already exists!');
                }                  
            }

        });
    }

    //Bind checkQuestion() to the blur event of ALL input fields
    //$(this).val() grabs the value of the relevant textbox
    $('#Questions > input').bind('blur', checkQuestion);
    
    $('#addQuestion').click(function() {

        //Append a new textbox to our #Questions DIV
        $('#Questions').append('<input type="text" name="Que[]" size="38">');
        
        //Bind checkQuestion() to the updated collection of textboxes that we have
        $('#Questions > input').bind('blur', checkQuestion);
        
        return false;
    
    });

});

Code:

<form name="formCheck" method="post" id="formCheck" action="<?= site_url("lessons/main/checking");?>">

    <input type="text" name="txtQuestion" id="txtQuestion" />

</form>

<form method="POST" name='formQ' id='formQ' action='<?= site_url("lessons/main/saveAll");?>'>

    <div>
        <a href="" id="addQuestion">Add another question</a>
    </div>

    <div id="Questions">
        Question &lt;input type='text' name="Que[]" size='38' /&gt;
    </div>

&lt;/form&gt;

The above code assumes a couple of things:

1. You are indeed using the jQueryForm plugin (which I assumed by your use of ajaxForm())
2. Main::checking() returns just the row count, without the '###'
3. #newQuestion has been replaced by #Questions. This is where ALL textboxes will go - both the static one and any that are created dynamically

I've tried to stay as close to your approach as possible. I hope it does the job for you (I should mention it's untested as well, it's 5am :-P )