Show/ Hide by Div Id - javascript

I have several fields in a form and if a user clicks on one field I want to display a table otherwise if they click another field the table should be hidden.
I tried this javascript but when other fields are clicked it doesn't hide the table:
<script>
function myFunction() {
if (document.getElementById("userform")) {
document.getElementById("userinfo").style.display="block";
} else {
document.getElementById("userinfo").style.display="none";
}
}
</script>
On each field I have included a onclick="myFunction()" within each input type. The table is set to style="display:none"
This is the HTML:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="userform"
placeholder="Enter your unique Pi identity" onclick="myFunction()">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-sm-1 control-label">
<b>Password</b>
</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1"
placeholder="Password" onclick="()">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-sample btn-lg">
<b>Submit</b>
</button>
</div>
</div>
</form>
<div id="userinfo" class="collapse in" style="display:none">
<table class="table table-bordered" id="phone-table">
<tbody>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<br> <b>1</b>
</button>
</td>
<td class="col-md-1">
<button type="button"
class="btn btn-primary btn-xs1">
<b>ABC<br>2
</b>
</button>
</td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>DEF<br>3
</b>
</button>
</td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>GHI<br>4
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>JKL<br>5
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>MNO<br>6
</b>
</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>PQRS<br>7
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>TUV<br>8
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>WXYZ<br>9
</b>
</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b><i class="fa fa-arrow-circle-left"></i><br>Del</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b> <br>0
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b><i class="fa fa-eraser"></i><br>Clr</b>
</button></td>
</tr>
</tbody>
</table>
</div>

since Jquery was among tags, i throw my cents in jquery
.hide(); / .show(); implicitly sets dislay to block or none in css.
$(function(){
$('#close').on('click',function(){
$('#danceforme').hide();
});
$('#open').on('click',function(){
$('#danceforme').show();
});
});
html
<button id="close">Stop Dancing</button>
<button id="open">Dance for me</button>
<div id="danceforme">
I am dancing
</div>
demo: http://jsfiddle.net/doniyor/5FT9x/

You have tagged jQuery also so in that case it will be
$("#id").show();
$("#id").hide();

Doniyor's Answer is great for jQuery. I want to help explain how to make your existing code work, since that will help you understand why it wasn't working, instead of just handing you a solution.
Simple Solution
The problem with myFunction() is the if statement -
if (document.getElementById("userform"))
That checks to see if an element with ID "userform" exists in the DOM. If it does, the statement returns true. Since there's an input with ID "userform" in the HTML you provided, this will always be true.
Instead, you want to check if the element that triggered your function had the ID "userform",
so the relevant HTML would look like this:
<div class="form-group">
<label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="userform"
placeholder="Enter your unique Pi identity" onclick="myFunction(this)" />
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-sm-1 control-label">
<b>Password</b>
</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1"
placeholder="Password" onclick="myFunction(this)"/>
</div>
</div>
And myFunction() would look like this:
function myFunction(obj) {
if (obj.id == "userform") {
document.getElementById("userinfo").style.display="block";
} else {
document.getElementById("userinfo").style.display="none";
}
}
jsFiddle
An explanation of registering onclick events. Because you're registering the onclick via html, and not in a script, the triggering element does not become the owner of the function, which is what this would refer to. So we have to pass the object via a parameter, and check that object's ID.
Of course, this is all very roundabout, and since you're already using jQuery and bootstrap, you probably don't want to manually show and hide things.
Bootstrap + jQuery fancy solution
The div you're trying to show/hide is a collapse, which bootstrap has functionality for already.
Bootstrap solution jsFiddle
Explanation: First, I removed the style="display:none" and class in on the collapse element. Class in on a collapse tells bootstrap to default the element to showing, while display:none overrides bootstrap's styling. It is enough to use class="collapse", which defaults to collapsed, or hidden.
Next, I removed the onclick assignments, since we'll let bootstrap handle that.
Finally, I replaced the existing script behavior with a script telling bootstrap the behavior we want:
$("#userform").focusin(function(){alert("in"); $("#userinfo").collapse("show");});
$("#inputPassword1").focusin(function(){alert("out"); $("#userinfo").collapse("hide");});
I left the alerts in for debugging, always helpful when you're not sure what's going on!
So what is this doing? Following Bootstrap's example usage, we want the collapse to show when we click the "userform" element.
First, we tell jquery we want to do something when the element with id userform gets focus. That's $("#userform").focusin() via jQuery API docs.
Then we tell jquery what we want to do when that happens - we could specify a named function, like myFunction(), but in this case, it's just one line, so we create an inline function. That's function(){}.
Inside that function we specify the Bootstrap behavior we need. From the Bootstrap docs, we know we can use the function collapse("show") to manually expand the collapse element. To tell Bootstrap which one, we just give jQuery the element id! Together, that's $("#userinfo").collapse("show");
Putting that inside the function that's triggered, which is specified in our focusin() function, we get the final result: `$("#userform").focusin(function(){ $("#userinfo").collapse("show");});
Next, we do the same for the elements we want to trigger hiding the collapse element. So we just modify that line for #inputPassword1, and tell it to hide the collapse using collapse("hide") instead of "show". Logical, right?
I find it very helpful when I'm programming behaviors like this to consult the documentation. There are usually examples of exactly what I want to do, which only require minor tweaking to get working on my sites.
jQuery's documentation is here.
Bootstrap's documentation is here.
And when asking for help on SO, it's great if you can create a jsFiddle to isolate the problem from the complexities of the website you're producing. Then other users who want to help can create modified copies of your code to show. It's super helpful!
Cheers.

