Member Avatar for kiranking

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 chage for multiple textbox once it works fine)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='fade delete_files/jquery-1.4.2.js'></script>

  <link rel="stylesheet" type="text/css" href="fade delete_files/normalize.css"/>
  <link rel="stylesheet" type="text/css" href="fade delete_files/result-light.css"/>

  <style type='text/css'>

  </style>

  <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>
</head>
<body>
  <ul>
    <li>One | <a href='#' class='add'>Delete</a></li>
    <li>Two | <a href='#' class='add'>Delete</a></li>
    <li>Three | <a href='#' class='add'>Delete</a></li>
    <li>Four | <a href='#' class='add'>Delete</a></li>

</ul>
<?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>


</html>

addnew.php code

<? php
 if( isset($_POST['da']) ) 
 {
       echo (da);
  }
?>
  • 3 Contributors
  • 9 Replies
  • 192 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by diafol

Recommended Answers

All 9 Replies

Member Avatar for diafol

This could be a problem:

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>";

You can only have ONE 'id' per page. myform and da will repeat when you add new instances.

//EDIT

I just realized that I don't have a clue what you're trying to do with this code.

Member Avatar for Shanti C

or try this:
concatenate $i with your text box id or name..

<?php

for ($i=1;$i<10;++$i)
{//currently only one textbox for testing purpose
  echo "<form name='myform' id='myform' method='post'>";
  echo "<input name='da'"$i" type='text' id='da'"$i" value='none'>";
  echo "<a href='javascript:submit_form();' class='add'>Add</a>";
  echo "</form>";
}
?>
<script type="text/javascript">
function submit_form()
{
    document.myform.submit();
}
</script>
Edited by Shanti C because: sysntax error
Member Avatar for kiranking

@ardav, thanks for your reply

You can only have ONE 'id' per page. myform and da will repeat when you add new instances.

For testing purpose id is given static , later I will assign dynamic id based on for loop.

I just realized that I don't have a clue what you're trying to do with this code.

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(). Is that means data is not passed to the file or is there something wrong ajax code.


@shanti

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.

Member Avatar for diafol

OK, You can't have multiple forms with the same id, but you can have names with the same value - these will be passed as an array, e.g. name="myform[]".

In this case, you'll need to access the 'name' attribute as opposed to the 'id'. However, I would suggest just the one form and have multiples of the textbox + button inside said form.

alert(da);

won't work as you've commented out the initialisation of the js variable called 'da'. You can access it directly of course by $('#da')... BUT, if you have multiple identical ids then only the last one (*I think*) will show. As I said, you could use the name attribute to receive an array of values OR provide each 'da' with a counter as mentioned by Shanti.

If your addnew.php script isn't receiving the data, have you references the file correctly here:

url: "addnew.php",

does it need to be something like:

url: "includes/addnew.php",

I'd set up a static, dummy post and see if you're getting any response:

$.ajax({
                    type: "POST",
                    url: "addnew.php", basic: 'test me now',
                    success: function(data) {
                        if (data == "whatever") {
                            alert('whatever returned');
                        } else {
                            alert('not whatever');
                        }
                    }
 
                });
Member Avatar for diafol

Sorry, changed the data attribute - naughty!

var myvar = "whatever";
        $.ajax({
   		type: "POST",
   		url: "includes/addnew.php",
   		data: "da=" + myvar,
   		success: function(msg){
    		  alert(msg)	
   		}
 	});

I *think* you forgot to add the 'key' to your post parameters.

Member Avatar for kiranking

Sorry, changed the data attribute - naughty!

var myvar = "whatever";
        $.ajax({
   		type: "POST",
   		url: "includes/addnew.php",
   		data: "da=" + myvar,
   		success: function(msg){
    		  alert(msg)	
   		}
 	});

I *think* you forgot to add the 'key' to your post parameters.

No ardav it is in the same root folder not in includes/.
BTW alert(msg) is showing complete code of addnew.php code like below(I made some changes) .That means success:function is triggered.

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

I am still not sure whether the code entering inside the isset block or not. Is there a way that I can get echo or die messages like database connection problem that can be shown on form page.

Edited by kiranking because: some point were missing
Member Avatar for diafol

If you're getting the response and it is being alerted by JS, it seems it's working.

Member Avatar for kiranking

If you're getting the response and it is being alerted by JS, it seems it's working.

yes ardav its works fine now. Now I am able to display massage in #result div.
one and only problem remaining is fadeout().

when I tried fallowing code it is working fine as form name is hard coded.

$('form#myform').fadeOut();

but when I change it to code like below form is not fading out. Although that form itself is parent of add button.

$(this).parent().fadeOut();
Member Avatar for diafol

OK, this is JS not php. Pass.

commented: Thanks for reporting spam. +11
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.