JavaScript Bedingung in einem versteckten Feld konditioniert

Ich habe 2 Felder (wählen Sie soziales Netzwerk und Typ usersocial Netzwerk) konditioniert mit js so, wenn Leute "andere" ein neues Feld auswählen, und ich habe eine Schaltfläche zum Hinzufügen weiterer Felder zu wählen ein anderes soziales Netzwerk, alles funktioniert perfekt, aber ich kann nicht arbeiten die zweiten Bedingungen für die Option "andere" Ich schätze Ihre Hilfe.JavaScript Bedingung in einem versteckten Feld konditioniert

function otherps() { 
 
    if ($("#platform_social").val() !== '') { 
 
    $("#social_user").prop('disabled', false); 
 
    $("#social_user").prop('required', true); 
 
    } else { 
 
    $("#social_user").prop('disabled', true); 
 
    $("#social_user").prop('required', false); 
 
    } 
 
    if ($("#platform_social").val() == "Other") { 
 
    $("#othersocial").css("display", "block"); 
 
    $("#otherplatform").prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $("#otherplatform").val(""); 
 
    $("#otherplatform").prop('required', false); 
 
    $("#othersocial").css("display", "none"); 
 
    } 
 
} 
 

 
//more social 
 
function add_social() { 
 
    var crd = $("#socialadded").val(); 
 
    var newblock = '<br><div class="headline">Other Social Media </div>'; 
 
    newblock += '<div class="fullrow" id="alremove' + crd + '">'; 
 
    newblock += '<div class="leftcol">'; 
 
    newblock += 'Provider/Platform:'; 
 
    newblock += '<select name="platform_social' + crd + '" id="platform_social' + crd + '">'; 
 
    newblock += '<option value="" selected="selected">&nbsp;</option>'; 
 
    newblock += '<option value="ASKfm">ASKfm</option>'; 
 
    newblock += '<option value="Facebook">Facebook</option>'; 
 
    newblock += '<option value="Flickr">Flickr</option>'; 
 
    newblock += '<option value="GitHub">GitHub</option>'; 
 
    newblock += '<option value="Google">Google+</option>'; 
 
    newblock += '<option value="Instagram">Instagram</option>'; 
 
    newblock += '<option value="JustPaste">JustPaste.it</option>'; 
 
    newblock += '<option value="LinkedIn">LinkedIn</option>'; 
 
    newblock += '<option value="Tumblr">Tumblr</option>'; 
 
    newblock += '<option value="Twitter">Twitter</option>'; 
 
    newblock += '<option value="Vine">Vine</option>'; 
 
    newblock += '<option value="VKontakte">VKontakte (VK)</option>'; 
 
    newblock += '<option value="YouTube">YouTube</option>'; 
 
    newblock += '<option value="Other">Other</option>'; 
 
    newblock += '</select>'; 
 
    newblock += '<div id="othersocial' + crd + '" style="display:none;">'; 
 
    newblock += '<br>'; 
 
    newblock += '<div>Other Platform/Provider *</div>'; 
 
    newblock += '<input type="text" name="otherplatform' + crd + '" id="otherplatform' + crd + '" /><br>'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 
    newblock += '<br>'; 
 
    newblock += '<div class="rightcol">'; 
 
    newblock += 'Social Media Identifier:'; 
 
    newblock += '<input type="text" name="social_user' + crd + '" id="social_user' + crd + '" disabled />'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 

 

 
    $("#socialextra").append(newblock); 
 
    var whichplatform_social = "#platform_social" + crd; 
 
    var whichsocial_usere = "#social_user" + crd; 
 
    var whichotherplatform = "#otherplatform" + crd; 
 
    var whichothersocial = "#othersocial" + crd; 
 
    $(whichplatform_social).prop('required', true); 
 
    $(whichsocial_user).prop('required', true); 
 
    $(whichotherplatform).prop('required', true); 
 
    $(whichothersocial).css('display', 'block'); 
 
    if ($whichotherplatform !== '') { 
 
    $whichsocial_usere.prop('disabled', false); 
 
    $whichsocial_usere.prop('required', true); 
 
    } else { 
 
    $whichsocial_usere.prop('disabled', true); 
 
    $whichsocial_usere.prop('required', false); 
 
    } 
 
    if (whichotherplatform == "Other") { 
 
    $whichothersocial.css("display", "block"); 
 
    $whichotherplatform.prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $whichotherplatform.val(""); 
 
    $whichotherplatform.prop('required', false); 
 
    $whichothersocial.css("display", "none"); 
 
    } 
 
    crd++; 
 
    $("#socialadded").val(crd); 
 
}

