Jump to content

Making a form editable again

sonicthehedgehog

By sonicthehedgehog
in JavaScript

 Share

Recommended Posts

sonicthehedgehog Newbie

sonicthehedgehog

Posted
Posted

I wonder if somebody could help me please. I've got a page that displays results from a database but I want people to be able to edit them. At the moment I've got an edit button but that's doing nothing.

 

What I'd like is to be able to put the results from the row somebody is trying to change back into the form. Is that possible and how would I go about doing it?

 

I've attached an image of what I'm trying to do to hopefully help.

 

Thanks in advance.

post-186688-0-90725300-1452592861_thumb.jpg

Link to comment
Share on other sites
john_jack Newbie

john_jack

Posted
Posted

here is an eg of what you want ,as for the update part you need to use a server side language such as PHP so you can query a database .

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>

<div>
<table><tr>
<td>
<form method="post">
<input type="text" id="bday" name="dateofbirth" /><br />
<input type="text" id="fn" name="first" /><br />
<input type="text" id="ln" name="last" /><br />
<input type="text" id="mail" name="email" /><br />
<input type="text" id="web" name="website" /><br />
<input type="text" id="ctr" name="country" /><br />
</form>
</td>
<td>
<div id="firstlist">
<div id="bday1">12/12/12</div>
<div id="fn1">jojo</div>
<div id="ln1">johns</div>
<div id="mail1">jj@joke.com</div>
<div id="web1">www.jojo.com</div>
<div id="ctr1">USA</div>
<button onclick="loadtoform('firstlist')">load</button>
</div>
</td><td>
<div id="secondlist">
<div id="bday1">11/1/92</div>
<div id="fn1">jane</div>
<div id="ln1">Doe</div>
<div id="mail1">jane@Doe.com</div>
<div id="web1">www.Doejane.co</div>
<div id="ctr1">GR</div>
<button onclick="loadtoform('secondlist')">load</button>
</div>
</td>
</tr>
</table>
</div>
<script>
function loadtoform(a){
$("#bday").val($("#" + a +" > #bday1").html());
$("#fn").val($("#" + a +" > #fn1").html());
$("#ln").val($("#" + a +" > #ln1").html());
$("#mail").val($("#" + a +" > #mail1").html());
$("#web").val($("#" + a +" > #web1").html());
$("#ctr").val($("#" + a +" > #ctr1").html());
}
</script>
</body>
</html>

i used jquery to get the values from the <div> and load it into the form ,hope it helps

Link to comment
Share on other sites
sonicthehedgehog Newbie

sonicthehedgehog

Posted
  • Author
Posted

Thanks, that's really helpful. I've already got the details in the database and am loading them onto the page but the problem Ive got is allowing people to edit them again if they want. This is the html that I've got

  <div id="data" class="data">
<div class="new_form">
<div style="width: 175px;">Date of Birth</div><input class="text" type="text" name="date" id="date" value="">
<div id="form">
<div>
 
<div style="width: 175px;">First Name </div>
<input class="text" type="text" name="firstname" id="firstname" value=""></div>
 
<div>
 
<div style="width: 175px;">Last Name </div>
<input class="text" type="text" name="lastname" id="lastname" value=""></div>
 
<input class="text" type="hidden" name="gender" id="gender" value="-">
<div>
<div style="width: 175px;">Email </div>
<input class="text" type="text" name="email" id="email" value=""></div>
</div> 
 
<div style="width: 175px;">Website </div>
<input class="text" type="text" name="website" id="website" value=""></div>
</div> 
 
<div style="width: 175px;">Country </div>
<input class="text" type="text" name="country" id="country" value=""></div>
</div> 
 
</div>
<div id="results" style="width:10000px;">
<div class="datacolumn">
<div><span>01 01 2016</span> dob</div>
<div><span>Jane</span></div>
<div><span>Doe</span></div>
<div><span>j.doe@email.com</span></div>
<div><span>jdoe.com</span></div>
<div><span>USA</span></div>
<button id="change" class="button button-accept">change</button>
</div>
 
<div class="datacolumn">
<div><span>01 01 2016</span> dob</div>
<div><span>Joe</span></div>
<div><span>Bloggs</span></div>
<div><span>j.bloggs@email.com</span></div>
<div><span>jbloggs.com</span></div>
<div><span>UK</span></div>
<button id="change" class="button button-accept">change</button>
</div>
 
<div class="datacolumn">
<div><span>01 01 2016</span> dob</div>
<div><span>Jane</span></div>
<div><span>Doe</span></div>
<div><span>j.doe@email.com</span></div>
<div><span>jdoe.com</span></div>
<div><span>USA</span></div>
<button id="change" class="button button-accept">change</button>
</div>
 
