Can somebody please explain why this code does not allow my imploded variable separated by commas does not work when I surround it in a table or many div format.
The code works when I remove it from within the table. I also tested it with elements of the form within other divs and that failed to. It only works when its a HTML form on its own.
Summary: I want engineers output like. john,derek,peter et al.... At the moment it only gives my the top line
<?php
$eng = array();
$test = $_POST['test'];
$eng = implode(',',$_POST['engineers']);
?>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="engineers[]"><button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
</script>
</head>
<body>
<?php echo $eng; ?>
<div class="form_table">
<table>
<form method="post">
<tr><th><label for="engineers">Engineers</label></th><td>
<button type="button" id="add">Add Another Engineer</button>
<div id="items">
<div><input type="text" name="engineers[]"></div>
</div>
</td></tr>
<tr><th colspan="2"><input type="submit" name="" value="Add Job" class="submit" /></th></tr>
</form></table>
</body>
</html>
One thing to point out is that always process form input when the form is submitted.
And your markup is a little bit wrong, its the other way around. The table must be inside the form.
<?php
// handle form inputs when the form is submitted
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$eng = implode(',', array_filter($_POST['engineers']));
echo $eng;
}
?>
<div class="form_table">
<!-- form must wrap the table -->
<form method="POST">
<table>
<tr>
<th><label for="engineers">Engineers</label></th>
<td>
<button type="button" id="add">Add Another Engineer</button>
<div id="items">
<div><input type="text" name="engineers[]" /></div>
</div>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" name="" value="Add Job" class="submit" />
</th>
</tr>
</table>
</form>
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="engineers[]"> <button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
</script>
Sample Output
put your form outside the table becase table tag can include tr tags not form tag
Ex:
<?php
$eng = array();
$test = $_POST['test'];
$eng = implode(',',$_POST['engineers']);
?>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script> $(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="engineers[]">
<button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
</script>
</head>
<body><?php
echo $eng;
?>
<div class="form_table">
<form method="post">
<table>
<tr><th><label for="engineers">Engineers</label></th><td>
<button type="button" id="add">Add Another Engineer</button>
<div id="items">
<div><input type="text" name="engineers[]"></div>
</div>
</td></tr>
<tr><th colspan="2"><input type="submit" name="" value="Add Job" class="submit" /></th></tr>
</table>
</form>
Related
I am trying to pull checkbox values of only checked-checkboxes in a form, using array as name. N then I am using jquery - $.post(), to submit it to action.php file, but its doing nothing then refreshing page. Any guesses, where i am wrong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("button#ffruits_submit").click(function () {
var fresorts = $('input[name^="ffruits[]"]').map(function(){return $(this).val();}).get();
$.post("action.php", {fresorts1: fresorts}, function (data) {
});
}); // AJAX-FORM SUBMIT ends here
}); // document-ready ends here
</script>
</head>
<body>
<form name="ffruits_form" id="ffruits_form" method="post" style="padding:0 0 15px 0px;">
<table class="sm" border="1px solid #CCCCCC">
<?php
$sql = "SELECT * FROM `fruitstable` WHERE(fldReadyfordisplay=1 AND fldProductDelete=0) ORDER BY
resort";
$result = mysqli_query($db_conx, $sql);
while($data=mysqli_fetch_assoc($result)){
print('
<tr>
<td style="padding: 15px;">
<input type="checkbox" name="ffruits[]" value="'.$data['id'].'">
</td>
<td style="padding: 15px;">
'.$data['fruit'].'
</td>
</tr>
');
} // while-ends
?>
</table>
<table style="margin-top: 45px;">
<tr>
<td style="padding: 0 15px;text-align: center">
<button class="myButton" id="ffruits_submit">UPDATE</button>
</td>
</tr>
</table>
</form>
</body>
</html>
Replace this code
<button class="myButton" id="ffruits_submit">UPDATE</button>
with
<button type="button" class="myButton" id="ffruits_submit">UPDATE</button>
Add type="button"..its assuming submit button thatswhy refreshing the page.Hope this work.
The issue is because you are hooking the event to the click event of the submit button and you're not preventing the default action of the event.
To fix this, hook to the submit event of the form and call preventDefault() on the provided event. Try this:
$(document).ready(function() {
$("#ffruits_form").submit(function (e) {
e.preventDefault();
var fresorts = $('input[name^="ffruits[]"]').map(function(){
return $(this).val();
}).get();
$.post("action.php", { fresorts1: fresorts }, function(data) {
// do something here or remove the function
});
});
});
Use this lines in your form.php
<div>
<input type="checkbox" name="ac_type[]" value="Checkbox1"/> Checkbox1
<input type="checkbox" name="ac_type[]" value="Checkbox2"/> Checkbox2
</div>
And in action.php
<?php $checkboxtype = $_POST['ac_type'];
$check_type="";
foreach($checkboxtype as $checkbox)
{
$check_type .= $checkbox.",";
}?>
I hope this would help.
<?php
if( isset($_POST['fresorts1']) ) {
print_r($_POST['fresorts1']);
die();
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("#ffruits_submit").click(function () {
event.preventDefault();
var fresorts = $('input[name^="ffruits[]"]').map(function () { if ($(this).is(':checked')) { return $(this).val(); } }).get(); //#Noman
$.post(window.location.href, {fresorts1: fresorts}, function (data) {
alert("Response: "+data);
});
});
});
</script>
<input type="checkbox" name="ffruits[]" value="1">
<input type="checkbox" name="ffruits[]" value="2">
<input type="checkbox" name="ffruits[]" value="3">
<button class="myButton" id="ffruits_submit">UPDATE</button>
add event.preventDefault(); and see the console log for result
I have updated the code ... put this code in a php file and test
$(document).ready(function () {
$("button#ffruits_submit").click(function (e) {
e.preventDefault();
var fresorts = $('input[name^="ffruits[]"]').map(function () {
if ($(this).is(':checked')) {
return $(this).val();
}
}).get();
console.log(fresorts);
}); // AJAX-FORM SUBMIT ends here
}); // document-ready ends here
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<form name="ffruits_form" id="ffruits_form" method="post">
<table class="sm" border="1px solid #CCCCCC">
<tr>
<td style="padding: 15px;">
<input data-label="checkbox 1" type="checkbox" name="ffruits[]" value="1">
<input data-label="checkbox 2" type="checkbox" name="ffruits[]" value="2">
<input data-label="checkbox 3" type="checkbox" name="ffruits[]" value="3">
<input data-label="checkbox 4" type="checkbox" name="ffruits[]" value="4">
<input data-label="checkbox 5" type="checkbox" name="ffruits[]" value="5">
</td>
</tr>
</table>
<table style="margin-top: 45px;">
<tr>
<td><span id="respose"></span></td>
<td style="padding: 0 15px;text-align: center">
<button type="button" class="myButton" id="ffruits_submit">UPDATE</button>
</td>
</tr>
</table>
</form>
</body>
</html>
you need some changing in your code
when click on button use event.preventDefault();
when use .map set if ($(this).is(':checked')) { condition
Check below JS:
$(document).ready(function () {
$("button#ffruits_submit").click(function (event) { // clicked event pass by function to prevent redirection of your form submition
event.preventDefault();
var fresorts = $('input[name^="ffruits[]"]').map(function () {
if ($(this).is(':checked')) {
return $(this).val();
}
}).get();
console.log(fresorts);
$.post("action.php", {fresorts1: fresorts}, function (data) {
});
}); // AJAX-FORM SUBMIT ends here
}); // document-ready ends here
I have a php page, wich hase some external links to js files in the head, and on body I have some selectable elements from jquery(sometimes I do not have them, because thouse elements are generated if the user is login). The problem is in the javascript I wrote, I get this error: TypeError: Object [object Object] has no method 'disableSelection'. Even if I put a ".sortable" element in the php, I still get this error. In html looks like it has no problem with that and works fine. The code that gives me the error is this:
Sorry for my english. I can put the hole code if you want but is too big. I think the problem is because the javascript is loading too fast or before of the html is generated.( I tried to put a variable in the js and that function under a if() but is not working)
The javascipt(scripturi.js):
var logat=0;
$(document).ready(function() {
$( ".sortable0" ).sortable();
$( ".sortable0" ).disableSelection();
$( ".sortableIt" ).disableSelection();
$( ".sortableIt" ).sortable(
{
stop: function(event, ui)
{
for(var i=0;i<ui.item.parent().children().length;i++)
{
var x =ui.item.parent().children()[i].id;
//update items din acest sertar
//updateItemServer(x,i)
//alert(x+ " " + i);
}
}
});
$( ".sortable" ).disableSelection();
$( ".sortable" ).sortable({ stop: function(event, ui) {reparaZindex();}});
});
function updateItemServer(x,i){
//alert(x+" "+i);
}
function incarca(){
$(document).ready(function (){
$.getJSON("http://students.info.uaic.ro/~calin.chifan/api/compartiment/list.json", function(data){
var html = [];
/* loop through array */
$.each(data, function(index, d){
addCompartiment(d.nume_comp,d.id);
});
}).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */
alert("error occurred!");
});
});
}
function addCompartiment(nume,id){
$("#sortable0").append('<ul class="sortable" id'+ +'>');
}
function updateIndexServer(x,y){
//alert(x+" "+y);
//trimite id-ul x si pozitia y
}
function reparaZindex(){
$.each($(".sortable > li"), function()
{
if($(this).find('.sertar')[0])
{
$(this).find('.sertar').eq(0).css('z-index',(500-$(this).index()*2));
updateIndexServer($(this).find('.sertar')[0].id,$(this).index())
}
if($(this).find('.sortableIt')[0])
$(this).find('.sortableIt').eq(0).css('z-index',(501-2*$(this).index()));
});
}
window.onload = function() {
//incarca();
//reparaZindex();
}
It's strange that in the html I don't have this problem. After the user is logedin I want to call a function that will append some ul (.selectable) elements but so far it can't even notice that there are some elements. If you want I can give you a link to the page I work.
A little bit of the php:
<?php
ini_set('session.save_path', '/tmp/');
session_start();
$logged=0;
if(isset($_SESSION['autentificat']))
{
if($_SESSION['autentificat']==1)
$logged=1;
}
$user= $_COOKIE['user'];
echo'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
<title>Proiect Web</title>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="login.js"></script>
<script src="scripturi.js"></script>
<script src="dulap.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="login.js"></script>
</head>'
;
if($logged==1)
{
echo'<body onload="loadYeslog()">';
}
else {
echo'<body onload="loadNoLog()">';
}
echo
'<div class="mainbar">
<div id="loginContainer">
<div id="loginButton"><span style="display:block;width:48px;height:27px; ">Login</span></div>
<div id="logoutButton" class="barbutton" style"cursor:pointer;"><span>Logout</span></div>';
if($logged==0)
{
echo'<div id="welcomeLabel" class="barbutton"><span>Not Logged in!</span></div>';
}
else
{
echo '<div id="welcomeLabel" class="barbutton"><span>Welcome '.$user.' !</span></div>';
}
echo '<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm" action="autentificare2.php" method="POST">
<fieldset id="body">
<fieldset>
<label for="username">
Username</label>
<input type="text" name="user"/>
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password"/>
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
<div id="regbut"><span>New user ? </span></div>
</form>
</div>
<div id="regbox">
<form id="registerform" action="register.php" method="POST">
<table style="margin-top:10px;">
<label for="Dusername">
REGISTAR FOARM!!! </label>
<tr>
<td>
<label for="Dusername">
Username: </label>
</td>
<td>';
?>
<input type="text" name="Duser" placeholder="Introduceti numele de cont dorit" onblur="javascript:semnaleazaExistaNume (this.value, '')" />
</td>
<td>
<span class="ascuns" id="eroareNume">Numele deja exista, alegeti altul... </span>
</td>
</tr>
<tr>
<td>
<label for="Dpassword">
Password: </label>
</td>
<td>
<input type="password" name="Dpassword"/>
</td>
</tr>
<tr>
<td>
<label for="Demail">
E-Mail: </label>
</td>
<td>
<input type="text" name="Demail"/>
</td>
</tr>
<tr>
<td>
<input type="submit" id="register" value="Register" />
</td>
</tr>
</fieldset>
</table>
</form>
</div>
</div>
</div>
<div class="box">
<ul class="sortable0" id="sortable0">
<ul class="sortable" id="sortableColona1">
<li id="sertar1" style="z-index:10">
<img id="sertar11" class="sertar" ONCLICK="openS(this)" style="position: relative;z-index:500;aligh:center;" src="img/sertar1.png">
<ul id="ui items1" style="z-index:501;position:relative;visibility:hidden;" class="sortableIt" >
<li id="item1" class="ui-state-default">1</li>
<li id="item2" class="ui-state-default">2</li>
<li id="item3" class="ui-state-default">3</li>
<li id="item4" class="ui-state-default">4</li>
<li id="item5" class="ui-state-default">5</li>
<li id="item6" class="ui-state-default">6</li>
<li id="item7" class="ui-state-default">7</li>
<li id="item8" class="ui-state-default">8</li>
<li id="item9" class="ui-state-default">9</li>
<li id="item10" class="ui-state-default">10</li>
<li id="item11" class="ui-state-default">11</li>
<li id="item12" class="ui-state-default">12</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
You need to place the jQuery code in the $(document).ready(); function and then it will run only when the page loads like so:
$(document).ready(function() {
// your code here
});
This will make sure it only runs when the page and all the DOM elements have completely loaded.
UPDATE:
Can you add the following code in your HTML head section as you need jQuery UI to make the relevant method call:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Make sure you include it after you have loaded jQuery, so the head section code should be like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="login.js"></script>
<script src="scripturi.js"></script>
<script src="dulap.js"></script>
<script src="login.js"></script>
First thing is to make sure you have jQueryUI loaded since the method you are calling belongs to its API. We can take things forward from there!
Your code does not include jquery ui anywhere! You just include JQuery, not the JQuery UI part. The Sortable is part of the jquery ui. Check it out at: http://jqueryui.com/sortable/ If you include it correctly it is not problem if you have a element on your page which responds to the selector or not. Just make sure, that you include the correct library.
You need to add jQueryUI. Please add below code to after jquery section.
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
I want to submit my form. In my form using first button I create a textbox through ajax and after that I use second button to submit the form normally. When I want to get the value of newly created textbox using $_POST it gives error. How can i get value of ajax created button on submission. my php code is :
<?php`enter code here`
session_start();
ob_start();
require_once "config.php";
if ($_SERVER['REQUEST_METHOD']=="POST")
{
if (isset($_POST['subtest']))
{
print $_GET['tt'];
}
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#subt").click(function(){
jQuery("#divload").show();
jQuery.ajax({url:"adp.php", type:"post", success:function(result){
jQuery("#disp").html(result);
jQuery("#divload").hide();
}});
return false;
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#subtest").click( function() {
alert(jQuery("#tt").val());
});
});
</script>
</head>
<body id="#bdy">
<form id="FrmMain" method="post" action="">
<div id="Shd" style="font: 10%; margin: 50px; background-repeat:repeat-y; padding- left:120px;" >
<input type="text" id="txtFrom" name="txtFrom" />
<input type="text" id="txtUpto" name="txtUpto" />
<input type="text" id="txtOpt" name="txtOpt" />
<input type="submit" id="subt" name="subt" />
<input type="submit" id="subtest" name="subtest" />
<div id="RuBox" style="font-weight:bold;"><input type="checkbox" id="chkaccept" name="chkaccept" /> I accept terms and conditions.</div>
</div>
</form>
<div style="color:#F00; font-size:18px; display:none;" id="divload">Please wait loaidng... </div>
<div id="disp"></div>
</body>
</html>
Code of my adp.php file :
<?php
sleep(5);
?>
<div style="color:#30F; font-size:36px;">
Application testing............
<input type="text" id="tt" name="tt" />
</div>
I am not getting value of textbox named "tt" in temp form
Thanks
You're pretty much not posting anything from here:
jQuery(document).ready(function(){
jQuery("#subt").click(function(){
jQuery("#divload").show();
jQuery.ajax({url:"adp.php", type:"post", success:function(result){
jQuery("#disp").html(result);
jQuery("#divload").hide();
}});
return false;
});
});
So I would assume that you only want to generate a text field dynamically. And you can do it without the use of ajax:
var form = $('#FrmMain');
$('<input>').attr({'type' : 'text', 'id' : 'tt', 'name' : 'tt'}).appendTo(form);
Plus you're also trying to print out $_GET['tt'] while the form method is POST
if (isset($_POST['subtest']))
{
print $_GET['tt'];
}
This should also be:
echo $_POST['tt'];
I am trying to update the database using jquery and ajax. A pop up window is opened for updating the fields. My problem is : the database is udapted fine but the values are not reflected on the web page without refreshing the page. I am using jquery .html() method to update the contents.
Please help me with the problem.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src="js/jquery-1.5.1.min.js"></script>
<script type='text/javascript' src="js/jquery-ui-1.8.13.custom.min.js"></script>
<link rel='stylesheet' href="js/jquery-ui-1.8.13.custom.css" />
<script type='text/javascript'>
$(document).ready(function() {
$update_dialog = $("#update_dialog").dialog({
autoOpen:false,
title:"Update Sub Sub Section",
width: '600px',
modal:true,
buttons:[
{text: "Submit", click: function() { $('form',$(this)).submit(); }},
{text: "Cancel", click: function() { $(this).dialog("close"); }},
]
});
$("#update_dialog form").submit(function() {
var form = $(this);
alert($(this).serialize());
$.post($(this).attr('action'), $(this).serialize(),function(data) {
var getbook = $('#book_'+data.id);
$('.description',getbook).empty().html(data.description);
$("#update_dialog").dialog('close');
},'json');
return false;
});
function edit3_link_action() {
var getbook = $(this).closest('.book');
//get id from div
var id = getbook.attr('id').split('_');
id = id[id.length-1];
$('#update_dialog input[name="id"]').val(id);
$('#update_dialog textarea[name="description"]').val($('.description',getbook).html());
$update_dialog.dialog('open');
return false;
}
$(".edit3").click(edit3_link_action);
});
</script>
</head>
<body>
<div align="center">
<form name="userform" method="post">
<?php
$proposalid='P09-001';
$res=mysql_query("Select * from tblproposaldocsections where ProposalID='$proposalid' order by SortOrder;");
for($i=0;$i<mysql_num_rows($res);$i++)
{
$row=mysql_fetch_row($res);
if($row[1]!=$row[2])
{
$result=mysql_query("Select * from tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row[1]' order by SortOrder;");
for($k=0;$k<mysql_num_rows($result);$k++)
{
$row1=mysql_fetch_row($result);
$exp=explode('.',$row1[2]);
$alter=$row[2].'.'.$exp[1].'.'.$exp[2];
$result1=mysql_query("Select * from tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row1[2]' order by OrderID;");
$lastsortorder= mysql_query("SELECT Max(SortOrder) FROM tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row1[1]';")or die(mysql_error());
$rr = mysql_fetch_row($lastsortorder);
$lastsortorder = $rr[0];
if(mysql_num_rows($result1)>0)
{
?>
<br>
<?php
for($j=0;$j<mysql_num_rows($result1);$j++)
{
$row2=mysql_fetch_row($result1);
$exp=explode('.',$row2[2]);
$alter=$row[2].'.'.$exp[1].'.'.$exp[2].'.'.$exp[3];
$lastsortorder= mysql_query("SELECT Max(SortOrder) FROM tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row2[1]';")or die(mysql_error());
$rr = mysql_fetch_row($lastsortorder);
$lastsortorder = $rr[0];
?>
<div class='book' id='book_<?php echo $row2[2];?>'>
<h3 class="title"><?php echo $alter;?> subsubsection_<?php echo $row2[2];?></h3>
<p class='description'><?php echo $row2[3];?></p>
<a class="edit3" href="#">Edit</a>
</div>
<br>
<?php
}
?>
<br>
<?php
}
}
}
echo('<br>');
}
?>
</table>
</form>
</div>
<div id='update_dialog'>
<form action='edit.php' method='post'>
<table>
<tr>
<td align="left">Description:</td>
<td>
<textarea name='description' cols='60' rows='5'></textarea>
</td>
</tr>
</table>
<input type='hidden' name='id' />
<input type='hidden' name='proposalid' value="<?php echo $proposalid;?>" />
</form>
</div>
</body>
</html>
EDIT by blasteralfred
I used FireBug for debugging and the problem was the same as expected. DOM object is unable to read updated data. Is this declaration for getting the DOM element correct? This is the only problem !
var getbook = $('#book_'+data.id);
This is how the tag is declared:
<div class='book' id='book_<?php echo $row2[2];?>'>
<table width="80%" align="left">
<tr>
<td width="10%"><?php echo $alter;?></td>
<td width="70%" class="description"><?php echo $row2[3];?></td>
<td width="10%" align="center"><a class="edit" href="#">Edit</a></td>
</tr>
</table>
</div>
If your .html() isn't working, its either because the element you're using it on isn't there or the value you're trying to set isn't defined.
You can figure out what's up by checking if the given element and the value are defined prior to the .html() call. I'd recommend FireBug for debugging, but this can also be done simply by alert()ing the element and the value..
<html><head>
<script type="text/javascript">
function addFunction(id)
{
cnt=parseInt(id.substr(7));
var row=document.getElementById('driverDetails').insertRow(cnt+1);
var c1=row.insertCell(-1);
var c2=row.insertCell(-1);
var c3=row.insertCell(-1);
c1.innerHTML="row"+(cnt+1)+"colum1";
c2.innerHTML="row"+(cnt+1)+"colum2";
c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New" onclick="addFunction(this.id)"/>';
}
</script>
</head><body>
<table>
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
<td><input type="button" id="addNew_1" name="addNew_1" value="Add New" onclick="addFunction(this.id)"/></td>
</tr>
</table>
</body>
</html>
when i click Add New button
can we change the content of 3rd cell of previous row
Here you go ...
<html><head>
<script type="text/javascript">
function addFunction(id)
{
cnt=parseInt(id.substr(7));
var row=document.getElementById('driverDetails').insertRow(cnt);
var c1=row.insertCell(-1);
var c2=row.insertCell(-1);
var c3=row.insertCell(-1);
c1.innerHTML="row"+(cnt+1)+"colum1";
c2.innerHTML="row"+(cnt+1)+"colum2";
c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New" onclick="addFunction(this.id)"/>';
document.getElementById('driverDetails').rows[cnt-1].deleteCell(2);
}
</script>
</head><body>
<table id="driverDetails">
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
<td><input type="button" id="addNew_1" name="addNew_1" value="Add New" onclick="addFunction(this.id)"/></td>
</tr>
</table>
</body>
</html>
Here's a function that does what you want, I think.
function addFunction(id) {
var table = document.getElementById('driverDetails');
var tr = document.createElement("TR");
table.tBodies[0].appendChild(tr);
var rowCount = table.tBodies[0].rows.length;
var colCount = table.tBodies[0].rows[0].cells.length;
tr.innerHTML =
"<td>Row "+(rowCount)+", Col "+colCount+" 1</td>"+
"<td>Row "+(rowCount)+", Col "+colCount+" 2</td>"
}
This way, you don't have to add a third cell and delete it every time you make a new row. It will just append a row every time you click the same button.
(If you want to prepend the new row, check out the insertBefore() method in the javascript DOM).
Or with jQuery:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function addFunction(id) {
var count = $('#box').find('tr').size()+1;
$('#box').append('<tr><td>row'+count+
' colum1</td><td>row'+count+' colum2</td></tr>');
}
</script>
</head>
<body>
<table id="box">
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
</tr>
</table>
<input type="button" value="Add New" onclick="addFunction()"/>
</body>
</html>
<html><head><script type="text/javascript">
function addFunction(id)
{ cnt=parseInt(id.substr(7));
document.getElementById('driverDetails').rows[cnt].deleteCell(2);
var row=document.getElementById('driverDetails').insertRow(cnt+1);
var c1=row.insertCell(-1);
var c2=row.insertCell(-1);
var c3=row.insertCell(-1);
c1.innerHTML="row"+(cnt+1)+"colum1";
c2.innerHTML="row"+(cnt+1)+"colum2";
c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New" onclick="addFunction(this.id)"/>';
}
</script>
</head>
<body>
<table>
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
<td><input type="button" id="addNew_1" name="addNew_1" value="Add New" onclick="addFunction(this.id)"/></td>
</tr>
</table>
</body>
</html>
thanks Ronan Dejhero i change your code like this so i got answer