How to change span tag value with variable value jquery

Question

I wanna change value in span tag element with variable value jquery

I have code like below

<input type="file" name="pdffile" id="fileInput" class="form-control" placeholder="Browse" required>
<span id="pdf" style="display:none;"></span>

And I have jquery like this

$str = $("#fileInput").val();
$splt = $str.split(".");
$('#pdf').text('Your Extension is'.$splt[1]);

Why does it not work?

Use this code: $('#pdf').innerHTML('Your Extension is'.$splt[1]); — Aefits
– Aefits, Commented Jul 12, 2017 at 3:10
Do you mean the span should be automatically updated every time the input element is changed by the user? @elegent-user - .innerHTML is a property, not a function, but in any case it doesn't exist on jQuery objects. — nnnnnn
– nnnnnn, Commented Jul 12, 2017 at 3:24
You are concatenating javascript like it's php. At least that's my first impression. See my answer for more details. — Rob Monhemius
– Rob Monhemius, Commented Jul 12, 2017 at 3:35
@nnnnnn, .html is the correct method that I should have written. I missed. Thanks for pointing out the mistake. — Aefits
– Aefits, Commented Jul 12, 2017 at 5:36

lit · Accepted Answer · 2017-07-12 03:10:50Z

1

$('#fileInput').change(function() {
        $str = $("#fileInput").val();
        $splt = $str.split(".");
        $('#pdf').html('Your Extension is ' + $splt[1]);
});

answered Jul 12, 2017 at 3:10

lit

4601 gold badge4 silver badges14 bronze badges

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

Comments

Rob Monhemius · Accepted Answer · 2017-07-12 03:41:54Z

0

You are concatenating your variable wrong. You need to add a + and put the dot within the parenthesis. Also the display: none hides the result from view.

JSFiddle

html

<input type="file" name="pdffile" id="fileInput" class="form-control" placeholder="Browse" required>
<span id="pdf"></span>

js/jQuery

$("#fileInput").change(function(){
$str = $("#fileInput").val();
$splt = $str.split(".");
$('#pdf').text('Your Extension is .'+$splt[1]);
});

edited Jul 12, 2017 at 3:41

answered Jul 12, 2017 at 3:29

Rob Monhemius

5,1942 gold badges24 silver badges53 bronze badges

3 Comments

Louys Patrice Bessette Over a year ago

On the click event, the is no filename yet in the field... Or it is the previous filename.

Rob Monhemius Over a year ago

@Louys Patrice Bessette Hence the post scriptum.

Rob Monhemius Over a year ago

@Louys Patrice Bessette I wouldn't say wrong. The question doesn't specify when the function needs to be run. But I suppose it does makes the answer a bit clearer. So I changed it :).

Louys Patrice Bessette · Accepted Answer · 2017-07-12 03:47:32Z

0

In case of a filename containing dots in the filename part, like my.trip.pictures.jpg...
I suggest using regular expression to be sure to catch the last dot and the extention.

$("#fileInput").change(function() {
  
  var ext = $(this).val().match(/(.+)(\..+)/)[2];

  $('#pdf').show().text('Your Extension is ' + ext);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="pdffile" id="fileInput" class="form-control" placeholder="Browse" required>
<span id="pdf" style="display:none;"></span>

answered Jul 12, 2017 at 3:47

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Comments

guradio · Accepted Answer · 2017-07-12 03:55:17Z

0

$("#fileInput").change(function() {
  var qwe = $(this)[0].files;

  console.log(qwe[0].name.split('.').pop())// another option to get extension name
  $('#pdf').show().text('Your Extension is ' + qwe[0].name.slice(-3));

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="pdffile" id="fileInput" class="form-control" placeholder="Browse" required>
<span id="pdf" style="display:none;"></span>

Try this way

edited Jul 12, 2017 at 3:55

answered Jul 12, 2017 at 3:17

guradio

15.6k4 gold badges39 silver badges65 bronze badges

1 Comment

Rob Monhemius Over a year ago

Using slice(-3) will only retrieve the last three characters. This would cause issues with image formats like jpeg.

Collectives™ on Stack Overflow

How to change span tag value with variable value jquery

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related