2

I am trying to code a form that has multiple textbox without refershing page using ajax, then after each textbox threre will be link called add which POST call the other php called addnew.php.

In addnew.php data will we added to database(postgres). But I am geting problem while getting the post variable itself.For testing I added the alert in script.

this is my code for form (I will change for multiple textbox once it works fine)

script code

<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
    jQuery(document).ready(function() {

        jQuery('.add').live('click', function(event) {

            //var da='da='+ $('#da').attr('value');
            //var da = 'test';
            var da = $('form#myform').serialize();
            alert(da);
            $.ajax({
                type: "POST",
                url: "addnew.php",
                data:da,
                success: function(data) {
                    if (data === "ok") {
                        $(this).parent().fadeOut();
                        $('#results').html(data);
                    }
                    else {
                        alert(data);
                    }
                }

            });
        });

    });
});
//]]>
</script>

form code

<body>
<?php

for ($i=1;$i<2;++$i) {//currently only one textbox for testing purpose

 echo "<form name='myform' id='myform'>";
 echo "<input name='da' type='text' id='da' value='none'>";
 echo "<a href='#' class='add'>Add</a>";
 echo "</form>";
}
?>
<div id="results"><div>
</body>

addnew.php code

<? php
 if( isset($_POST['da']) ) 
 {
   echo (da);
 }
?>

when page is rendered will have like this.

<textbox1 data> <add button>
<textbox1 data> <add button>
<textbox1 data> <add button>
...
<textbox10 data> <add button>

what I am trying is

  1. Created each textbox and add button pair inside each form dynamically using for loop. (for testing i created only one pair).Should I have form for every pair?
  2. when add is clicked value within textbox (#da) should be send to addnew.php through ajax.

following code is displaying data correctly

alert(da);

but in addnew.php file I am not getting $_POST(['da']). Is that means data is not passed to the file or is there something wrong ajax code and finally can I have multiple form with same id. If not then how i can send the only one textbox data ie just before the add button when form is submitted.

3 Answers 3

1

You can always dynamically change the target/action of a form element; since you are using jQuery, it would be something like this:

$('#form').attr('action', window.location.href);

That would set a form (with the ID of "form") to have a targeted action of whatever the page URL is. As long as you pass the second argument to attr() you reset the value - this works on basically ANYTHING (you can change a link's href, etc.. all on the fly)

0

i believe the $(window).load() will not work. the JQuery load method uses ajax to grab data from an url, the url being the first argument of the load method, then it can perform an oncomplete function when it is done loading the ajax response into the calling element. it looks as though you have only put an oncomplete function for the load method, but not the url to be ajaxed. am i mistaken? see http://api.jquery.com/load/

i haven't fully thought it through, but you may just want to remove that first level ($(window).load()), and see what happens then. if you do that, it appears as though the code will add click handlers once the page is "ready".

1
  • yes you are $(window).load() is not needed at all.But the actual stupid mistake was the single space between < and php in the beginning of addnew.php page.I used netbeans php ide and it doesn't show error at all. So it is solved now.
    – kiranking
    Commented Dec 28, 2010 at 13:53
0

There is no "submit". Replace your click element:

<a href="#" class="add">Add</a>

with a submit button:

<input type="submit" class="add" value="Add" />

or

<a href="#" class="add" onclick="this.form.submit();">Add</a>
1
  • this method will work only if target is specified.what I am trying is set the url during ajax , because if I add more button later just url can be changed during ajax call.
    – kiranking
    Commented Dec 13, 2010 at 13:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.