<div class="datacolumn">
<div><span>01 01 2016</span> dob</div>
<div><span>Joe</span></div>
<div><span>Bloggs</span></div>
<div><span>j.bloggs@email.com</span></div>
<div><span>jbloggs.com</span></div>
<div><span>UK</span></div>
<button id="change" class="button button-accept">change</button>
</div>
</div> 
</div>
and here's the js:
<script type="text/javascript">
$(document).ready(function () {
    $('#change').on("click", function () {
        var divs = $(this).parents("div").find("span");
        $.each(divs, function (i, v) {
            $($(".new_form input")[i]).val($(v).text());
        });
    });
});
</script>
but it's not working at all. I don't get any errors either
Link to comment
Share on other sites
john_jack Newbie

john_jack

Posted
Posted

you had one too many divs opened ,and also $(this).parents("div").find("span"); should be parent not parents

<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <div id="data" class="data">
<div class="new_form">
<form>
<div style="width: 175px;">Date of Birth</div><input class="text" type="text" name="date" id="date" value="">
<div id="form">

 
<div style="width: 175px;">First Name </div>
<input class="text" type="text" name="firstname" id="firstname" value="">
 
 
<div style="width: 175px;">Last Name </div>
<input class="text" type="text" name="lastname" id="lastname" value="">
 


<div style="width: 175px;">Email </div>
<input class="text" type="text" name="email" id="email" value=""> 
 
<div style="width: 175px;">Website </div>
<input class="text" type="text" name="website" id="website" value="">
 
<div style="width: 175px;">Country </div>
<input class="text" type="text" name="country" id="country" value="">
</form>
</div>
<div id="results" style="width:10000px;">
<div class="datacolumn">
<div><span>01 01 2016</span> dob</div>
<div><span>Jane</span></div>
<div><span>Doe</span></div>
<div><span>j.doe@email.com</span></div>
<div><span>jdoe.com</span></div>
<div><span>USA</span></div>
<button class="change" class="button button-accept">change</button>
</div>
 
<div class="datacolumn">
<div><span>01 01 2016</span> dob</div>
<div><span>Joe</span></div>
<div><span>Bloggs</span></div>
<div><span>j.bloggs@email.com</span></div>
<div><span>jbloggs.com</span></div>
<div><span>UK</span></div>
<button class="change" class="button button-accept">change</button>
</div>
 
<div class="datacolumn">
<div><span>01 01 2016</span> dob</div>
<div><span>Jane</span></div>
<div><span>Doe</span></div>
<div><span>j.doe@email.com</span></div>
<div><span>jdoe.com</span></div>
<div><span>USA</span></div>
<button class="change" class="button button-accept">change</button>
</div>
 
<div class="datacolumn">
<div><span>01 01 2016</span> dob</div>
<div><span>Joe</span></div>
<div><span>Bloggs</span></div>
<div><span>j.bloggs@email.com</span></div>
<div><span>jbloggs.com</span></div>
<div><span>UK</span></div>
<button class="change" class="button button-accept">change</button>
</div>
</div> 
</div>
<script type="text/javascript">
$(document).ready(function () {

    $('.change').on("click", function () {
        var divs = $(this).parent("div").find("span");
        $.each(divs, function (i, v) {
		
            $($(".new_form input:text")[i]).val($(v).text());
			var allInputs = $( ":input" );
var formChildren = $( "form input:text" );

			
        });
    });
});
</script>
Link to comment
Share on other sites
sonicthehedgehog Newbie

sonicthehedgehog

Posted
  • Author
Posted

I changed the open divs, but it's still not working. I've attached the code below with comments to if that helps

<script type="text/javascript">
$(document).ready(function () {
 
    $('#change').on("click", function () { // I can't change the class of the button so have put it is a span with an id called change
        var divs = $(this).parent(".datacolumn").find("span"); // This is the class of the div containing all of the divs and spans
        $.each(divs, function (i, v) {
 
            $($(".new_form input:text")[i]).val($(v).text());
var allInputs = $( ":input" );
var formChildren = $( ".new_form input:text" ); // I changed this because the form is actually huge and there's around 50 inputs but I only want to change the ones within the new_form class div
 
 
        });
    });
});
</script>
Link to comment
Share on other sites
john_jack Newbie

john_jack

Posted
Posted

i forgot to mention that i changed <button id="change" >to <button class="change"> .

if you try the code i pasted it will work . just remove the static content and replace it with what ever phpis printing from database .or post your full code below and i will take a look at it

var allInputs = $( ":input" );
var formChildren = $( ".new_form input:text" ); // I changed this because the form is actually huge and there's around 50 inputs but I only want to change the ones within the new_form class div

this is useless i forgot to remove it ,i used it for testin purposes.

 

first do this replace id="change" to class="change" in the buttons ,then change $("#change").onclick to $(".change") .

 

