I need help with my HTML styling.
here is the HTML code:
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
<input type="button" id="button2" value="Update"/> <br/>
</div>
<input type="button" id="button1" value ="Get Info"
onclick="document.getElementById('hidden').style.display = '';" size="25"/>
As you can see, all the elements that are inside <div></div> will be displayed upon clicking button1 (they are hidden initially).
What I want is that when button1 is clicked in addition to all the other fields (including button2) being displayed, button1 to be hidden.
How can I do this?
Change
onclick="document.getElementById('hidden').style.display = '';"
to
onclick="document.getElementById('hidden').style.display = ''; this.style.display = 'none'"
You can see this in action here: http://jsfiddle.net/nayish/sJ5RR/.
instead of '' change it to 'Block'
so:
<input type="button" id="button1" value ="Get Info"
onclick="document.getElementById('hidden').style.display = 'Block';" size="25"/>
But the best way will be to externalize your script so you can do more stuff without cluttering your html
var btn = document.getElementById('button1');
btn.onclick = function () {
// all the stuff you want to do
document.getElementById('hidden').style.display = "block";
this.style.display = "none";
... more stuff ...
}
Related
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 !!
<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>
This is my HTML code :
#using (Html.BeginForm("Index", "EmployeeList", FormMethod.Post, new {defaultbutton = "searchBtn" }))
{
#Html.TextBox("SearchString", ViewBag.SearchString as string, new { #id = "SearchString", #class = "form-control", placeholder = "Search Name" })
<button type="submit" name="MyButton" value="Export" class="btn btn-sm btn-danger">
<button type="submit" name="MyButton" value="Search" id="searchBtn" class="btn btn-sm btn-warning">
}
According to my page design I have to write "Export" button's html code before "Search" button.
While I press enter after filling search text 'export' button gets clicked, instead of that I need 'Search' button clicked.
You can handle kewdown event :
<script type="text/javascript">
$(document).bind('keydown', function (e) {
if (e.which === 13) { // return
$('#searchBtn').trigger('click');
}
});
</script>
If you'd prefer to have a defaultbutton on any form, it's easy enough to add one. Below is a trivial example. Note that I required the defaultbutton to be a selector rather than an id, but it's easy enough to require prefix a hash if you prefer it to accept ids.
Also note that using the name "defaultbutton" runs the risk of conflicting with someone else's code (and the lack of a data- prefix means it might conflict with a possible "defaultbutton" feature added to a future html spec).
Below is a simple example. Changing closest to check for a defaultbutton attribute will allow a single form to have different default buttons for different components.
//Load this script on any pages that need to support default buttons.
$(document).bind('keydown', function(e) {
if (e.which === 13) {
var button = $(e.target);
if (button.attr('type') != 'text') {
return true;
}
var parentform = $(e.target).closest('form');
var selector = parentform.attr('defaultbutton');
var targetbutton = parentform.find(selector);
if(targetbutton.length > 0) {
targetbutton.trigger('click');
return false;
}
return true;
}
});
<!-- Example usage. Just add a defaultbutton attribute to your form-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form defaultbutton='#candy'>
<input type='text' id='text' placeholder='text' /> <br /><br />
<input type='submit' value='toys' id='toys' onclick='alert("Toys") ;return false;' />
<br /><br />
<input type='submit' value='candy' id='candy' onclick='alert("Candy");return false;' />
<br /><br />
<input type='submit' value='money' id='money' onclick='alert("Money");return false;' />
<br /><br />
</form>
I have a HTML page, source code is given below -
<html>
<script type="text/javascript">
function jsMeth() {
alert('Count of buttons : '+document.getElementsByTagName('button').length);
}
</script>
<input type="button" value="button 1" id="btn1" name="btn1" /><br>
<input type="button" value="butto 2" id="btn2" name="btn2" /><br><br>
<input type="button" value="Calculate button count" id="btn3" name="btn3" onclick="jsMeth();"/>
</html>
My basic purpose is, when I click on button having id "btn3", it should display number of buttons in my HTML page (in this case 3). But somehow it is always showing 0.
Thanks for your quick reply. As all of you suggested, I have modified my code as shown below -
<html>
<script type="text/javascript">
function jsMeth() {
alert('Count of buttons : '+document.querySelectorAll('[type=button]').length);
}
</script>
<input type="button" value="button 1" id="btn1" name="btn1" /><br>
<input type="button" value="butto 2" id="btn2" name="btn2" /><br><br>
<input type="button" value="Calculate button count" id="btn3" name="btn3" onclick="jsMeth();"/>
</html>
But now I am getting below error -
Message: Object doesn't support this property or method
Line: 4
Char: 9
Code: 0
URI: file:///C:/Documents%20and%20Settings/556996/Desktop/demohtml.html
I am testing in IE8. Please help!
Thanks,
Kartic
Try using either of
document.getElementsByTagName('input')
or the more specific
document.querySelectorAll('[type=button'])
The problem you're facing is that you don't have any elements with the tag name button. All of your buttons have the tag name input.
If you aren't supporting IE7, you could use querySelectorAll to get those elements:
document.querySelectorAll('input[type=button]')
Or you could change your HTML to use <button> elements:
<button type="button" value="button 1" id="btn1" name="btn1">button 1</button>
Use this...
function jsMeth() {
alert('Count of buttons : '+document.querySelectorAll('[type=button]').length);
}
Or this for old browsers
function jsMeth() {
var elem = document.getElementsByTagName('input');
var numBts = 0;
for(i = 0; i < elem.length; i++){
if(elem[i].getAttribute('type') === 'button'){
numBts+=1;
}
}
alert(numBts);
}
DEMO
I do NOT want the type="submit" because it changes the page -
I'm submitting thru ajax.. so I'm using type="button"
<input type="button" value="This is a submit button" name="submit1" onClick="submitMe( this.form )">
<input type="button" value="Another submit button" name="submit2" onClick="submitMe( this.form )">
<input type="button" value="Yet another submit button!" name="submit3" onClick="submitMe( this.form )">
However ALL the button names appear as passed form variables - I'd expect only the clicked button to be passed, like checkboxes or submit buttons...(if its NOT selected - don't pass it)
how can I determine WHICH button was selected - I need this because the action will be different based on button.
Using prototype 'AJAX.UPDATER' to handle the form.
The JS looks like this...
function submitMe( frm ) {
var div = 'msgDiv';
var url = 'mypage.aspx';
var pars = Form.serialize( frm );
var myAjax = new Ajax.Updater( div, url, { asynchronous:true, method:'post', parameters:pars });
}
thx
You should probably use the observe or on() methods instead of the normal onclick attributes - for your html add a class
<input type="button" value="This is a submit button" class="submitbutton" name="submit1" >
<input type="button" value="Another submit button" class="submitbutton" name="submit2" ">
<input type="button" value="Yet another submit button!" class="submitbutton" name="submit3" >
if you attach an observer to your form by giving it an id of "myform" the "click" event will bubble up from the button to the parent form and you can find out what button the click originated from using the findElement() method on the event that is passed like so. In this instance I would use the on() method as you can specify a CSS selector to limit the scope of the event handling. Otherwise every click would fire the handler.
$('#myform').on('click','.submitbutton',function(event){
var clickedbutton = event.findElement();
//then you can fire your submitMe() function
submitMe(this);
});
in the on() method this is the element that is being observed
You could do something like this:
<input id="a" type="button" value="This is a submit button" name="submit1" onClick="submitMe(this.id)">
<input id="b" type="button" value="Another submit button" name="submit2" onClick="submitMe(this.id)">
<input id="c" type="button" value="Yet another submit button!" name="submit3" onClick="submitMe(this.id)">
and then in your JS
submitMe(id){
switch(id)
{
case 'a':
-----
break;
case 'b':
-----
break;
}
}
In your HTML code you can use id attribute instead of name And pass the id of the clicked button to the function ...
<input type="button" value="This is a submit button" id="submit1" onClick="submitMe( this.id)">
<input type="button" value="Another submit button" id="submit2" onClick="submitMe( this.id)">
<input type="button" value="Yet another submit button!" id="submit3" onClick="submitMe( this.id)">
Then in your JS you can get the formId by...
function submitMe(eleId) {
var clickedButton = eleId // use it as you want
var frm = $(eleId).up('form'); // this will give the parent form
var div = 'msgDiv';
var url = 'mypage.aspx';
var pars = Form.serialize( frm );
var myAjax = new Ajax.Updater( div, url, { asynchronous:true, method:'post', parameters:pars });
}