Related

How can i add tag to text in search box

I am working on a job-listing project that fetches jobs based on the selected country, now I am trying to create a search box that changes my text to tags just like StackOverflow's way of adding tags. I already have the figma design but implementing is the problem.
Here is the figma link: https://www.figma.com/proto/UE9D4alg1970WXIDnLAfVzHz/listing-by-country?node-id=96%3A0&scaling=min-zoom
<div class="input-group input-group-search">
<input id="search-text" value="" type="search" class="form-control" placeholder="Enter Job listing according to Countries">
<div class="input-group-btn">
<button class="btn btn-primary ml-2" id="search-submit" type="submit">Search</button>
</div>
</div>
I expect the result to produce tags immediately after or inside the search box. Thanks in advance
You could use something like: https://github.com/yairEO/tagify
or even:
https://selectize.github.io/selectize.js/
Google is your friend.

Vue.js closes form tag in a for loop

I use Vue.js to create a table in which every row is form with a submit button, this is the code I use:
<div id="admin-user">
<table class="table">
<tr v-for="(user, index) in users">
<form action="/ajax/submit/admin/user.php">
<td class="spacer"><input type="text" class="form-control" :value="user.id" readonly></td>
<td class="spacer"><input type="text" class="form-control" name="fullname" :value="user.fullname"></td>
<td class="spacer"><input type="text" class="form-control" name="username" :value="user.username"></td>
<td class="spacer"><input type="text" class="form-control" name="email" :value="user.email"></td>
<td class="spacer"><input type="text" class="form-control" name="phone" :value="user.phone"></td>
<td class="spacer"><input type="text" class="form-control" name="company" :value="user.company"></td>
<input type="hidden" name="id" :value="user.id">
<td class="spacer"><button type="submit" class="btn btn-success btn-block btn-lg right"><i class="fa fa-floppy-o" aria-hidden="true"></i></a></td>
</form>
</tr>
</table>
</div>
Of course I also have the Vue.js code in JavaScript but I don't think its necessary to solve this problem and it is quite long so I wont bother anyone with it.
The styling turns out fine but the form doesn't work, so I took a look with the inspector tool and this is what I found
And it turns out the </form> tag got closed prematurely. I don't understand why this happend which also means I don't know how to solve it. I hope someone could explain why this is happening to me.
The problem is not because of Vue.js or even Javascript, the problem is because of HTML itself. HTML does not allow the use of a form tag directly inside a table (row). Take a look at this question which has some working solutions.

Styling submit buttons -- Rails app

I have been trying to put a font awesome or glyphicon (or even an image) inside a submit button. This quickly falls apart, and I need to implement another option. I have seen a few ways of doing this, but I don't know which is the "right" or better way.
The three contenders I've seen are:
divs
links
buttons
Which is the best way to get an image / icon inside a "submit" button?
Wouldn't all three need a JS component?
This is how bootstrap add glyphicon to button object:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Bootstrap button with glyphicon
The button option does not need JS. I have tested it and you can see a working example using Font Awesome here https://jsfiddle.net/mikhailjan/sf9s28et/5/ or just see the code below:
<form action="add_person.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" class="button">
<i class="fa fa-user-plus"></i> Add Person
</button>
</form>
Jonathan Anctil is correct, the button needs to have type="submit" for the form to work normally.

Make a submit <button> work outside of <form> block? [duplicate]

This question already has answers here:
Submit form using a button outside the <form> tag
(15 answers)
Closed 8 years ago.
I want to place a submit <button> outside of a <form> block. How to make a submit that can execute method="post" action="/order/setup" from form block`?
<form id="order-form" role="form" method="post" action="/order/setup">
<input type="text name="first_name" />
</form>
<div class="details-section-button row">
<button type="submit" class="btn btn-block btn-dark right shadow arrow">Next <i class="icn btn-right-arrow"></i></button>
</div>
In browsers that support the new form attribute from HTML 5:
<button form="order-form">…</button>
… but don't. Adjust your design so that form controls are inside the form they are associated with. It doesn't make semantic sense to split them up.
$("form#order-form").submit();
http://api.jquery.com/submit/
Try something like this, giving your submit button an id of submitButton:
<div class="details-section-button row">
<button id="submitButton" type="submit" class="btn btn-block btn-dark right shadow arrow">
Next
<i class="icn btn-right-arrow"></i>
</button>
</div>
Then with jQuery:
$("#submitButton").on("click", function () {
$("form#order-form").submit();
});

Change button's font size

I'm trying to change font size on button but have had no success
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<input type="button" value="Open" onclick="ZZ();">
</div>
<div class="ui-block-b">
<input type="button" value="close">
</div>
<div class="ui-block-c">
<input type="button" value="BUG">
</div>
</fieldset>
I've tried this, but it won't change the font size:
<div class="ui-block-c">
<input style="font-size:10px;" type="button" value="BUG">
</div>
As much I have understood, you want to change font size of button.
Check this fiddle
I have just added a "class" attribute which has been set in css.
like
<input type="button" value="Test Button" class="btnClass"/>
and css code:
.btnClass {
font-size: 12px;
}
You may set size as per your need.
If you want to change is dynamically, you can use .addClass method. jquery document for the same
If haven't got you correctly please come again.

Categories

Resources