Re-populating form - how do I do it?

JavaScript
1

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? One of the problems is that the input names can change as they’re all dynamic and new input fields can be added (as well as old ones removed).

I’ve got the details in the database and am loading them onto the page but the problem I’ve 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

2

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:

[code]

01 01 2016
Jane
Doe
j.doe@email.com
jdoe.com
USA
Change
[/code]

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

3

Try using http://codepen.io/ it’ll be easier for people to see it in action an perhaps help you out

4

Shouldn’t it be .parents not ,parent as parent only gets the immediate parent which would be the span around the button.

e.g.

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

5

Now that’s a bit mean. You might want him to use codepen but the rest of us can work perfectly fine either way.

It works for me when I remove the hidden gender input, at least the first set of person data does.

What you can do to get the rest of them working is to use a class for the change buttons instead of an id. Identifiers are known as “unique identifiers”, so the same name for them is not allowed. Use a class name instead and you’ll be good there.

You can see a tidier working example at http://codepen.io/anon/pen/WrENWa?editors=101

6

Didn’t realize I was being mean, I have been asked to use it in the past. And at times it makes things easier. So sorry for being mean I reckon.

7

That’s alright. There was a possibility misunderstanding that you wouldn’t help unless codepen was used, so it’s good to clear that up.

8

I did try that originally but when it was’t working somebody suggested I removed it so I did but when you’re saying makes sense so I’ll change it back.

9

Thank you that’s exactly what I’m after although the problem is that I really do need the hidden input fields as they will contain details just as their id number and other details like that that I’ll use to update the right record in the database.

10

[quote=“coding_noobie, post:9, topic:212120, full:true”]
Thank you that’s exactly what I’m after although the problem is that I really do need the hidden input fields as they will contain details.[/quote]

Not a problem, now that we know it’s working those hidden fields can be put back. I suggest at the end of the form, so that no further scripting changes will be needed.

11

Thank you :slight_smile:

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.