I am creating a website and I'm wondering how I create something where when a user enters an input and no value is submitted, instead of a function called togglePopup() occurring a function called togglePopup2() will occur. How can I accomplish this? Here is my current code:
<form autocomplete="off" >
<input style="border: 2px solid #222; border-radius: 6px;" type="text" id="lname" name="lname" maxlength="10"><br><br><br>
<input style="border: none; border-radius: 6px; color: ivory; text-shadow: 0px 10px 20px; #222;background: dodgerblue; padding: 15px; font-size: 15px;" value="Submit environment name" type="button" onclick="togglePopup()">
</form><script>
var x;
document.querySelectorAll('input')[1].addEventListener("click", ()=>{
x = document.querySelector('input').value;
})
</script>
Currently a function called togglePopup() occurs when the button is clicked submitting the input. How can I make it so the function only occurs when there is text in the input and if nothing is submitted, an alternate function will occur called togglePopup2() will occur. How can this be done?
const togglePopup = ()=>{
document.querySelector('button').style.backgroundColor = "green";
}
const togglePopup2 = ()=>{
document.querySelector('button').style.backgroundColor = "red";
}
document.querySelector('form').onsubmit = (e)=>{
e.preventDefault();
console.log(document.querySelector('input').value.trim() === "");
if(document.querySelector('input').value.trim() === ""){
togglePopup2();
} else {
togglePopup();
}
};input{
border: 2px solid #222;
border-radius: 6px;
margin: 5px 0;
}
button{
border: none;
border-radius: 6px;
color: ivory;
text-shadow: 0px 10px 20px;
background: dodgerblue;
padding: 15px;
font-size: 15px;
margin: 5px 0;
}<form autocomplete="off" action="#" method="post">
<div>
<input type="text" id="lname" name="lname" maxlength="10">
</div>
<div>
<button type="submit">Submit environment name</button>
</div>
<div id="result"></div>
</form>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments