We Keep Coding

Hide&Show Fieldset on Javascript using a button doesn't work on first click / How to change button title on click

I am trying to hide/sow a fieldset using a button, which works like a charm. However it doesn't wonk when I click the first time, but from the second time on it keeps working ok.
How can I make work the first time I click the button.
Also I'd ike to change the button's title on click too, but I don't know how.
Thanks in advance!
This is the code I have:
$(document).ready(function() {
$('#OcultarEncabezadoFactura').click(function() {
var fieldset = document.getElementById("fsEncabezado");
var boton = document.getElementById("OcultarEncabezadoFactura");
if (boton.textContent== "Ocultar Encabezado") {
$('#fsEncabezado').hide();
boton.textContent= "Mostrar Encabezado";
//title I would like the button to have when fieldset is hidden
} else {
$('#fsEncabezado').show();
boton.textContent= "Ocultar Encabezado";
//title I would like the button to have when fieldset is shown
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button>
<fieldset id="fsEncabezado"></fieldset>

A button element doesn't have a title property so your test was failing. You need to check the button's textContent.
Also, don't use HTML comment syntax (<!-- comment -->) inside of <script> tags. To comment in JavaScript, it's: // comment here.
$(document).ready(function(){
$('#OcultarEncabezadoFactura').click (function(){
var fieldset = document.getElementById("fsEncabezado");
var boton= document.getElementById("OcultarEncabezadoFactura");
if(boton.textContent =="Ocultar Encabezado"){
fieldset.classList.add('hide');
boton.textContent ="Mostrar Encabezado";
} else {
fieldset.classList.remove('hide');
boton.textContent="Ocultar Encabezado";
}
});
});
.hide { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button>
<fieldset id="fsEncabezado"></fieldset>
But, if your goal is to have a button that simply toggles the visibility of the fieldset, just use the element.classList.toggle() API:
$(document).ready(function(){
var fieldset = document.getElementById("fsEncabezado");
$('#OcultarEncabezadoFactura').click (function(){
fieldset.classList.toggle("hide");
});
});
.hide { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button>
<fieldset id="fsEncabezado"></fieldset>

You should use innerHTML to change the text on your button, not title.
$(document).ready(function() {
$('#OcultarEncabezadoFactura').click(function() {
var fieldset = document.getElementById("fsEncabezado");
var boton = document.getElementById("OcultarEncabezadoFactura");
if (boton.innerHTML == "Ocultar Encabezado") {
fieldset.classList.add('hide');
boton.innerHTML = "Mostrar Encabezado";
<!-- title I would like the button to have when fieldset is hidden-->
} else {
fieldset.classList.remove('hide');
boton.innerHTML = "Ocultar Encabezado";
<!-- title I would like the button to have when fieldset is shown-->
}
});
});
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button>
<fieldset id="fsEncabezado">
<input type="text" />
</fieldset>

Trying to change a link on button click with javascript

I have three buttons and i want such tha when i click on one button the link on an a tag changes
<a class="payverlink" href="exbronzeregistrationform.php">Continue to registration</a>
<button class="goldpac">Choose Plan</button>
<button class="silverpac">Choose Plan</button>
<button class="bronzepac">Choose Plan</button>
I want such that when i click on one button, it changes the link at .payverlink
I have tried
function bronze()
{
$('.payverlink').href="exbronzeregistrationform.php";
}
function silver()
{
$('.payverlink').href="exsilverregistrationform.php";
}
<button class="silverpac" onclick="silver()">Choose Plan</button>
<button class="bronzepac" onclick="bronze()">Choose Plan</button>
But this changes to bronze function onclick of any of the buttons. Please whats the issue.

You could set your javascript code to trigger the button click and avoid using the onclick into html
$(document).ready(function() {
$("button").on('click', function(){
if ($(this).hasClass('goldpac')) {
window.location="http://..."; /* or exbronzeregistrationform.php for example */
} else if ($(this).hasClass('silverpac')) {
window.location="http://..."; /* or exbronzeregistrationform.php for example */
} else if ($(this).hasClass('bronzepac')) {
window.location="http://..."; /* or exbronzeregistrationform.php for example */
}
});
});
You could add one more line in each case changing the a tag, but ti wont make a huge difference in your actions as it isn't used as you click the buttons.
$("a.payverlink").attr("href", "http://...."); /* or exbronzeregistrationform.php for example */
So, you could just remove the 'href' as you contantly will change the url from js.

Use attr or prop, attr stands for attribute and prop for property!
$(
function(){
$('#google').attr('href', 'https://duckduckgo.com/');
//or use prop
$('#duckduckgo').prop('href', 'https://bing.com')
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Learning</title>
</head>
<body>
<h1 class="header"></h1>
<a id="google" href="https://google.com/">google is down!</a>
<br>
<a id="duckduckgo" href="https://duckduckgo.com/">I'm slow...</a>
</body>
</html>

I suspect that both functions are failing, since there is no such property href on JQuery object.
Use this approach instead:
$('.payverlink').prop("href","exbronzeregistrationform.php");

Have you try .prop() method of jQuery hopefully it works .
function bronze()
{
$('.payverlink').prop('href','exbronzeregistrationform.php');
}
function silver()
{
$('.payverlink').prop('href','exsilverregistrationform.php');
}

You can use the .attr function:
function bronze(){
changeLink('exbronzeregistrationform');
}
function silver(){
changeLink('exsilverregistrationform.php');
}
function changeLink(url){
$('.payverlink').attr('href',url);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="payverlink" href="exbronzeregistrationform.php">Continue to registration</a>
<button class="silverpac" onclick="silver()">Choose Plan silverpac</button>
<button class="bronzepac" onclick="bronze()">Choose Plan bronzepac</button>

function bronze()
{
$('.payverlink').attr("href","exbronzeregistrationform.php");
}
function silver()
{
$('.payverlink').attr("href","exsilverregistrationform.php");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="payverlink" href="exbronzeregistrationform.php">Continue to registration</a>
<button class="goldpac">Choose Plan</button>
<button class="silverpac" onclick="silver()">Choose Plan</button>
<button class="bronzepac" onclick="bronze()">Choose Plan</button>
You can try this. it will helps you. :)

Show div element when button is clicked before the form is submitted

I want to show a spinner div element on my page when user clicks submit button. There seems to be a bug in my code as I checked multiple answers and suggestions here for similar problems and nothing seems to work - on click console message is shown and the page starts reloading without showing the div element.
HTML:
<form action="/uploader" id="upload_form" method="POST" enctype="multipart/form-data" runat="server">
...
<div class="form-group">
<input type = "submit" id="upload_button" class="btn btn-primary btn-lg" />
</div>
</form>
Jquery:
$(document).ready(function(){
$('#upload_form').on('submit', function(e) {
e.preventDefault();
$('.sk-cube-grid').show();
console.log('Upload button was clicked');
this.submit();
});
});
I also tried without success :
$('#upload_button').on('click', function(e) {
console.log('Clicked on upload form');
$('.sk-cube-grid').show();
});
EDIT: when I remove this.submit(); the spinner is shown after click but the form is not submitted - so CSS seems to be fine. Also, upload takes several seconds before page is reloaded so I have time to see the messages on console and verify that no spinner is shown...

The code works. But the message quickly disappear becouse a new page is rendered.
$('.sk-cube-grid').hide();
$('#upload_form').on('submit', function(e) {
e.preventDefault();
$('.sk-cube-grid').show();
console.log('Upload button was clicked');
var form = this;
setTimeout( function () {
form.submit();
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/7914637" id="upload_form" method="GET">
<p>...</p>
<div class="form-group">
<input type = "submit" id="upload_button" class="btn btn-primary btn-lg" />
</div>
</form>
<div class="sk-cube-grid">My hide message</div>

I think that you should make an additional submit button that is hidden and is being pressed automatically by JavaScript after an interval that the spinner should have been shown.
Code:
<form action="/uploader" method="POST">
<input type="button" value="Submit" onclick="showSpinner()">
<div id="loading"></div>
<input type="submit" style="visibility: hidden" id="submit">
<script>
function showSpinner() {
document.getElementById("loading").style = "background: blue";
document.getElementById("animation").innerHTML =
'#keyframes loading {
100% { background: red; }
}';
setTimeout(redirect, 2000)
}
function redirect() {
document.getElementById("submit").click();
}
</script>
<style>
#loading {
height: 50px;
width: 50px;
animation: loading 2s linear infinite;
</style>
<style id="animation"></style>
You can increase the setTimeout to fit your spinner, or if you use percentage, make it redirect when it's 100%.

You need to make a check before confirmation like:
$(function() {
$('#upload_button').on('click', function(e) {
if (confirm("Click OK to continue?")){
$('form').submit();
}
else
{
e.preventDefault();
}});
});
Hope it will help you.

How to make a button visible by clicking another button?

How can I make the button save visible when I click the edit button? This is my code so far, but it happends nothing. I'm working in a jsp
<INPUT TYPE="BUTTON" VALUE="Edit" ONCLICK="btnEdit()" class="styled-button-2">
<INPUT TYPE="BUTTON" VALUE="Save" ONCLICK="btnSave()" class="styled-button-2" style="visibility:hidden;" id="save">
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementsById("save").style.visibility="visible";}
}
</script>

DEMO
It is considered bad practice to add onclick in your html, and you miss-spelled a method. You should equally avoid adding your css in your html as well.
HTML:
<INPUT TYPE="BUTTON" VALUE="Edit" class="styled-button-2" id="edit">
<INPUT TYPE="BUTTON" VALUE="Save" class="styled-button-2" id="save">
JS:
var edit = document.getElementById("edit");
var save = document.getElementById("save");
edit.onclick = function() {
save.style.visibility = "visible";
}
CSS:
#save {
visibility: "hidden";
}

Must be a long day.
You have a misspelling.
Not right
document.getElementsById
Right Way
document.getElementById

document.getElementById("save").style.visibility="visible";
use getElementById not getElementsById

Probably a simple error, but you wrote getElementsById not getElementById, which meant you were trying to get more than one element, when infact you only need to get the "save" button.
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementById("save").style.visibility="visible";}
}
</script>
Side note: You may want to tidy your code:
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
document.getElementById("save").style.visibility="visible";
}
</script>

Javascript: Run a script depending on which button is clicked

Can someone enlighten me on this please. I was trying to implement a simple Javascript function. The idea is, to run a conditional script depending on which button is clicked. Can't seem to figure this out:
<script type="text/javascript">
function whichButton(){
if(//Button 1 is clicked...){
//Run script 1
}
else if(//Button 2 is clicked){
//Run script 2
}
else if(//Button 3 is clicked){
//Run script 3
}
else if(//Button 4 is clicked){
//Run script 4
}
else{
//Do nothing
}
}
</script>
<form id="form1" onSubmit="whichButton();">
<button id="btn1">Button 1</button><br/>
<button id="btn2">Button 2</button><br/>
<button id="btn3">Button 3</button><br/>
<button id="btn4">Button 4</button><br/>
</form>
Thanks in advance!

You want to add onclick handlers to the button tags:
<script type="text/javascript">
function whichButton(buttonElement){
alert(buttonElement.id);
var buttonClickedId = buttonElement.id;
if( buttonClickedId === 'btn1' ){
// do btn1 stuff
}
else if( buttonClickedId === 'btn2' ){
// do btn2 stuff
}
// ...
else{
// don't know which button was clicked
}
}
</script>
<form id="form1" >
<button id="btn1" onclick="whichButton(this)">Button 1</button><br/>
<button id="btn2" onclick="whichButton(this)">Button 2</button><br/>
<button id="btn3" onclick="whichButton(this)">Button 3</button><br/>
<button id="btn4" onclick="whichButton(this)">Button 4</button><br/>
</form>
EDIT:
To run different code based on which button was clicked, use an IF statement similar to your original post, which I've edited above. // you can take that alert out, or move into each if/else if scope.

Pass the from to your function, then find the active element:
<form id="form1" onSubmit="whichButton(this);">
Buttons...
</form>
And the JavaScript:
function whichButton(form) {
var clicked = form.querySelector(":active");
switch(clicked.id) {
case "btn1":
// do stuff
break;
// add more cases
}
}
Note that I'm not certain about this, but I've tested it and it seems to work. Note that IE7 and older do not support :active, I have no idea how to make this work in those older versions.
EDIT: Here's a Fiddle to demonstrate.

You can try with jQuery the following:
<script type="text/javascript">
$(document).on("click", "button.btn", function(){
console.log("You clicked " + $(this).html());
return false;
});
</script>
<form>
<button class="btn">Button 1</button><br/>
<button class="btn">Button 2</button><br/>
<button class="btn">Button 3</button><br/>
<button class="btn">Button 4</button><br/>
</form>

Use AJAX to get the scripts, insert them somewhere in the DOM and use initialize() to run them.
$.get('js/script1.js', function(data) {
$('#dummydiv').html(data);
initialize();
});