<div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <div>Provider/Platform</div> 
 
    <select name="platform_social" id="platform_social" onchange="otherps();"> 
 
    <option value="" selected="selected">&nbsp;</option> 
 
\t <option value="ASKfm">ASKfm</option> 
 
\t <option value="Facebook">Facebook</option> 
 
\t <option value="Flickr">Flickr</option> 
 
\t <option value="GitHub">GitHub</option> 
 
\t <option value="Google">Google+</option> 
 
\t <option value="Instagram">Instagram</option> 
 
\t <option value="JustPaste">JustPaste.it</option> 
 
\t <option value="LinkedIn">LinkedIn</option> 
 
\t <option value="Tumblr">Tumblr</option> 
 
\t <option value="Twitter">Twitter</option> 
 
\t <option value="Vine">Vine</option> 
 
\t <option value="VKontakte">VKontakte (VK)</option> 
 
\t <option value="YouTube">YouTube</option> 
 
\t <option value="Other">Other</option> 
 
    </select> 
 
    <div id="othersocial" style="display:none;"> 
 
     <br> 
 
     <div>Other Platform </div> 
 
     <input type="text" name="otherplatform" id="otherplatform" /><br> 
 
    </div> 
 
    </div> 
 

 
    <div class="rightcol"> 
 
    <div>Social Media Identifier</div> 
 
    <input type="text" id="social_user" name="social_user" disabled /> 
 
    </div> 
 
</div> 
 

 
<div id="socialextra"></div> 
 

 
<input type="hidden" name="socialadded" id="socialadded" value="0" /> 
 
<br> 
 
<div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <span class="addtravel"><a onclick="add_social()" 
 
    class="button medium dark">Add Another</a>&nbsp;&nbsp;</span> 
 
    </div> 
 
</div>

Alles funktioniert perfekt, bis ich die Bedingung für das zusätzliche soziale Netzwerk hinzuzufügen versucht.

Vielen Dank

Quelle

2017-07-03 Andrés Pérez

Wo möchten Sie das neu hinzugefügte soziale Netzwerk zum vorherigen Element select hinzufügen? –

Wenn dies der Code ist, den Sie verwenden, fehlt das geschweifte Klammerende der js-Datei. Du hast keine soziale Funktion hinzugefügt. –

Hallo @HarshanaNarangoda es ist in der Nähe, sorry ich verpasste, wenn ich den Code kopiere, aber es ist geschlossen, im Moment funktioniert so, Sie wählen ein soziales Netzwerk und geben Sie den Benutzer in "Social Media Identifier" Feld, wenn Sie "andere" wählen dann erscheint ein neues Feld, um den Namen des "anderen" sozialen Netzwerks einzutragen, –

Überprüfen Sie den Code-Schnipsel

function otherps(val) { 
 
    if ($("#platform_social"+ val).val() !== '') { 
 
    $("#social_user"+ val).prop('disabled', false); 
 
    $("#social_user"+ val).prop('required', true); 
 
    } else { 
 
    $("#social_user" + val).prop('disabled', true); 
 
    $("#social_user" + val).prop('required', false); 
 
    } 
 
    if ($("#platform_social" + val).val() == "Other") { 
 
    $("#othersocial" + val).css("display", "block"); 
 
    $("#otherplatform" + val).prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $("#otherplatform" + val).val(""); 
 
    $("#otherplatform" + val).prop('required', false); 
 
    $("#othersocial" + val).css("display", "none"); 
 
    } 
 
} 
 

 
//more social 
 
