CODEWITHSUNDEEP
jquery
Jayreis
Jayreis

Reputation: 287

jQuery hide not working on mobile phone

I have a form that I am trying to hide upon submission and then to show a div that has a success message in it in place of the form.

My issue is the form works on deestop. However on mobile phone jquery does not seem to be hiding the form and showing the success message div Here is my code

For the form

<div class="success" style="display:none; color:#ffffff; font-weight:bold; padding:10px 0 30px;">
    Email Address Saved
</div>
<form method="POST" action="http://www.kissusa.com/z-ajax/newsletter-ajax.php" class="myForm">
    <input type="email" name="email" class="input-text" placeholder="ENTER EMAIL">
    <input id="bottomSignUp" type="submit" name="subscribe" value="SIGN UP">
</form>

My jquery

<script>
    jQuery(document).ready(function() {
        jQuery(".myForm").ajaxForm(function(){
            jQuery(".success").show();
            jQuery(".myForm").hide();
        });
    });
</script>

Upvotes: 1

Views: 2093

Answers (1)

Alexander Dixon
Alexander Dixon

Reputation: 874

Use classes to control styling and layout. That way you can apply it where needed and it is maintainable.

CSS:

/* style is what will hide elements */
.hide {
    left: -9999px !important;
    position: absolute !important;
    visibility: hidden;
    z-index: -500;
    top: -9999px;
}

.success {
    color: #ACE;
    font-weight: bold;
    border: solid 1px blue;
    width: 250px;
    padding: 30px;
    margin: 0 auto;
    text-align: center;
    background-color: #FFF;
    font-family: arial;
    font-size: .93em;
}

HTML:

<div class="success hide">Email Address Saved</div>
<form method="POST" action="http://www.kissusa.com/z-ajax/newsletter-ajax.php" class="myForm">
    <input type="email" name="email" class="input-text" placeholder="ENTER EMAIL">
    <input id="bottomSignUp" type="submit" name="subscribe" value="SIGN UP">
</form>

jQuery:

jQuery('form:first').ajaxForm({
    success: show_success
});

function show_success() {
    jQuery('.success.hide').removeClass('hide');
    jQuery('.myForm').addClass('hide');
    console.log('hello');
}

This solution was inspired by whomever created the jsfiddle located at: http://jsfiddle.net/hRTcE/

I had no prior knowledge of the ajaxForm library or methods prior to this post.

Working jsfiddle example

Upvotes: 3

Related Questions