and try this script

<script type="text/javascript">
$(document).ready(function () {

    $('.change').on("click", function () {
        var divs = $(this).parent("div").find("span");
        $.each(divs, function (i, v) {
		
            $($(".new_form input:text")[i]).val($(v).text());
			var allInputs = $( ":input" );
var formChildren = $( "form input:text" );

			
        });
    });
});
</script>
Link to comment
Share on other sites
john_jack Newbie

john_jack

Posted
Posted 
$('#change').on("click", function () { // I can't change the class of the button so have put it is a span with an id called change

use this instead 

 $('.datacolumn #change').on("click", function ()

this will definetely work Good luck

Link to comment
Share on other sites
sonicthehedgehog Newbie

sonicthehedgehog

Posted
  • Author
Posted (edited)

I've changed the code to this now:

<script type="text/javascript">
$(document).ready(function () {
$j('body').on('click', '.datacolumn #change', function (e) {
        var divs = $j(this).parent('.datacolumn').find('span');
        console.log(divs);
        $.each(divs, function (i, v) {
console.log("AA");
            $j($('.new_form input')[i]).val($j(v).text());
        });
}) ;
});
</script>
Which gives me this in the console:

[prevObject: v.fn.v.init[0], context: button.change, selector: ".parent(.datacolumn) span"]
but it doesn't go any futher than that and I'm not sure why or how to fix it. Thanks for helping with this.
Edited by sonicthehedgehog
Link to comment
Share on other sites
sonicthehedgehog Newbie

sonicthehedgehog

Posted
  • Author
Posted


I've changed the code so that an id is attached to the button too (the id of the button is now set to change_0 (or whatever the number is). I've also added an id the the datacolumn div that is data_0 (or again whatever the number is).


Now what I want to do it get the data from the div into the form. The div should now look something like this:


<div class="datacolumn" id="data_0">

<div><span>01 01 2016</span></div>

<div><span>Jane</span> </div>

<div><span>Doe</span> </div>

<div><span>j.doe@email.com</span> </div>

<div><span>jdoe.com</span> </div>

<div><span>USA</span> </div>

<span class="button button-accept">

            <button type="submit" name="change" value="change" class="change" id="change_0">

            Change

            </button>

</span></div>


with the js now looking like this:


<script type="text/javascript">

$j(document).ready(function($) {

$j('body').on('click', '.change', function (e) {

        var divs = $j(this).parent('.datacolumn').find('span');

        console.log(divs);

        $.each(divs, function (i, v) {

            $j($('.new_form input')[i]).val($j(v).text());

        });

}) ;

}) ;

</script>


but I'm not getting past the console.log(divs) line
Link to comment
Share on other sites
john_jack Newbie

john_jack

Posted
Posted

i removed the span around the button + i attached the Click event to .change instead of body also i use $ instead of $j :

<html><head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="new_form">
<form method="post">
<div style="width: 175px;">Date of Birth</div><input class="text" type="text" name="date" id="date" value="">


 
<div style="width: 175px;">First Name </div>
<input class="text" type="text" name="firstname" id="firstname" value="">
 
 
<div style="width: 175px;">Last Name </div>
<input class="text" type="text" name="lastname" id="lastname" value="">
 


<div style="width: 175px;">Email </div>
<input class="text" type="text" name="email" id="email" value=""> 
 
<div style="width: 175px;">Website </div>
<input class="text" type="text" name="website" id="website" value="">
 
<div style="width: 175px;">Country </div>
<input class="text" type="text" name="country" id="country" value="">
<input type="submit" value="Update" />
</form></div>
<div class="datacolumn" id="data_0">
<div><span>01 01 2016</span></div>
<div><span>Jane</span> </div>
<div><span>Doe</span> </div>
<div><span>j.doe@email.com</span> </div>
<div><span>jdoe.com</span> </div>
<div><span>USA</span> </div>

            <button  name="change" class="change" id="change_0">
            Change
            </button>
</div>
<div class="datacolumn" id="data_1">
<div><span>XXXX01 01 2016</span></div>
<div><span>XXXXXJane</span> </div>
<div><span>XXXXDoe</span> </div>
<div><span>XXXXj.doe@email.com</span> </div>
<div><span>XXXXXjdoe.com</span> </div>
<div><span>XXXXXUSA</span> </div>

            <button  name="change" class="change" id="change_0">
            Change
            </button>
</div>

<script type="text/javascript">
$(document).ready(function($) {
$('.change').on('click', function (e) {
        var divs = $(this).parent('div').find('span');
        //console.log(divs);
        $.each(divs, function (i, v) {
            $($('.new_form input')[i]).val($(v).text());
        });
}) ;
}) ;
</script>
</body>
</html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...