Wie öffne ich verschiedene URLs durch Checkbox?

Das ist mein HTML und JavaScript-CodeWie öffne ich verschiedene URLs durch Checkbox?

<input type="text" id="text" /> 
<input type="button" id="btn" value="Submit" onClick="javascript: window.open('http://example.com/' + document.getElementById('text').value);" />

Wenn Sie Eingabe anytext in das Feld ein und klicken Sie auf die Submit-Button, wird es http://example.com/anytext öffnen. Ich möchte drei Kontrollkästchen hinzufügen, die page1page2 und page3 unter dem Formular benannt werden. Wenn ich auf die Checkbox page1 klicke und auf Senden klicke, wird es geöffnet http://example.com/page1/anytext

Wie kann ich es tun?

Quelle

2017-08-20 user8481790

Ich würde Radio Buttons über Kontrollkästchen vorschlagen. Checkboxen führen zu etwas wie "http: // beispiel.com/page1/page2/page3/anytext", was ich nicht annehme. – rndus2r

@ rndus2r Wie kann ich Radio-Buttons hinzufügen? – user8481790

https://www.w3schools.com/html/html_forms.asp – rndus2r

Sie könnten eine Funktion erstellen, die den Wert der Kontrollkästchen verarbeitet und die Zeichenfolge zurückgibt, die Sie in den Aufruf window.open einfügen müssen. Etwas wie folgt aus:

onClick="javascript: window.open('http://example.com/' +getRadioValue() + document.getElementById('text').value);"

Beachten Sie auch, dass das Snippet werden Sie nicht umleiten, wenn Sie aufgrund der Sandbox-Beschränkungen darauf klicken einreichen, aber Sie können den Fehler in Browser-Konsole und die Seite der Code versucht, sehen umleiten Sie zu.

function getRadioValue() { 
 
    var cb1 = document.getElementById("cb1"); 
 
    var cb2 = document.getElementById("cb2"); 
 
    var cb3 = document.getElementById("cb3"); 
 
    
 
    if(cb1.checked) { 
 
    return "Page 1/"; 
 
    } else if(cb2.checked) { 
 
    return "Page 2/"; 
 
    } else if(cb3.checked) { 
 
    return "Page 3/"; 
 
    } else { 
 
    return ""; 
 
    } 
 
}

<input type="text" id="text" /> 
 
<br/> 
 
<label> 
 
<input type="checkbox" value="Page 1" id="cb1" /> 
 
Page 1 
 
</label> 
 
<br/> 
 
<label> 
 
<input type="checkbox" value="Page 2" id="cb2" /> 
 
Page 2 
 
</label> 
 
<br/> 
 
<label> 
 
<input type="checkbox" value="Page 3" id="cb3" /> 
 
Page 3 
 
</label> 
 
<br/> 
 
<input type="button" id="btn" value="Submit" onClick="javascript: window.open('http://example.com/' +getRadioValue() + document.getElementById('text').value);" />

Quelle

2017-08-20 03:56:02 Nisarg

Es ist ganz einfach von Jquery zu tun. Das ist, was ich denke, dass Sie brauchen.

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" 
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
      crossorigin="anonymous"></script> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <input type="text" id="text" /><br /> 
    page1<input type="checkbox" id="page1" value="page1" />&nbsp; 
    page2<input type="checkbox" id="page2" value="page2" />&nbsp; 
    page3<input type="checkbox" id="page3" value="page3" />&nbsp; 
    <input type="button" id="btn" value="Submit" /><br /> 

    <script type="text/javascript"> 
     $(document).ready() 
     { 
      //Event handler fro button click 
      $('#btn').click(function() 

       { 
       var text = $('#text').val(); 
       if($('#page1').is(':checked')) 
       { 
        window.open('http://example.com/' + $('#page1').val() + '/' + text); 
       } 
       else if($('#page2').is(':checked')) 
       { 
        window.open('http://example.com/' + $('#page2').val() + '/' + text); 
       } 
       else if($('#page3').is(':checked')) 
       { 
        window.open('http://example.com/' + $('#page3').val() + '/' + text); 
       } 
       else 
       { 
        alert('Please select a checkbox'); 
       } 
      }); 
     } 
    </script> 
</body> 
</html>

Quelle

2017-08-20 04:16:11

Wie öffne ich verschiedene URLs durch Checkbox?

Antwort

Verwandte Themen