Jquery UI Mobile returning empty value for form

Question

I cannot seem to figure this out. You can view an example of what I've done so far here: http://jsfiddle.net/aCUQC/1/

When a user does a search, an 'x' will appear. Click the 'x' to submit the form.

I am able to 'submit' the form; however, I cannot get it to read the input text value!

The HTML is as followed:

<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<br />
<br />
<div data-role="collapsible" data-collapsed="false" data-mini="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-theme="x">
    <form method="GET" action="search.do" data-ajax="false" style="height: 40px;" id="smartSearch">
        <input data-inline="true" type="text" data-type="search" data-corners="false" name="q" placeholder="Type Name Here (e.g. John Smith)" data-mini="true" autocomplete="off" />
    </form>
</div>

The JS:

$('#smartSearch').on('click', '.ui-input-clear', function (e) {
    e.preventDefault(); // prevent the link's default behaviour
    $('form#smartSearch').submit(); 
});

Your help is appreciated! Thanks!

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

1) You are targeting the wrong icon - the correct icon to target is .ui-icon-delete - You were preventing behavior of the incorrect element.

2) You need to actually do something to get the value. This is where jQuery's .val() comes in handy.

Here is some updated code targeting the correct icon. I used return false instead of prevent default.

$("#smartSearch .ui-icon-delete").click(function() {
    var text = $("input").val();
    alert(text);
    $('form#smartSearch').submit(); 
    return false;
});

Demo: http://jsfiddle.net/aCUQC/3/

If you are interested in the difference between return false and prevent default you can read this.

edited May 23 '17 at 10:25

Community

1
1

answered Aug 08 '13 at 16:40

Jon

976
8
23

Thanks for the clarification. I have tried using the code above and it just returns an empty string. Any idea why? – user1652920 Aug 08 '13 at 17:11
Try giving the input an id in your HTML and instead of var text = $("input").val(); do var text = $("#yourID").val(); – Jon Aug 08 '13 at 18:28
Did you acutally assign the id as "q"? In your code you just have name="q". – Jon Aug 08 '13 at 18:35
Yes, I have included id="q" in my HTML. Still no luck – user1652920 Aug 08 '13 at 18:36
Can you post a fiddle with the code you are using? This is working for me: http://jsfiddle.net/aCUQC/4/ – Jon Aug 08 '13 at 18:38
It works after I added $(window).load(function(){ } Thanks so much! – user1652920 Aug 08 '13 at 19:04

Jquery UI Mobile returning empty value for form

1 Answers1