Text Eingabefeld nach Auswahl des Optionsfelds

Ich versuche ein Formular zu erstellen, in dem das Textfeld angezeigt wird, wenn der Benutzer das Optionsfeld "Ja" auswählt und das Textfeld nicht erscheint, wenn der Benutzer "Nein" auswählt. Ich habe diesen Code aus dem Internet bekommen. Allerdings kann es nicht funktionieren, da ich Laravel benutze und nicht weiß, wie man den PHP-Code konvertiert.Text Eingabefeld nach Auswahl des Optionsfelds

Dies ist der Code:

function ShowHideDiv() { 
 
      var chkYes = document.getElementById("chkYes"); 
 
      var dvPassport = document.getElementById("dvPassport"); 
 
      dvPassport.style.display = chkYes.checked ? "block" : "none"; 
 
     }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
     <title></title> 
 
     <style type="text/css"> 
 
      body 
 
      { 
 
       font-family: Arial; 
 
       font-size: 10pt; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
    <span>Do you have Passport?</span> 
 
    <label for="chkYes"> 
 
     <input type="radio" id="chkYes" name="chkPassPort" onclick="ShowHideDiv()" /> 
 
     Yes 
 
    </label> 
 
    <label for="chkNo"> 
 
     <input type="radio" id="chkNo" name="chkPassPort" onclick="ShowHideDiv()" /> 
 
     No 
 
    </label> 
 
    <hr /> 
 
    <div id="dvPassport" style="display: none"> 
 
     Passport Number: 
 
     <input type="text" id="txtPassportNumber" /> 
 
    </div> 
 
    </body> 
 
    </html>

Quelle

2017-10-10 Neal23

Ihr Code funktioniert gut, ich finde kein hier Thema. –

Ihr Code scheint ordnungsgemäß zu funktionieren. Gibt es einen Fehler, den Sie in der Konsole Ihres Browsers sehen? –

Well Larvel ist ein PHP-Framework, so dass Sie 'JavaScript' in' PHP'-Dateien verwenden können. Und was Sie fragen, wird von clientseitigen Sprachen wie 'JavaScript' gemacht. 'PHP' ist eine serverseitige Sprache, die Ihnen in Ihrem Fall nicht hilft. – Sand

Ihr Code gut läuft. Sie müssen nur ein paar Änderungen in html-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     body 
     { 
      font-family: Arial; 
      font-size: 10pt; 
     } 
    </style> 
</head> 
<body> 
<script type="text/javascript"> 
    function ShowHideDiv() { 
     var chkYes = document.getElementById("chkYes"); 
     var dvPassport = document.getElementById("dvPassport"); 
     dvPassport.style.display = chkYes.checked ? "block" : "none"; 
    } 
</script> 
<span>Do you have Passport?</span> 
<label for="chkYes"> 

    // i just set default value to you have passport 

    <input type="radio" id="chkYes" checked name="chkPassPort" onclick="ShowHideDiv()" /> 
    Yes 
</label> 
<label for="chkNo"> 
    <input type="radio" id="chkNo" name="chkPassPort" onclick="ShowHideDiv()" /> 
    No 
</label> 
<hr /> 

//i just make div visible with passport number 

<div id="dvPassport"> 
    Passport Number: 
    <input type="text" id="txtPassportNumber" /> 
</div> 
</body> 
</html>

Quelle

2017-10-10 07:20:20

lassen Sie mich wissen, wenn es nicht für Sie funktioniert .... wenn gearbeitet bitte als richtige Antwort akzeptieren –

Der Code funktioniert in PHP, aber ich brauche es in Laravel – Neal23

sprechen Sie über Blade Templating ... –

zum Anzeigen/Verbergen Eingabefeld auf Klick auf den Radio-Button, müssen Sie sich zuerst mit dem same name aber different value die Radio-Buttons erstellen.

Erstellen Sie ein click Ereignis und überprüfen Sie, ob der Wert yes oder no ist.

Die Box text entsprechend ein-/ausblenden.

$('input[name="choose"]').click(function(e) { 
 
    if(e.target.value === 'yes') { 
 
    $('#optional').show(); 
 
    } else { 
 
    $('#optional').hide(); 
 
    } 
 
}) 
 

 
$('#optional').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input type="radio" name="choose" value='yes'>Yes 
 
<input type="radio" name="choose" value='no'>No 
 
<input type="text" id="optional">

Quelle

2017-10-10 07:25:11

Text Eingabefeld nach Auswahl des Optionsfelds

Antwort

Verwandte Themen