My button is acting the way I need it to except when it is clicked on it completely disappears. Why is it doing this?
<script type="text/javascript">
function randomlinks(){
var myrandom=Math.round(Math.random()*6)
var links=new Array()
links[0]="https://abantutogether.org/"
links[1]="https://abantutogether.org/about-us"
links[2]="https://abantutogether.org/donate"
links[3]="https://abantutogether.org/get-involved"
links[4]="https://abantutogether.org/blog"
links[5]="https://abantutogether.org/contact-us"
links[6]="https://abantutogether.org/sponsor-a-child"
window.open(links[myrandom])
}
</script>
<form>
<input type="image" src="https://i.postimg.cc/43PDgqnZ/Logo-Pix-Teller-1.png" value="random link!" onClick="randomlinks()">
</form>
When you click the button another tab/browser window is opened and the page is being submitted. Is this the behavior you expect?
It sounds weird to me the form submission in this circumstance (there is no action attribute set in the form TAG) . Maybe you don't want to have this input inside a form, or alternatively you can just avoid the submmit by changing the onclick property as follow:
onClick="randomlinks(); return false;"
Related
I am working on a form widget on Elementor on WordPress, when the user submits the submit button of the form, it will show a pop-up which is created by elementor. The pop-up actually is a DIV tag including my HTML code which I wrote in an HTML widget into the pop-up, as below, and this DIV will be added by some Elementor function to the body tag of the page dynamically when user presses submit button.
<div id="calenderchooser01" style="min-height:100px;"></div>
<script>
function calenderchooser(){
var calenderhtml="";
var numofunits = document.getElementById("form-field-field_numberunits");
if(numofunits.value>=15){
calenderhtml = "<div class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;'>over 15</div>";
}else if(numofunits.value<15){
calenderhtml = "<div class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;'>less than 15</div>";
}
document.getElementById("calenderchooser01").innerHTML = calenderhtml;
console.log(calenderhtml);
}
document.getElementById("thisisanidcustom").addEventListener("click",
calenderchooser
);
</script>
thisisanidcustom is the id of submit button form. Also, I tested it with assigning showing of this pop-up to a normal button.
In both cases when I press the button it shows error on the Chrome console:
Uncaught TypeError: Cannot set property 'innerHTML' of null
at HTMLAnchorElement.calenderchooser (9a48896437a750ba11b18d8323f96ea7.js:59)
it references this line :
document.getElementById("calenderchooser01").innerHTML = calenderhtml;
and I think it says that the div#calenderchooser01 does not exist.
I think maybe the function call occurs before adding the DIV to the body tag. but I have not access to Elementor default functions to edit them and say after popup occurs call the calenderchooser(). so in this situation how can I call the function calenderchooser() right after popups shows up. I also thought of something like an event listener on DIV existing change state if available but found nothing.
this worked for me using window.setTimeout() method:
<div id="over15" class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;display:none'>over 15</div>
<div id="less15" class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;display:none'>less than 15</div>
<script>
function functionCall(){
setTimeout(calenderchooser, 100);
}
function calenderchooser(){
var numofunits = document.getElementById("form-field-field_numberunits");
if(numofunits.value>=15){
document.getElementById("over15").style.display = "block";
console.log("over15");
}else if(numofunits.value<15){
document.getElementById("less15").style.display = "block";
console.log("less15");
}
}
document.getElementById("thisisanidcustom").addEventListener("click", functionCall
);
</script>
I am trying to create an HTML form is separate parts for layout reasons. As far as I understand, you can use a fieldset with a form attribute to associate the fieldset with the form, even if it’s not inside the form (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset).
However, if I have a separate fieldset with a submit button or another input in it, it doesn’t seem to work.
<form id="test">
<input name="inside-stuff" value="Inside">
<button type="submit">Doit Inside</button>
</form>
<fieldset form="test">
<input name="outside-stuff" value="Outside">
<button type="submit">Doit Outside</button>
</fieldset>
In the above snippet I have two submit buttons and two inputs. The one in the actual form works, while the one in the attached fieldset doesn’t. When I use the inside submit button, it only submits what’s in side the main form, not what is in the associated fieldset.
This may not be obvious when running the snippet, but is certainly the case when tried in real life.
What is missing to make this work?
Update 1
The problem appears to be more generic than that. I find that input elements inside an associated fieldset don’t get submitted either.
Update 2
This is not a duplicate of Submit form using a button outside the <form> tag. This question specifically refers to a fieldset element. The other doesn’t even mention it.
I wrote the following javascript
function control() {
function view(i) {
var frm = items[i].getAttribute("form");
var fBase = document.querySelector("form[id=" + frm + "]");
fBase.addEventListener("submit", function(){
var fld = document.querySelector("fieldset[form='" + this.id + "']");
var cln = fld.cloneNode(true);
cln.style.display = "none";
document.getElementById(frm).appendChild(cln);
},true);
}
var items = document.querySelectorAll("FIELDSET[form]");
var getter = function () {
return this.getAttribute("form");
};
for(var i = 0; i < items.length; i++) {
view(i);
Object.defineProperty(items[i], 'form', {
get: getter
});
}
}
window.addEventListener("load",control,true);
It's happening because the Form you have placed inside the fieldset is wrong. The form should be the parent of the fieldset in order to get it to work!
The form tag should always be the parent of the fieldset.
If you place <form> and <fieldset> then it will work. The code below should do.
<form id="test">
<input name="stuff">
<button type="submit">Doit</button>
</form>
<form>
<fieldset>
<input type="text" name="stuff2">
<button type="submit">Doit</button>
</fieldset>
</form>
I hope this will help!
I am appending several buttons into an html span tag every time I type on different inputs.
<span id="pill_filters>
<button id="filterCreated">Filter name here</button>
<button id="filterCreated2">Filter name here</button>
</span>
I also wanna show a label whenever there are buttons inside of this span tag and if they aren't, I wanna hide said label.
<label id="label_sc">Search Criteria:</label>
So far my jquery is
function showSCLabel(){
if ($("#pill_filters").html.is(':empty')){
$("#label_sc").addClass("d-none");
}else{
$("#label_sc").removeClass("d-none");
}
}
But it doesnt seem to work. The label already has "d-none" class since the beginning and even with that, it is still showing. What am I doing wrong? is this not how the :empty state works? what can I use instead? I'll appreciate a lot your help!
if statement is missing ()
.html.is is invalid jQuery
Use:
if ( $("#pill_filters").is(':empty') ) {
Answer without jQuery:
//span
const span=document.getElementById("pill_filters");
//label
const label=document.getElementById("label-sc");
span.addEventListener('DOMSubtreeModified',function(){
//if innerHTML is not ""
if(span.innerHTML){
//show label
label.style.display="block";
}else{
//hide label
label.style.display="none";
};
};
So I am making a simple calculator app. Now I have a button to input '1' in the calculator. What I want is whenever I click on '1' button or press '1' on my keyboard, 1 should be input into the calculator. Here is my code -
<td><input type="button" class="button" name="one" value="1" onclick="calculator.display.value += '1'" onkeypress="if(event.keyCode == 49){calculator.display.value += '1'}"></td>
And my calculator display box is -
<input type="text" name="display" id="display" disabled>
Now what happens is when I click '1' button, 1 is displayed in my display box. But when I press '1' on my keyboard, nothing happens.
But when I click '1' button first, then press '1' on my keyboard, '11' gets into the display box, that is, the input is accepted through the keyboard.
I want this input via keyboard without having to click the button.
Please help.
Thanks in advance.
When you apply the onkeypress event to a specific element, it won't act the way you want it to because the element must be focused in order to catch the key press event, because the event is relative to that element.
let display = document.getElementById("display");
document.body.onkeypress = function() {
// Include all numbers, 0-10
for (var i = 0; i < 10; i++) {
if (event.keyCode == i + 48) display.value += i;
}
};
<html>
<body>
<input type="text" id="display" disabled />
<br>
<button id="btn1" onclick="display.value += '1'">1</button>
<button id="btn2" onclick="display.value += '2'">2</button>
<button id="btn3" onclick="display.value += '3'">3</button>
</body>
</html>
And on another note, somehow unrelated to the question but has been brought up here, regarding inline JS - it is generally considered bad practice. Some cases might justify it, but it is general consensus that it should be avoided. Read more:
Is inline JavaScript good or bad?
Why Inline CSS And JavaScript Code Is Such A Bad Thing
Reddit - why is inline onclick="function()" considered such a bad practice?
The problem is the position of your onkeypress(), if you move that out of the input tag for example in the <body> or in your <table> you could have a bigger "focus zone" where the event could be caught:
<head>
<script>
function onClick(val)
{
document.getElementById("display").value += val;
}
function onPress()
{
switch(event.keyCode)
{
case 49: document.getElementById("display").value += 1;
break;
case 50: document.getElementById("display").value += 2;
break;
}
}
</script>
</head>
<body onkeypress="onPress()">
<table>
<td>
<input type="button" class="button" name="one" value="1" onclick="onClick(1)">
</td>
</table>
<input type="text" name="display" id="display" disabled/>
</body>
Hope this help :)
onkeypress works only if the focus is on the button. If you don't click the button first, the focus isn't on the button and the button can't recognize the keypress. As soon as you click the button, it gets the focus and it can recognize the keypress.
You could try adding the onkeypress event to your body tag.
<body onkeypress="if(event.keyCode == 49){calculator.display.value += '1'}">
As mentioned in another answer onkeypress will only work if the element is focused. Also you should no use inline JS but let both event refer to a function which you execute when the event occurs. Here is an example with an input element.
function myFunc () {
alert("event happening");
}
input:focus {
background-color: red;
}
<input onkeypress="myFunc()" onclick="myFunc()"/>
When the element is clicked the event fires. Also when the element is focused and a key is pressed the event fires. Hopefully this is helpful.
I have got a link with an id and listen for the click event. I have set up an event listener for a different id as well.
How can I fire the right events if I change the links id dynamically? ATM it will still use the old event listener despite the different id
This jsfiddle is not working!
Any ideas?
HTML
Click Me
<div id="result"></div>
jQuery
jQuery('#button1').on('click',function(){
jQuery('#result').show().html('Clicked on button 1!').fadeOut(1000);
jQuery(this).attr('id','button2');
});
jQuery('#button2').on('click',function(){
jQuery('#result').show().html('Clicked on button 2!').fadeOut(1000);
jQuery(this).attr('id','button1');
});
Your code could be just:
jQuery('#button1').on('click',function(){
$(this).data('toggled', !$(this).data('toggled'));
jQuery('#result').finish().show().html($(this).data('toggled') ? 'Clicked on button 1!' : 'Clicked on button 2!').fadeOut(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Click Me
<div id="result"></div>
You shouldn't switch ID attribute for specific element in any case. If you have specific style to apply, then toggle a class instead.