How to get the value with span text by using jquery

Question

I am new to jquery. I designed form field input text with span text.

<div class="input-group" style="width:40%">
    <input type="text" name="emial" id= "emial" class="form-control" required="true"/>
    <span class="input-group-addon">@gmail.com</span>
</div>

i am trying get the value in jquery

var emial=$("#emial").val();

but i am getting only input text not with @gamil.com

@Pramod Patil: it's not duplicate please check care fully and read my question. — Durga
– Durga, Commented Apr 4, 2017 at 6:39
Possible duplicate of How do I get a value of a <span> using jQuery? — Amr Aly
– Amr Aly, Commented Apr 4, 2017 at 6:51
@Amr Aly: it's not duplicate please check care fully and read my question — Durga
– Durga, Commented Apr 4, 2017 at 7:12
Nothing personal but what i really see that you are trying to get the text of span am i right? — Amr Aly
– Amr Aly, Commented Apr 4, 2017 at 7:37

Pranav C Balan · Accepted Answer · 2017-04-04 06:31:07Z

3

You need to get the text content of span immediately after the element. Where use next() method to get the span element and use text() method to get the text content.

var $email = $("#emial");
var email = $email.val() + $email.next().text();

$('#email').on('input', function() {
  var $email = $(this);
  var email = $email.val() + $email.next().text();
  console.log(email);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group" style="width:40%">
  <input type="text" name="email" id="email" class="form-control" required="true" />
  <span class="input-group-addon">@gmail.com</span>
</div>

answered Apr 4, 2017 at 6:31

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagar Arora · Accepted Answer · 2017-04-04 06:31:19Z

1

Span is not input tag . val() is used for input type tags only.

use it like:

var emial = $("#emial").val() + $("#emial").next("span").text();

answered Apr 4, 2017 at 6:31

Sagar Arora

1,7831 gold badge11 silver badges20 bronze badges

Comments

Kirit · Accepted Answer · 2017-04-04 06:33:33Z

0

$( "#emial" ).html();

you will get the full result with html content

answered Apr 4, 2017 at 6:33

Kirit

524 bronze badges

Comments

Bhoomi · Accepted Answer · 2017-04-04 06:36:19Z

0

You need to use .text or .html method for span and div

var email=$('.input-group-addon').text();

or

var email=$('.input-group-addon').html();

In place of .input-group-addon give Id to the span call the same function

answered Apr 4, 2017 at 6:36

Bhoomi

417 bronze badges

Comments

Carsten Løvbo Andersen · Accepted Answer · 2017-04-04 06:42:23Z

0

To get the value of a span element, use either .text() or .html()

var emial =$("#emial").val() + $("#emial").next("span").text();

var emial=$("#emial").val() + $("#emial").next("span").text();
console.log(emial)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group" style="width:40%">
    <input type="text" name="emial" value="mail" id="emial" class="form-control" required="true"/>
    <span class="input-group-addon">@gmail.com</span>
</div>

edited Apr 4, 2017 at 6:42

answered Apr 4, 2017 at 6:31

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Collectives™ on Stack Overflow

How to get the value with span text by using jquery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related