Question

I’m converting an input field to reqular text with this snippet.

$(".supernappula").live('click', function() {
   $('.item-quantity .simpleCart_input').replaceWith(function(){
   return '<span class='+this.className+'>'+this.value+'</span>'
   })    
});

However, if the value has already been changed from input to span, it will convert it to undefined and it shouldn’t do it.

I was thinking a solution like this:

$(".supernappula").live('click', function() {
    var howmany = $('.item-quantity .simpleCart_input').html();
    if(howmany == "undefined"){return false;}
        $('.item-quantity .simpleCart_input').replaceWith(function(){
        return '<span class='+this.className+'>'+this.value+'</span>'
        });
});

But it doesn’t actually do anything. So basically, how would I stop it from executing if it’s already converted?

Answer 1

Encase your replace with a if condition

$(".supernappula").live('click', function() {
   if( $('.item-quantity .simpleCart_input').length){
      $('.item-quantity .simpleCart_input').replaceWith(function(){
         return '<span class='+this.className+'>'+this.value+'</span>'
      }) 
    }   
});

EDIT

Both the class names are assigned to the same input .. You are using the wrong selector..

Try this $('.item-quantity.simpleCart_input')

UPDATED FIDDLE

What $('.item-quantity .simpleCart_input') means is that .simpleCart_input is a child of .item-quantity which is wrong in your case ..

Both classes are associated to the same element .. So your selector should not have any spaces between them..