function add_social() { 
 
    var crd = $("#socialadded").val(); 
 
    var newblock = '<br><div class="headline">Other Social Media </div>'; 
 
    newblock += '<div class="fullrow" id="alremove' + crd + '">'; 
 
    newblock += '<div class="leftcol">'; 
 
    newblock += 'Provider/Platform:'; 
 
    newblock += '<select name="platform_social' + crd + '" id="platform_social' + crd + '" onchange="otherps("+crd+")>'; 
 
    newblock += '<option value="" selected="selected">&nbsp;</option>'; 
 
    newblock += '<option value="ASKfm">ASKfm</option>'; 
 
    newblock += '<option value="Facebook">Facebook</option>'; 
 
    newblock += '<option value="Flickr">Flickr</option>'; 
 
    newblock += '<option value="GitHub">GitHub</option>'; 
 
    newblock += '<option value="Google">Google+</option>'; 
 
    newblock += '<option value="Instagram">Instagram</option>'; 
 
    newblock += '<option value="JustPaste">JustPaste.it</option>'; 
 
    newblock += '<option value="LinkedIn">LinkedIn</option>'; 
 
    newblock += '<option value="Tumblr">Tumblr</option>'; 
 
    newblock += '<option value="Twitter">Twitter</option>'; 
 
    newblock += '<option value="Vine">Vine</option>'; 
 
    newblock += '<option value="VKontakte">VKontakte (VK)</option>'; 
 
    newblock += '<option value="YouTube">YouTube</option>'; 
 
    newblock += '<option value="Other">Other</option>'; 
 
    newblock += '</select>'; 
 
    newblock += '<div id="othersocial' + crd + '" style="display:none;">'; 
 
    newblock += '<br>'; 
 
    newblock += '<div>Other Platform/Provider *</div>'; 
 
    newblock += '<input type="text" name="otherplatform' + crd + '" id="otherplatform' + crd + '" /><br>'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 
    newblock += '<br>'; 
 
    newblock += '<div class="rightcol">'; 
 
    newblock += 'Social Media Identifier:'; 
 
    newblock += '<input type="text" name="social_user' + crd + '" id="social_user' + crd + '" disabled />'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 

 

 
    $("#socialextra").append(newblock); 
 
    var whichplatform_social = "#platform_social" + crd; 
 
    var whichsocial_usere = "#social_user" + crd; 
 
    var whichotherplatform = "#otherplatform" + crd; 
 
    var whichothersocial = "#othersocial" + crd; 
 
    $(whichplatform_social).prop('required', true); 
 
    $(whichsocial_user).prop('required', true); 
 
    $(whichotherplatform).prop('required', true); 
 
    $(whichothersocial).css('display', 'block'); 
 
    if ($whichotherplatform !== '') { 
 
    $whichsocial_usere.prop('disabled', false); 
 
    $whichsocial_usere.prop('required', true); 
 
    } else { 
 
    $whichsocial_usere.prop('disabled', true); 
 
    $whichsocial_usere.prop('required', false); 
 
    } 
 
    if (whichotherplatform == "Other") { 
 
    $whichothersocial.css("display", "block"); 
 
    $whichotherplatform.prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $whichotherplatform.val(""); 
 
    $whichotherplatform.prop('required', false); 
 
    $whichothersocial.css("display", "none"); 
 
    } 
 
    crd++; 
 
    $("#socialadded").val(crd); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    
 
    <div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <div>Provider/Platform</div> 
 
    <select name="platform_social" id="platform_social" onchange="otherps('');"> 
 
    <option value="" selected="selected">&nbsp;</option> 
 
\t <option value="ASKfm">ASKfm</option> 
 
\t <option value="Facebook">Facebook</option> 
 
\t <option value="Flickr">Flickr</option> 
 
\t <option value="GitHub">GitHub</option> 
 
\t <option value="Google">Google+</option> 
 
\t <option value="Instagram">Instagram</option> 
 
\t <option value="JustPaste">JustPaste.it</option> 
 
\t <option value="LinkedIn">LinkedIn</option> 
 
\t <option value="Tumblr">Tumblr</option> 
 
\t <option value="Twitter">Twitter</option> 
 
\t <option value="Vine">Vine</option> 
 
\t <option value="VKontakte">VKontakte (VK)</option> 
 
\t <option value="YouTube">YouTube</option> 
 
\t <option value="Other">Other</option> 
 
    </select> 
 
    <div id="othersocial" style="display:none;"> 
 
     <br> 
 
     <div>Other Platform </div> 
 
     <input type="text" name="otherplatform" id="otherplatform" /><br> 
 
    </div> 
 
    </div> 
 

 
    <div class="rightcol"> 
 
    <div>Social Media Identifier</div> 
 
    <input type="text" id="social_user" name="social_user" disabled /> 
 
    </div> 
 
</div> 
 

 
<div id="socialextra"></div> 
 

 
<input type="hidden" name="socialadded" id="socialadded" value="0" /> 
 
<br> 
 
<div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <span class="addtravel"><a onclick="add_social()" 
 
    class="button medium dark">Add Another</a>&nbsp;&nbsp;</span> 
 
    </div> 
 
</div> 
 
    
 
    </body> 
 

 
</html>

und hier ist auch der Arbeits Plunker. Plunker

Lösung Ich habe einen Parameter in den „otherps“ -Funktion und dann die crd auf die Funktion analysieren, wenn die dynamische HTML erzeugen.

Quelle

2017-07-04 04:51:49

JavaScript Bedingung in einem versteckten Feld konditioniert

Antwort

Verwandte Themen