/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] align the fields onClick() with a call to document.insertBefore()

folks.. i have a simple table having two fields “Author ” and “Title”. Now One title can have many authors. So with authors, i have a button “Add”. OnClick(), i call a function which adds an element (textField) to it.

Now problem is that the text field added is placed randomly and not just below the Author Field

My Code is
<script>
var element=null;
var my_div=null
try {
element = document.createElement(“<input name=’a’ type=’text’ />”);
} catch (e) {

element = document.createElement(“input”);
element.setAttribute(“name”, “a1”);
element.setAttribute(“type”, “text”);

// element.setAttribute(“align”,”center”);
}
try{
my_div = document.forms[0].getElementById(“author”);
}catch(e){}
document.forms[0].insertBefore(element, my_div);

return element;

</script>
<table border=”0″>
<tr>
<td>Author</td>
<td> <input text=”text” name=”author” id=”author”/> </td>
<td><input type=”button” name=”btn” id=”btn” value=”Add” onclick=” return AddAuthor()”/></td>
<tr>
<td>Title</title>
<td> <input text=”text” name=”title” id=”title”/><td>
</tr>
</table>

Is it possible that when i click the “Add” Button, the new text field should
be placed just below the previous one and the second text field (Title) should automatically align itself?

Looking forward to reply

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@FangJul 01.2008 — function AddAuthor() {
var my_div = document.getElementById("author");
var authors = 'a';
authors += my_div.parentNode.getElementsByTagName('input').length;
var element=null;
try {
element = document.createElement("&lt;input name='"+authors+"' type='text' /&gt;");
}
catch (e) {
element = document.createElement("input");
element.setAttribute("name", authors);
element.setAttribute("type", "text");
}
my_div.parentNode.appendChild(element);
}
input {display:block;}
Copy linkTweet thisAlerts:
@persiankamranauthorJul 01.2008 — thanks alot dude. That solve the matter. thanks

btw what is

"input {display:block;}"
Copy linkTweet thisAlerts:
@FangJul 01.2008 — Makes [I]input [/I]a block element so they will align in a column.
Copy linkTweet thisAlerts:
@persiankamranauthorJul 01.2008 — Thanks dude

I have one more question. Let say i post all the items on a PHP script. I want to get all the authors (all values entered in text field that were added by Javascript)

Now if i had one field, i used

$auth=$_GET['author'];

But how to get the values in the textfields added through Javascript as all of them have same name?
Copy linkTweet thisAlerts:
@FangJul 01.2008 — The script given would give inputs of: 'author', 'a1', 'a2', etc.

You could change it to give an array, 'author[]', with an option to limit the number of authors.

Either way just use [I]foreach[/I] loop to separate the name/value pairs.
×

Success!

Help @persiankamran spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...