How do I collapse this form when clicking the ".submit" button?

Question

I have a collapsible (enter your credit card info) form. When I click it it opens, but when I click submit I want it to close. Here's my html:

<div class= "addStuff">
<div data-role="collapsible" data-inset="true" id="ccdiv">
   <h5> New credit card</h5>         
      <div data-role="fieldcontain">
            <form id = "myForm">
        <input type="password" name="credit_card_number" id="credit_card_number" value="" placeholder="Credit Card Number">
        <input type="password" name="security_code" id="security_code" value="" placeholder="Security Code">
        <input type="date" name="expiration_date" id="expiration_date" value="" placeholder="Expiration Date">
        <input type="password" name="name" id="name" value="" placeholder="Name On Card">
        <input type="password" name="street_address" id="street_address" value="" placeholder="Street Address">
        <input type="text" name="city" id="city" value="" placeholder="City">
        <input type="number" name="zip_code" id="zip_code" value="" placeholder="Zip Code">

            <button type="button" class="submit" name="submit" value="submit">Submit</button>
            </form>
      </div>
</div>

And here is my JS attempt:

$(document).ready(function() {
$('.submit').click(function(){
    var creditcard = $('#credit_card_number').val();
    $('.accounts #CreditCards div[data-role="content"] #swipeMe').append('<li data-swipeurl="#" ><a href="#">' + creditcard + '</a></li>');
   // refresh view 
   $('#CreditCards ul').listview('refresh');

   // hide form
 alert('test'); 


 $('#myForm').slideUp();
 $('#myForm').trigger('collapse');

    });
});

attach the trigger event to submit, along with click – user1721135 Dec 12 '12 at 17:52 — user1721135, Dec 12 '12 at 17:52
Why your inputs are not inside your form? – sdespont Dec 12 '12 at 17:55 — sdespont, Dec 12 '12 at 17:55

score 1 · Accepted Answer · answered Dec 12 '12 at 19:15

1

Here is a link to a JsFiddle I worked on to try and get your code working http://jsfiddle.net/rvqRX/

I went thru line by line and commented each one out one at a time and found that the only line I had to comment out for it to behave correctly was this

$('#CreditCards ul').listview('refresh');

Not sure why... does it make any sense to you?

answered Dec 12 '12 at 19:15

Zack

2,789
33
60

It makes no sense to me, but it totally works. Must be a jQuery Mobile thing or whatever but u are awesome. – Squirrl Dec 12 '12 at 19:27

sdespont · Answer 2 · 2012-12-12T18:06:05.620

0

Add an ID to your form <form id="myForm">...</form>

Collapse your form where you want using a JQuery animation :

$('#myForm').slideUp();

edited Dec 12 '12 at 18:06

answered Dec 12 '12 at 17:53

sdespont

13,915
9
56
97

I put everything in a form and tried that, but still nothing. You can see my edits in the example above. WHat am I doing wrong? THanks :) – Squirrl Dec 12 '12 at 18:03
Just add the id to the form – sdespont Dec 12 '12 at 18:05
Even $('#myForm').hide(); ? – sdespont Dec 12 '12 at 18:07
Still nothing. Could it be a jQueryMobile thing? – Squirrl Dec 12 '12 at 18:13
Yes it could! By design, the JS code of your loaded page is not executed. Only the JS code of the first file loaded is taking into account. Try to put an ´alert('test')´ call in your click event. If the alert message is not displayed, your code is not executed. If it is the case, I will update my answer with a workaround – sdespont Dec 12 '12 at 18:31
Yeah the alert didn't pop up. I edited into the example, so u could see if I added it correctly. Thanks so much. :) – Squirrl Dec 12 '12 at 18:46

score 0 · Answer 3 · answered Dec 12 '12 at 17:55

0

On submit() of form, make sure your trigger to collapse the form is called using JQuery method . Is that what you are looking for?

answered Dec 12 '12 at 17:55

LPD

2,833
2
29
48

Yes, but what does that look like `$('#myForm').trigger('collapse');` doesn't seem to work – Squirrl Dec 12 '12 at 18:01
http://stackoverflow.com/questions/1065730/collapsiblepanelextender-can-i-initiate-collapse-expand-from-client-side-javasc Hope this helps. – LPD Dec 12 '12 at 18:07

How do I collapse this form when clicking the ".submit" button?

3 Answers3