Wie erfasse ich Daten mit Submit für JavaScript?

Question

Ich muss den Hintergrund und die Farbe eines Textes mit 2 verschiedenen Formen ändern, wenn ich auf die Übergabeschaltfläche des gleichen Formulars klicke Ich habe diesen Code und kann den Text bereits ändern.

$('#select').change(function() { 
 
    if ($(this).val() == 'A') { 
 
    $("h1").css('background-color', 'white'); 
 
    } 
 
    if ($(this).val() == 'B') { 
 
    $("h1").css('background-color', 'red'); 
 
    } 
 
    if ($(this).val() == 'C') { 
 
    $("h1").css('background-color', 'yellow'); 
 
    } 
 
    if ($(this).val() == 'D') { 
 
    $("h1").css('background-color', 'green'); 
 
    } 
 
}); 
 

 
$('#select1').change(function() { 
 
    if ($(this).val() == 'A') { 
 
    $("h1").css('color', 'white'); 
 
    } 
 
    if ($(this).val() == 'B') { 
 
    $("h1").css('color', 'red'); 
 
    } 
 
    if ($(this).val() == 'C') { 
 
    $("h1").css('color', 'yellow'); 
 
    } 
 
    if ($(this).val() == 'D') { 
 
    $("h1").css('color', 'green'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1> 
 
    H1 TEXT TO CHANGE 
 
    </h1> 
 
<h3> 
 
    Background Text 
 
    </h3> 
 
<form method="POST"> 
 
    <select id="select"> 
 
    <option value="A">White</option> 
 
    <option value="B">Red</option> 
 
    <option value="C">Yellow</option> 
 
    <option value="D">Green</option> 
 
    </select> 
 
    <h3> 
 
    Color Text 
 
    </h3> 
 

 
    <select id="select1"> 
 
    <option value="A">White</option> 
 
    <option value="B">Red</option> 
 
    <option value="C">Yellow</option> 
 
    <option value="D">Green</option> 
 
    </select> 
 
    <br> 
 
    <br> 
 

 
</form>

Wenn ich eine Funktion mit der einreichen verknüpften Taste füge ich Fehler.

<button onclick="capture()">Change</button> 

function capture(){ 
*Actual JS* 
} 

Answer 1

Richten Sie Ihre Form mit einer ID der Einfachheit halber:

<form id="form-id"> 
... 
    <input type="submit" value="submit"> 
</form> 

jQuery:

$('#form-id').submit(function (e) { 
    e.preventDefault(); 

    $('body').css('background-color', 'red'); 
    // some more JS 
}); 

VanillaJS:

document.getElementById('form-id').addEventListener('submit', function (e) { 
    e.preventDefault(); 

    document.body.style.backgroundColor = 'red'; 
    // some more JS 
}); 

Answer 2

Fügen Sie diese auf Ihre Funktion und ColorText ID Dein h3 tag;)

function capture(){ 
    var e = document.getElementById("select"); 
    var strUser = e.options[e.selectedIndex].text; 
    var e2 = document.getElementById("select1"); 
    var strUser2 = e2.options[e2.selectedIndex].text; 
    document.body.style.backgroundColor=strUser; 
    document.getElementById("ColorText").style.color=strUser2; 

} 

Answer 3

eine ID auf die Schaltfläche Put:

<button id="submit">Change</button> 

Und ein Ereignis-Listener, wo Sie die Wahl abrufen können und entsprechende CSS anwenden:

$("#submit").click(function(event){ 
    // prevent the form from actually submitting 
    event.preventDefault(); 

    var choices = { 
     "A": "white", 
     "B": "red", 
     "C": "yellow", 
     "D": "green" 
    }; 

    var choiceBG = $("#select").val(); 
    $("h1").css('background-color', choices[choiceBG]); 

    var choiceFG = $("#select1").val(); 
    $("h1").css('color', choices[choiceFG]); 
});