Search jQuery

jQuery Forum

Adding multiple span elements to a div

in Using jQuery • 8 years ago

Good afternoon, apologies for what may seem like a trivial question.

I can't seem to wrap my brain around something I am trying to accomplish. I feel it is something straightforward that I am missing.

I am trying to add multiple spans to a error div so that when an input is made and the field has lost focus, I can remove the span that showed the error to begin with.

$('.required').val('');
$('#insert').on('click', function()
{
var valid = true;
msg = '';
sp = '';
$('.required').each(function()
{
var reqs = $(this);
reqd = reqs.attr('name');
if (!reqs.val())
{
valid = false;
if (reqd == 'username')
{
reqdfn = 'ID'
}
else if (reqd == 'lastname')
{
reqdfn = 'Last Name'
}
else if (reqd == 'firstname')
{
reqdfn = 'First Name'
}
else if (reqd == 'country')
{
reqdfn = 'Country'
}
msg += reqdfn + ' cannot be blank. <br/>';
reqs.css({'border': '1px solid #C33', 'background-color': '#F6CBCA'});
}
});
if (!valid)
{
//$('#error').html('');
$('#error').slideDown();
$('#error').append('<span class="' + reqd + '">' + msg + '<span>');
}
else
{
alert('Submitted');
}
});

There is a fiddle for it here

When I looked at Firebug and logged the value of reqd it was showing up as the last reqd in use.

I tried sp += reqd and obviously this gave me a value of all reqd's together as I did expect.

I am just stumped as to where I am going wrong.

Any pointers would be greatly appreciated.

Thanks.

As an aside, I tried putting the error append in the !valid check

when I try it this way, I am getting multiple spans in the div as follows: ID, ID + Firstname, ID + First Name + Last Name, ID + First Name + Last Name + Country. It seems to just be iterating through each one and shoving it in there as a span. Not quite sure where i'm going wrong.

The updated fiddle can be found here

Replies(8)

dsvick

Re: Adding multiple span elements to a div

8 years ago

Is this what you were looking for? http://jsfiddle.net/hsFX6/

Dave

wilcochris

Re: Adding multiple span elements to a div

8 years ago

Kind of. That's what I have in the 2nd fiddle. It's showing a span for each one and then adding to it as it is going through the error. So, it is showing span for id, then it adds the span for first name and shows id, first name and so on right through to country. This is what I was hoping I could get sorts so that it would only show 4 spans instead of 10

dsvick

Re: Adding multiple span elements to a div

8 years ago

sorry, that was odd ... I updated it and saved it but it still kept the same code as you had initially, here is what I really wanted: http://jsfiddle.net/hsFX6/2/

Dave

wilcochris

Re: Adding multiple span elements to a div

8 years ago

Kind of again. If you put reqdfn in the sp div it will only show the last reqd used. This is what I had tried first

dsvick

Re: Adding multiple span elements to a div

8 years ago

What do you want to appear in the "sp" div?

Also, in your initial post you said you wanted to insert multiple spans, your code is only adding a single span though.

Dave

wilcochris

Re: Adding multiple span elements to a div

8 years ago

Hi Dave, I was using the sp to show what was being returns by reqd. What I want to do is have a span for each of the 4 fields. It's basically so that when the field has been entered, I can then clear the span from the error div. I am using a .blur on each field to check if there is anything entered. If there is, it removes the red in the boxes. I would also like it to remove the span from the error div. So, as it shows each field name not allowed to be blank, so I would like it to show a span for each one. Ultimately, I would like an error div containing 4 spans that have id, last name, first name and country, instead of the way it is doing the span right now by appending it

dsvick

Re: Adding multiple span elements to a div

8 years ago

Try this: http://jsfiddle.net/79Ty9/

It'snot complete but I need to leave so can't spend more time on it but it should get you going in the right direction

Dave

wilcochris

Re: Adding multiple span elements to a div

8 years ago

Thanks Dave,

That is exactly what I was looking for.

I will have a tinker around with it and see if I can make the firstname span disappear and also see if I can get the empty div to hide. Thanks so much for giving me the pointer

Chris

Top Reply

Response title

Attachments

jQuery Forum

Adding multiple span elements to a div

Replies(8)

Re: Adding multiple span elements to a div

Re: Adding multiple span elements to a div

Re: Adding multiple span elements to a div

Re: Adding multiple span elements to a div

Re: Adding multiple span elements to a div

Re: Adding multiple span elements to a div

Re: Adding multiple span elements to a div

Re: Adding multiple span elements to a div

Statistics

Tags

Actions

Related Posts