jquery empty string field exception handling

Question

In the beginning I use alert but felt it's not that nice.. It add extra step to the user and quite annoying..

I want to do like if field is empty then restore the previous value.

<ul id="task-group">
                <li class="active"><a href="#">Personal</a></li>
                                    <li class="active"><a href="#">Work</a></li>

            </ul>   


                <input type="text" name="task-group" style="display:none">

jquery:

$(document).ready(function () {

var addInput = $('input[name="task-group"]').hide();
var beforeItems = $('li.active');

beforeItems.on('dblclick', itemClick);

function inputKeydown(e) {
    var $this = $(e.target).closest('input[type="text"]');

    if (e.keyCode == 13) {
        $this.blur();
    }
}

function itemClick(e) {
    var $this = $(e.target).closest('li.active');
    var txt = $this.find('a').text();

    var input = $("<input type='text'/>").val(txt);
    $this.html('');

    input.appendTo($this).focus();
    input.on('blur', editInputBlur);
    input.keydown(inputKeydown);
}


function editInputBlur(e) {
    var $this = $(e.target).closest('input[type="text"]');
    var v = $this.val();

    if (v.trim() == "") {

    } else {
        var $a = $("<a href='#'>" + v + "</a>");
        $this.parent().append($a);
        $this.remove();
    }
}


});

but I always got empty html field with val() method, help.. (line 34)

http://jsfiddle.net/VE7Tq/1/

when the user double click and edit the li, and it's empty, how to don't do anything? means to restore previous value.. — cgpa2.17, Aug 06 '13 at 10:52

Praveen · Answer 1 · 2013-08-06T11:16:22.737

1

As per my understanding, you're trying to check the textbox. If it is empty, replace with its pervious value.

a simple logic:

1) Change the scope of txt variable to Global.

txt = $this.find('a').text();  // remove var keyword

2) Then you can access it anywhere. On textbox blur event, check if the for empty value(you already do that) so

make a statement like this

if (v.trim() == "") {
        $this.val(txt);   // Replace with the previous value
    } else {
        var $a = $("<a href='#'>" + v + "</a>");
        $this.parent().append($a);
        $this.remove();
    }

Check this JSFiddle

Hope you understand this logic.

Update: Little optimized answer, better go with this

var v = $this.val();
    if (v.trim() == "") {
        v= txt;
    } 
var $a = $("<a href='#'>" + v + "</a>");
$this.parent().append($a);
$this.remove();

Updated JSFiddle,

I think you can understand the difference between these fiddles.

edited Aug 06 '13 at 11:16

answered Aug 06 '13 at 11:10

Praveen

55,303
33
133
164

1. why remove the var ? is that make it a gobal variable? 2. actually I want when it's empty field, it append back the previous value anyway, thansk! – cgpa2.17 Aug 06 '13 at 11:15
@NurulLia 1. Yes, removing var makes it global. 2. check my updated answer. – Praveen Aug 06 '13 at 11:19
@NurulLia To support my comments(Removing var keyword), I would like you to take a look at this http://stackoverflow.com/questions/1470488/difference-between-using-var-and-not-using-var-in-javascript – Praveen Aug 06 '13 at 11:21
I checked, but what I want is after the blur method, the input field turn back be a list item.. – cgpa2.17 Aug 06 '13 at 11:32
@NurulLia I thought you're trying like that. Brief a little more so I can give some feedback. – Praveen Aug 06 '13 at 11:48

score 0 · Answer 2 · answered Aug 06 '13 at 10:25

0

try this

syntax error

if (v.trim() == "") {//wrong

replace with

if ($.trim(v) == "") {//right syntax

answered Aug 06 '13 at 10:25

sangram parmar

8,462
2
23
47

jquery empty string field exception handling

2 Answers2