投稿後のニュースレターフォームを非表示

Question

名前とメールフィールドを持つ基本的なニュースレターフォームがあります。ユーザーがフォームを送信した後でフォームを非表示にしたい。バリデーションがエラーなしで行われる場合にのみ隠す必要があります。ここに私のコード

HTML

<div class="form-row"> 
    <div class="col-lg-12"> 
    <input type="text" name="name" id="name" value="" class="form-control" placeholder="Your Name"> 
    </div> 
    <div style="clear:both;"></div> 
    <div class="col-lg-12"> 
    <input type="text" id="email" name="email" value="" class="form-control" placeholder="Your Email"> 
    </div> 
    <div style="clear:both;"></div> 
    <div class="col-lg-12"> 
    <input type="submit" id="submit" name="submit" value="Sign up" class="btn-primary"> 
    </div> 
    </div> 

は、私はこの上で非常に限られた知識を持っているように助けてください検証

<script language="Javascript" type="text/javascript"> 
<!-- 
/* wording of your error and thank you messages */ 
var error_1="Please enter your valid email address"; 
var error_2="Please enter your name"; 
var thankyou="Thank you. We'll keep you interested."; 
function trim(str){str = str.replace(/^\s*$/, '');return str;} 
function $Npro(field){var element = document.getElementById(field);return element;return false;} 
function emailvalidation(field, errorMessage) { 
    var goodEmail = field.value.match(/[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/); 
    apos=field.value.indexOf("@");dotpos=field.value.lastIndexOf(".");lastpos=field.value.length-1;tldLen = lastpos-dotpos;dmLen=dotpos-apos-1;var badEmail= (tldLen<2 || dmLen<2 || apos<1); 
    if (!goodEmail || badEmail) {$Npro("Error").innerHTML=errorMessage;$Npro("Error").style.display="inline";field.focus();field.select();return false;} 
    else {return true;} 
} 
function emptyvalidation(entered, errorMessage) { 
    $Npro("Error").innerHTML=""; 
    with (entered) { 
    if (trim(value)==null || trim(value)=="") {/*alert(errorMessage);*/$Npro("Error").innerHTML=errorMessage;$Npro("Error").style.display="inline";return false;} 
    else {return true;}}//with 
}//emptyvalidation 

function signup(thisform) { 
    with (thisform) { 
     if (emailvalidation(email,error_1)==false) {email.focus(); return false;}; 
     if (emptyvalidation(name,error_2)==false) {name.focus(); return false;}; 
    } 
    $("#submit, #myResponse").hide(); // Hide the buttom and the message 
    $("#loading").show();    // show the loading image. 
    params=$("#subform").serialize(); 
    $.post("optIn.php", params, function(response){ 
     //alert(response); //may need to activate this line for debugging. 
     $("#loading").hide(); 
     $("#myResponse").html(thankyou); //Writes the "Thank you" message that comes from optIn.php and styles it. 
     $('#myResponse').css({display:'inline',color:'green'}) 
     $("#submit").show(); 
     } 
    ) 
return false; 
} 
//--> 
</script> 

です。

Answer 1

例えば、ログイン・フォームのような形に

<div class="form-row login-form"> 

をクラスを追加し、

$.post("optIn.php", params, function(response){ 
     //alert(response); //may need to activate this line for debugging. 
     $("#loading").hide(); 
     $("#myResponse").html(thankyou); 
     $('#myResponse').css({display:'inline',color:'green'}) 
     $(".login-form").hide(); // hide the form 
     } 
    ) 

以下のようにそれを隠します