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>
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>
Related
Help me create checkboxes with embedded links
Everything
<body style="text-align: left;">
<h1>Select which delimiter you want to use.</h1>
<big>Select either TSV or CSV: </big><br>
<input type="checkbox" name="acs" value="CSV">CSV<br>
<input type="checkbox" name="acs" value="TSV">TSV<br>
<p>
<input type="button" onclick='printChecked()' value="Print Selected Items" /input>
</p>
</body>
It prints checkboxes with no attached links.
Following code contains what you are looking for
function printChecked(){
var checkboxes = document.getElementsByName("acs");
var list = document.getElementById("chckValues");
list.innerHTML = "";
for(var i=0;i<checkboxes.length;i++){
if(checkboxes[i].checked == true){
var listentry = document.createElement('li');
var link = document.createElement('a');
link.href = '#' + checkboxes[i].id
link.appendChild(document.createTextNode(checkboxes[i].value));
listentry.appendChild(link);
list.appendChild(listentry);
}
}
}
<h1>Select which delimiter you want to use.</h1>
<big>Select either TSV or CSV: </big><br>
<input type="checkbox" id="acs1" name="acs" value="CSV">CSV<br>
<input type="checkbox" id="acs2" name="acs" value="TSV">TSV<br>
<p>
<input type="button" onclick='printChecked()' value="Print Selected Items" /input>
</p>
<ol id="chckValues"></ol>
I am attempting to create an expandable form to create on/off instructions that a user can submit times for in pairings, so my HTML defaults with one pair and the user can use a button to add additional pairs, but when i submit the form angular is only reading the first pairing, can someone point out what I am missing here? Am I appending in the extra fields improperly?
HTML
<div class="timing">
<form class="timingSelect" action="index.html" method="post">
<div class="inputField">
<div class="form-group">
On: <input type="number" ng-model="recipe.on1" value="" step=".1">
</div>
<div class="form-group">
oz: <input type="number" ng-model="recipe.oz1" value="" readonly="readonly">
</div>
<div class="form-group">
Off: <input type="number" ng-model="recipe.off1" value="" step='.1'>
</div>
</div>
<!-- <input type="submit" ng-click="createRecipe(recipe)" value="Generate Recipe"> -->
</form>
<button type="submit" ng-click="createRecipe(recipe)">Submit</button>
</div>
<button type="button" class="next" name="button" ng-click="addColumn()">+</button>
JS:
app.controller('CreateRecipeController', ['$scope', '$location', '$routeParams', 'DashFactory', function($scope, $location, $routeParams, DashFactory){
console.log("entered Create Recipe controller");
var columnCount = 1;
$scope.addColumn = function addColumn(){
columnCount++;
console.log('attempting to create column');
var d = document.createElement("div");
d.className = "inputField";
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");
var d2 = document.createElement("div");
d2.className = "form-group"
var i = document.createElement("input"); //input element, text
i.setAttribute('type',"number");
i.setAttribute('ng-model',"recipe.on"+columnCount);
i.setAttribute('value',"");
var d3 = document.createElement("div");
d3.className = "form-group"
var s = document.createElement("input"); //input element, Submit button
s.setAttribute('type',"number");
s.setAttribute('ng-model',"recipe.oz"+columnCount);
s.setAttribute('value',"");
s.setAttribute('readonly','readonly')
var d4 = document.createElement("div");
d4.className = "form-group"
var t = document.createElement("input"); //input element, Submit button
t.setAttribute('type',"number");
t.setAttribute('ng-model',"recipe.off"+columnCount);
t.setAttribute('value',"");
d.appendChild(f);
f.appendChild(d2);
f.appendChild(d3);
f.appendChild(d4);
d2.appendChild(i);
d3.appendChild(s);
d4.appendChild(t)
document.getElementsByClassName('timingSelect')[0].appendChild(d);
}
$scope.createRecipe = function(recipe){
console.log('recieved recipe data', recipe);
DashFactory.createRecipe(recipe)
}
}
]);
Great - Just move all your buttons inside your form tag like the code below
<div class="timing">
<form class="timingSelect" action="index.html" method="post">
<div class="inputField">
<div class="form-group">
On: <input type="number" ng-model="recipe.on1" value="" step=".1">
</div>
<div class="form-group">
oz: <input type="number" ng-model="recipe.oz1" value="" readonly="readonly">
</div>
<div class="form-group">
Off: <input type="number" ng-model="recipe.off1" value="" step='.1'>
</div>
</div>
<button type="submit" ng-click="createRecipe(recipe)">Submit</button>
<button type="button" class="next" name="button" ng-click="addColumn()">+</button>
</form>
</div>
And don't add another form when you append a new input field just add all your new inputs inside the existing form and try to submit it again - This might work
Thanks - Happy Coding !!
<head>
<script language='javascript' type='text/javascript'>
function insertTemplate() {
console.log('something is coming out');
if (document.getElementById('template').checked) {
var test = "lore ipsum";
document.getElementById('message') = test;
alert(test);
}
else (
var nothing = '';
document.getElementById('message') = nothing;
)
}
</script>
</head>
<body>
<form class='form-horizontal' role='form' method='post'>
{{ csrf_field() }}
<input type='text' name='address'><br>
<input type='text' name='subject'><br>
<input type='checkbox' name='template' id='template' onclick = "insertTemplate()"> Insert in template</br>
<input type='text' name='message' id = 'message' style='width:500px;height:500px;'><br>
<button type='submit'>Submit</button>
</form>
</body>
I am creating an application using Laravel. I am trying to populate a text field with text when the user clicks on a checkbox. However, I keep on getting "Uncaught ReferenceError: insertTemplate is not defined" as an error whenever I check the box. I seem to have stated the function on the "onclick" attribute of the input and have defined the function. I have no idea what I am doing wrong.
Your else block was delimited by parentheses instead of curly braces.
<form class='form-horizontal' role='form' method='post'>
{{ csrf_field() }}
<input type='text' name='address'><br>
<input type='text' name='subject'><br>
<input type='checkbox' name='template' id='template' onclick = "insertTemplate()"> Insert in template<br>
<input type='text' name='message' id = 'message' style='width:500px;height:500px;'><br>
<button type='submit'>Submit</button>
</form>
<script>
function insertTemplate() {
console.log('something is coming out');
var test = "lore ipsum"
var nothing = "";
if (document.getElementById('template').checked) {
document.getElementById('message').textContent = test;
alert(test);
} else {
document.getElementById('message').textContent = nothing;
}
}
</script>
<div>
ToDo<br>
<input ng-show="add" type="checkbox" >{{val}}
</div>
<div>
<input type="text" ng-model="ToDo">
<input type="button" ng-click="addToDo()" name="btn" placeholder="add todo here" ng-model="add" value="add" />
</div>
And the javascript:
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope,$log){
$scope.addToDo = function(){
$scope.val = $scope.ToDo;
}
});
If i click on the 'add' button, a checkbox should appear along with the text of the texxtbox. But only text is showing, no checkbox. How do i display the checkbox?
You have to call the function in your controller and update some variable to true/ false. Based on the value and using ng-if directive, you can toggle the HTML element.
$scope.displayCheckBox = false;
$scope.val = "someRandoValue";
$scope.addToDo = function() {
$scope.displayCheckBox = true;
};
<div>
ToDo<br>
<span ng-if="displayCheckBox">
<input type="checkbox" >{{val}}
</span>
</div>
I have a standard HTML form, and the button is not working. I know it is directing to the correct page, and as far as I can see everything looks perfect.
It lets me click the button, but then nothing happens, it doesn't direct me to the send.php page or anything.
<form method="post" action="http://www.URL.net/send.php">
<p>
<label for="name">Name <span class="required">*</span></label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="email">Email <span class="required">*</span></label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject">
</p>
<p>
<label for="subject">Message <span class="required">*</span></label>
<textarea name="message" id="message" cols="45" rows="10"></textarea>
</p>
<div class="fBtn">
<button type="submit" name="submit" id="submit" class="regButton"><i class="icon-paper-plane"></i>Send Message</button>
</div>
</form>
Also, I have tried using <input type="submit" name="submit" id="submit" class="regButton" value="Send Message" /> as well, but it also isn't working for some odd reason.
Tested in Chrome and IE11.
EDIT Here is the JS for form vaildation:
$('#submit').click(function(){
$('input#name').removeClass("errorForm");
$('textarea#message').removeClass("errorForm");
$('input#email').removeClass("errorForm");
var error = false;
var name = $('input#name').val();
if(name == "" || name == " ") {
error = true;
$('input#name').addClass("errorForm");
}
var msg = $('textarea#message').val();
if(msg == "" || msg == " ") {
error = true;
$('textarea#message').addClass("errorForm");
}
var email_compare = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
var email = $('input#email').val();
if (email == "" || email == " ") {
$('input#email').addClass("errorForm");
error = true;
}else if (!email_compare.test(email)) {
$('input#email').addClass("errorForm");
error = true;
}
if(error == true) {
return false;
}
var data_string = $('.contactForm form').serialize();
$.ajax({
type: "POST",
url: $('.contactForm form').attr('action'),
data: data_string,
success: function(message) {
if(message == 'SENDING'){
$('#success').fadeIn('slow');
}
else{
$('#error').fadeIn('slow');
}
}
});
return false;
});
You appear to have some JavaScript that automatically submits every form using AJAX. Since you’re on the domain trishajohnson.net, the same-origin policy prevents JavaScript from opening requests to a (slightly) different domain – www.trishajohnson.net.
There’s an easy fix, though – just use the path part. It’s cleaner anyway.
<form method="POST" action="/tj/send.php">