Why this code don't work

#1

Hi every:
I need to add some fields when a user clic a link. For this purpose I
build this piece of code:

[jQuery/JS Code]
$('#another').click(function(){
$('#word').append('<label for="word2"></label><input type="text"
name="word2" id="word2" value="" size="50" />');
});

[HTML Code]
<label for="word">Texto:</label>
<input type="text" name="word" id="word" value="" size="50" /> <a
href="#" id="another">Adicionar criterio</a>

But for some reason when I click the link it doesn't work. Can any help
me to fix this?
--
Cheers
ReynierPM

#2

You should be doing $('#word').after('<label for="word2"></label><input
type="text" name="word2" id="word2" value="" size="50" />');

append() would add your HTML code as a child of that input, hence you will
not get the desired results.

Thanks & Regards,
Dhruva Sagar.

Pablo Picasso<http://www.brainyquote.com/quotes/authors/p/pablo_picasso.html>
- "Computers are useless. They can only give you answers."

On Tue, Nov 3, 2009 at 8:44 AM, ReynierPM <rperezm (AT) uci (DOT) cu> wrote:

Quote:

Hi every:
I need to add some fields when a user clic a link. For this purpose I build
this piece of code:

[jQuery/JS Code]
$('#another').click(function(){
$('#word').append('<label for="word2"></label><input type="text"
name="word2" id="word2" value="" size="50" />');
});

[HTML Code]
label for="word">Texto:</label
input type="text" name="word" id="word" value="" size="50" /> <a href="#"
id="another">Adicionar criterio</a

But for some reason when I click the link it doesn't work. Can any help me
to fix this?
--
Cheers
ReynierPM

#3

Dhruva Sagar wrote:

Quote:

You should be doing $('#word').after('<label for="word2"></label><input
type="text" name="word2" id="word2" value="" size="50" />');

This doesn't work too. I try and get none HTML input added after
input#word. Why?

--
Saludos
ReynierPM

#4

Where have you added the $('#another').click() ?
Is it even in $(document).ready() or not ? Are you sure that the click
handler is even being called ?

I have created a test.html and tested what you want, it works perfectly for
me.

<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.pack.js"
type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function() {
$('#another').click(function() {
$('#word').after('<label for="word2"></label><input
type="text" name="word2" id="word2" value="" size="50" />');
});
});
// ]]>
</script>
</head>
<body>
<label for="word">Texto:</label>
<input type="text" name="word" id="word" value="" size="50" />
<a href="#" id="another">Adicionar criterio</a>
</body>
</html>

Thanks & Regards,
Dhruva Sagar.

Jonathan Swift<http://www.brainyquote.com/quotes/authors/j/jonathan_swift.html>
- "May you live every day of your life."

On Tue, Nov 3, 2009 at 8:53 AM, ReynierPM <rperezm (AT) uci (DOT) cu> wrote:

Quote:

Dhruva Sagar wrote:

You should be doing $('#word').after('<label for="word2"></label><input
type="text" name="word2" id="word2" value="" size="50" />');

This doesn't work too. I try and get none HTML input added after
input#word. Why?

--
Saludos
ReynierPM

#5

Dhruva Sagar wrote:

Quote:

Where have you added the $('#another').click() ?
Is it even in $(document).ready() or not ? Are you sure that the click
handler is even being called ?

I have created a test.html and tested what you want, it works perfectly for
me.

html
head
title></title
script src="http://code.jquery.com/jquery-latest.pack.js"
type="text/javascript" language="javascript" charset="utf-8"></script
script type="text/javascript" language="javascript" charset="utf-8"
// <![CDATA[
$(document).ready(function() {
$('#another').click(function() {
$('#word').after('<label for="word2"></label><input
type="text" name="word2" id="word2" value="" size="50" />');
});
});
// ]]
/script
/head
body
label for="word">Texto:</label
input type="text" name="word" id="word" value="" size="50" /
a href="#" id="another">Adicionar criterio</a
/body
/html

Thanks & Regards,
Dhruva Sagar.

Ohh I see my mistake now I forget to write this code inside $().ready()
for that it wont work. Now I have a second question: how I can generate
dinamically the number for element input id? I mean every time I click
the link the id will be incremented in one so will be: word1, word2, wordn
Thanks
--
Saludos
ReynierPM

#6

Well I have made some changes to the test.html to achieve the desired
results :

<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.pack.js"
type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function() {
$('#another').click(function() {
var id = "word" + $('input').length
$('input:last').after('<label for="' + id + '"></label><input
type="text" name="' + id + '" id="' + id + '" value="" size="50" />');
return false;
});
});
// ]]>
</script>
</head>
<body>
<label for="word">Texto:</label>
<input type="text" name="word" id="word" value="" size="50" />
<a href="" id="another">Adicionar criterio</a>
</body>
</html>

This will achieve what you want.
Thanks & Regards,
Dhruva Sagar.

Joan Crawford<http://www.brainyquote.com/quotes/authors/j/joan_crawford.html>
- "I, Joan Crawford, I believe in the dollar. Everything I earn, I
spend."

On Tue, Nov 3, 2009 at 9:08 AM, ReynierPM <rperezm (AT) uci (DOT) cu> wrote:

Quote:

Dhruva Sagar wrote:

Where have you added the $('#another').click() ?
Is it even in $(document).ready() or not ? Are you sure that the click
handler is even being called ?

I have created a test.html and tested what you want, it works perfectly
for
me.

html
head
title></title
script src="http://code.jquery.com/jquery-latest.pack.js"
type="text/javascript" language="javascript" charset="utf-8"></script
script type="text/javascript" language="javascript" charset="utf-8"
// <![CDATA[
$(document).ready(function() {
$('#another').click(function() {
$('#word').after('<label for="word2"></label><input
type="text" name="word2" id="word2" value="" size="50" />');
});
});
// ]]
/script
/head
body
label for="word">Texto:</label
input type="text" name="word" id="word" value="" size="50" /
a href="#" id="another">Adicionar criterio</a
/body
/html

Thanks & Regards,
Dhruva Sagar.

Ohh I see my mistake now I forget to write this code inside $().ready() for
that it wont work. Now I have a second question: how I can generate
dinamically the number for element input id? I mean every time I click the
link the id will be incremented in one so will be: word1, word2, wordn
Thanks
--
Saludos
ReynierPM

#7

Dhruva Sagar wrote:

Quote:

Well I have made some changes to the test.html to achieve the desired
results :

html
head
title></title
script src="http://code.jquery.com/jquery-latest.pack.js"
type="text/javascript" language="javascript" charset="utf-8"></script
script type="text/javascript" language="javascript" charset="utf-8"
// <![CDATA[
$(document).ready(function() {
$('#another').click(function() {
var id = "word" + $('input').length
$('input:last').after('<label for="' + id + '"></label><input
type="text" name="' + id + '" id="' + id + '" value="" size="50" />');
return false;
});
});
// ]]
/script
/head
body
label for="word">Texto:</label
input type="text" name="word" id="word" value="" size="50" /
a href="" id="another">Adicionar criterio</a
/body
/html

This will achieve what you want.
Thanks & Regards,
Dhruva Sagar.

Joan Crawford<http://www.brainyquote.com/quotes/authors/j/joan_crawford.html
- "I, Joan Crawford, I believe in the dollar. Everything I earn, I
spend."

On Tue, Nov 3, 2009 at 9:08 AM, ReynierPM <rperezm (AT) uci (DOT) cu> wrote:

Thanks a lot, it works perfectly

--
Saludos
ReynierPM

#8

Hi Dhruva:
I'm trying to build a simple search form. Would be nice if the user can
add her/his own fields for make the search better. What I mean? If you
take only one input then the search will be limited to this only field
containing one or more words. By the contrary if the user could add some
fields and specify criteria like "&&" or "||" the search will be better.
For that purpose I made some changes to the code. See below:

<script type="text/javascript">
$().ready(function(){
$('#clicy').click(function(){
var id = "word" + $('input').length;
var hid = "hw" + $('input').length;
$('input:last').after('<br/><label for="'+id+'">&&</label><input
type="text" name="'+id + '" id="'+id + '" value="" size="30" /> <input
type="hidden" name="'+hid+'" id="'+hid+'" value="&&"/>');
return false;
});
$('#clico').click(function(){
var id = "word" + $('input').length;
var hid = "hw" + $('input').length;
$('input:last').after('<br/><label for="'+id+'">||</label><input
type="text" name="'+id + '" id="'+id + '" value="" size="30" /> <input
type="hidden" name="'+hid+'" id="'+hid+'" value="||"/>');
return false;
});
});
</script>

<form action="search/DoSearch" method="post">
<label for="word">Texto:</label>
<input type="text" name="word" id="word" value="" size="50" />
<div><input type="submit" value="Buscar !!!" /></div>
</form>
<a href="#" id="clicy">Adicionar criterio de búsqueda (&&)</a> | <a
href="#" id="clico">Adicionar criterio de búsqueda (||)</a>

As you notice here when I clic the link#clicy two fields are added: one
hidden with && as value and another with word+id as id with no value.
The same happen with the link#clico but the value of hidden field goes
to ||. This code works fine but two things happen here.

1) When you click for first time in a link (#clicy or #clico) the field
is added but I need add a hidden field just behind the input#word. How?

2) The fields are added just behind the SUBMIT button, how I can add
just between the first field and the submit button?

Cheers and thanks in advance

--
Saludos
ReynierPM

#9

Hi ReynierPM,
*
*
*The following is the test.html i've written for you, i've tweaked it a bit
to get the right id's & also to solve the 2 problems you listed.*
*Try it and see if it does what you wish to do :*

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"
type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
$().ready(function(){
$('#clicy').click(function(){
var id = "word" + $('input[type!=hidden]').length;
var hid = "hw" + $('input').length;
$('input[type=submit]').before('<br/><input type="hidden" name="'+hid+'"
id="'+hid+'" value="&&"/><label for="'+id+'">&&</label><input type="text"
name="'+id + '" id="'+id + '" value="" size="30" /><br/>');
return false;
});
$('#clico').click(function(){
var id = "word" + $('input[type!=hidden]').length;
var hid = "hw" + $('input[type=hidden]').length;
$('input[type=submit]').before('<br/><input type="hidden" name="'+hid+'"
id="'+hid+'" value="||"/><label for="'+id+'">||</label><input type="text"
name="'+id + '" id="'+id + '" value="" size="30" /><br/>');
return false;
});
});
//]]>
</script>
</head>
<body>
<form action="search/DoSearch" method="post">
<label for="word">Texto:</label>
<input type="text" name="word" id="word" value="" size="50" />
<div><input type="submit" value="Buscar !!!" /></div>
</form>
<a href="" id="clicy">Adicionar criterio de bÃºsqueda (&&)</a> | <a href=""
id="clico">Adicionar criterio de bÃºsqueda (||)</a>
</body>
</html>

*
*Thanks & Regards,
Dhruva Sagar.

Ted Turner <http://www.brainyquote.com/quotes/authors/t/ted_turner.html> -
"Sports is like a war without the killing."

On Wed, Nov 4, 2009 at 8:31 AM, ReynierPM <rperezm (AT) uci (DOT) cu> wrote:

Quote:

Hi Dhruva:
I'm trying to build a simple search form. Would be nice if the user can add
her/his own fields for make the search better. What I mean? If you take only
one input then the search will be limited to this only field containing one
or more words. By the contrary if the user could add some fields and specify
criteria like "&&" or "||" the search will be better. For that purpose I
made some changes to the code. See below:

script type="text/javascript"
$().ready(function(){
$('#clicy').click(function(){
var id = "word" + $('input').length;
var hid = "hw" + $('input').length;
$('input:last').after('<br/><label for="'+id+'">&&</label><input
type="text" name="'+id + '" id="'+id + '" value="" size="30" /> <input
type="hidden" name="'+hid+'" id="'+hid+'" value="&&"/>');
return false;
});
$('#clico').click(function(){
var id = "word" + $('input').length;
var hid = "hw" + $('input').length;
$('input:last').after('<br/><label for="'+id+'">||</label><input
type="text" name="'+id + '" id="'+id + '" value="" size="30" /> <input
type="hidden" name="'+hid+'" id="'+hid+'" value="||"/>');
return false;
});
});
/script

form action="search/DoSearch" method="post"
label for="word">Texto:</label
input type="text" name="word" id="word" value="" size="50" /
div><input type="submit" value="Buscar !!!" /></div
/form
a href="#" id="clicy">Adicionar criterio de bÃºsqueda (&&)</a> | <a
href="#" id="clico">Adicionar criterio de bÃºsqueda (||)</a

As you notice here when I clic the link#clicy two fields are added: one
hidden with && as value and another with word+id as id with no value. The
same happen with the link#clico but the value of hidden field goes to ||.
This code works fine but two things happen here.

1) When you click for first time in a link (#clicy or #clico) the field is
added but I need add a hidden field just behind the input#word. How?

2) The fields are added just behind the SUBMIT button, how I can add just
between the first field and the submit button?

Cheers and thanks in advance

--
Saludos
ReynierPM

#10

A minor mistake in the previous mail, please take this into consideration
and neglect the previous mail :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"
type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
$().ready(function(){
$('#clicy').click(function(){
var id = "word" + $('input[type!=hidden]').length;
var hid = "hw" + $('input[type=hidden]').length;
$('input[type=submit]').before('<br/><input type="hidden" name="'+hid+'"
id="'+hid+'" value="&&"/><label for="'+id+'">&&</label><input type="text"
name="'+id + '" id="'+id + '" value="" size="30" /><br/>');
return false;
});
$('#clico').click(function(){
var id = "word" + $('input[type!=hidden]').length;
var hid = "hw" + $('input[type=hidden]').length;
$('input[type=submit]').before('<br/><input type="hidden" name="'+hid+'"
id="'+hid+'" value="||"/><label for="'+id+'">||</label><input type="text"
name="'+id + '" id="'+id + '" value="" size="30" /><br/>');
return false;
});
});
//]]>
</script>
</head>
<body>
<form action="search/DoSearch" method="post">
<label for="word">Texto:</label>
<input type="text" name="word" id="word" value="" size="50" />
<div><input type="submit" value="Buscar !!!" /></div>
</form>
<a href="" id="clicy">Adicionar criterio de bÃºsqueda (&&)</a> | <a href=""
id="clico">Adicionar criterio de bÃºsqueda (||)</a>
</body>
</html>

Thanks & Regards,
Dhruva Sagar.

Stephen Leacock<http://www.brainyquote.com/quotes/authors/s/stephen_leacock..html>
- "I detest life-insurance agents: they always argue that I shall some
day
die, which is not so."

On Wed, Nov 4, 2009 at 8:46 AM, Dhruva Sagar <dhruva.sagar (AT) gmail (DOT) com> wrote:

Quote:

Hi ReynierPM,
*
*
*The following is the test.html i've written for you, i've tweaked it a
bit to get the right id's & also to solve the 2 problems you listed.*
*Try it and see if it does what you wish to do :*

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
head
script src="http://code.jquery.com/jquery-latest.pack.js"
type="text/javascript" language="javascript" charset="utf-8"></script
script type="text/javascript"
//<![CDATA[
$().ready(function(){
$('#clicy').click(function(){
var id = "word" + $('input[type!=hidden]').length;
var hid = "hw" + $('input').length;
$('input[type=submit]').before('<br/><input type="hidden" name="'+hid+'"
id="'+hid+'" value="&&"/><label for="'+id+'">&&</label><input type="text"
name="'+id + '" id="'+id + '" value="" size="30" /><br/>');
return false;
});
$('#clico').click(function(){
var id = "word" + $('input[type!=hidden]').length;
var hid = "hw" + $('input[type=hidden]').length;
$('input[type=submit]').before('<br/><input type="hidden" name="'+hid+'"
id="'+hid+'" value="||"/><label for="'+id+'">||</label><input type="text"
name="'+id + '" id="'+id + '" value="" size="30" /><br/>');
return false;
});
});
//]]
/script
/head
body
form action="search/DoSearch" method="post"
label for="word">Texto:</label
input type="text" name="word" id="word" value="" size="50" /
div><input type="submit" value="Buscar !!!" /></div
/form
a href="" id="clicy">Adicionar criterio de bÃºsqueda (&&)</a> | <a
href="" id="clico">Adicionar criterio de bÃºsqueda (||)</a
/body
/html

*
*Thanks & Regards,
Dhruva Sagar.

Ted Turner <http://www.brainyquote.com/quotes/authors/t/ted_turner.html> - "Sports is like a war without the killing."

On Wed, Nov 4, 2009 at 8:31 AM, ReynierPM <rperezm (AT) uci (DOT) cu> wrote:

Hi Dhruva:
I'm trying to build a simple search form. Would be nice if the user can
add her/his own fields for make the search better. What I mean? If you take
only one input then the search will be limited to this only field containing
one or more words. By the contrary if the user could add some fields and
specify criteria like "&&" or "||" the search will be better. For that
purpose I made some changes to the code. See below:

script type="text/javascript"
$().ready(function(){
$('#clicy').click(function(){
var id = "word" + $('input').length;
var hid = "hw" + $('input').length;
$('input:last').after('<br/><label for="'+id+'">&&</label><input
type="text" name="'+id + '" id="'+id + '" value="" size="30" /> <input
type="hidden" name="'+hid+'" id="'+hid+'" value="&&"/>');
return false;
});
$('#clico').click(function(){
var id = "word" + $('input').length;
var hid = "hw" + $('input').length;
$('input:last').after('<br/><label for="'+id+'">||</label><input
type="text" name="'+id + '" id="'+id + '" value="" size="30" /> <input
type="hidden" name="'+hid+'" id="'+hid+'" value="||"/>');
return false;
});
});
/script

form action="search/DoSearch" method="post"
label for="word">Texto:</label
input type="text" name="word" id="word" value="" size="50" /
div><input type="submit" value="Buscar !!!" /></div
/form
a href="#" id="clicy">Adicionar criterio de bÃºsqueda (&&)</a> | <a
href="#" id="clico">Adicionar criterio de bÃºsqueda (||)</a

As you notice here when I clic the link#clicy two fields are added: one
hidden with && as value and another with word+id as id with no value. The
same happen with the link#clico but the value of hidden field goes to ||..
This code works fine but two things happen here.

1) When you click for first time in a link (#clicy or #clico) the field is
added but I need add a hidden field just behind the input#word. How?

2) The fields are added just behind the SUBMIT button, how I can add just
between the first field and the submit button?

Cheers and thanks in advance

--
Saludos
ReynierPM