It’s look like you are coming from reactjs,
Here is your mistake,
- you used multiple form tag end
- you should use onsubmit instance of onSubmit
- you should make return false at form onsubmit event.
- and using script at head it’s also bad habit .
See the snippet code below.
function formSubmit(e){
return false;
}
function clickRed(){
var txtName = document.loginForm.txtName;
document.getElementById("msg").innerHTML = "Hi, " + txtName.value + "!"
document.getElementById("msg2").innerHTML = "RED pill selected!"
return false;
}
function clickBlue(){
var txtName = document.loginForm.txtName;
document.getElementById("msg").innerText = "Hi, " + txtName.value + "!"
document.getElementById("msg2").innerText = "BLUE pill selected."
return false;
}
<form name='loginForm' onsubmit="return formSubmit()" method='POST'>
<div>
<label for='username'>Name</label>
</div>
<div>
<input type="text" name="txtName" id="idName">
</div>
<br/>
<input type="submit" onclick= "clickRed()" value="RED">
<span id="blueContainer">
<input type="submit" onclick= "clickBlue()" value="BLUE">
</span>
<br/>
<div>
<p id="msg"></p>
<p id="msg2"></p>
</div>
</form>
You just need to change this:
var txtName = document.loginForm.txtName;
to this:
var txtName = document.loginForm.txtName.value;
and get rid of the errant closing <form> tag at the end of this line:
<form name='loginForm' onSubmit="" method='POST'></form>
and implement preventDefault() as shown in the snippet which will stop the normal submit behavior.
<html>
<head>
<script>
function clickRed(event){
event.preventDefault();
var txtName = document.loginForm.txtName.value;
document.getElementById("msg").innerHTML = "Hi, " + txtName + "!"
document.getElementById("msg2").innerHTML = "RED pill selected!"
return false;
}
function clickBlue(event){
event.preventDefault();
var txtName = document.loginForm.txtName.value;
document.getElementById("msg").innerText = "Hi, " + txtName + "!"
document.getElementById("msg2").innerText = "BLUE pill selected."
return false;
}
</script>
</head>
<body>
<form name='loginForm' onSubmit="" method='POST'>
<div>
<label for='username'>Name</label>
</div>
<div>
<input type="text" name="txtName" id="idName">
</div>
<br/>
<input type="submit" onclick="clickRed(event)" value="RED">
<span id="blueContainer">
<input type="submit" onclick="clickBlue(event)" value="BLUE">
</span>
<br/>
<div>
<p id="msg"></p>
<p id="msg2"></p>
</div>
</form>
</body>
</html>
My goal is to print:
hi,
RED pill selected
— if red pill was selected
my code here outputs:
Hi, undefined
RED pill selected.
I think the problem with my code lies within my form onsubmit , I am having trouble how do I put 2 functions on the onsubmit of form
here is my code:
<html>
<head>
<script>
function clickRed(){
var txtName = document.loginForm.txtName;
document.getElementById("msg").innerHTML = "Hi, " + txtName + "!"
document.getElementById("msg2").innerHTML = "RED pill selected!"
return false;
}
function clickBlue(){
var txtName = document.loginForm.txtName;
document.getElementById("msg").innerText = "Hi, " + txtName + "!"
document.getElementById("msg2").innerText = "BLUE pill selected."
return false;
}
</script>
</head>
<body>
<form name='loginForm' onSubmit="" method='POST'></form>
<div>
<label for='username'>Name</label>
</div>
<div>
<input type="text" name="txtName" id="idName">
</div>
<br/>
<input type="submit" onclick= "clickRed()" value="RED">
<span id="blueContainer">
<input type="submit" onclick= "clickBlue()" value="BLUE">
</span>
<br/>
<div>
<p id="msg"></p>
<p id="msg2"></p>
</div>
</form>
</body>
</html>
i think there is no big difference with putting scrip at the top and at the bottom. Please correct me if I am wrong. But I’ll try 🙂
