press a button without id or name with javascript - javascript

i need to press a button in one page, but the button dont have id, name or anything else
only this is the code of the button:
<input type="submit" value="continue">
there is a way to press it?
i tried this code from here:
function clickButton(val)
{
var buttons = document.getElementsByTagName('input');
for(var i = 0; i < buttons.length; i++)
{
if(buttons[i].type == 'button' && buttons[i].value == val)
{
buttons[i].click();
break; //this will exit for loop, but if you want to click every button with the value button then comment this line
}
}
}
but dont worked too, nothing happen, the page refresh but still in the same place

Your input is type "submit", however your javascript is looking for type "button". Try changing to this:
function clickButton(val)
{
var buttons = document.getElementsByTagName('input');
for(var i = 0; i < buttons.length; i++)
{
if(buttons[i].type == 'submit' && buttons[i].value == val)
{
buttons[i].click();
break; //this will exit for loop, but if you want to click every button with the value button then comment this line
}
}
}
And ensure that you pass the correct value when calling this function:
clickButton('continue');

Type of your button is "submit" not "button":
<input type="submit" value="continue">
Change this:
buttons[i].type == 'submit'

Related

Radio input checked with keyboard shortcut doesn't trigger event change

I have added a keyboard shortcut to my script so that when I press ctrl + 1 the first "source" radio input is checked :
if (e.key == "1" && e.ctrlKey) {
document.getElementsByName("source")[0].checked = true;
}
So far everythin is good. I have added an event listener so that when the state of my radio input are changed, then several things happen. But this event listener isn't triggered when I press ctrl+1 even thought the state of the radio input is changed (I can see the color of the input changing). If click manually on the radio input then the event listener is working:
var radiosource = document.getElementsByName("source");
for (var i = 0; i < radiosource.length; i++) {
radiosource[i].addEventListener('change', function (e) {
var input_changed_id = e.target.id;
if (input_changed_id.includes("en")) {
document.getElementById("fr_target").checked = true;
current_target = "fr";
}
if (input_changed_id.includes("fr")) {
document.getElementById("en_target").checked = true;
current_target = "en";
}
translate();
});
}
Here is the full script (cf lines 119 and lines 49 and 322)
It won't trigger if you change the checked value manually but your event will trigger if you simulate the click on the radio button using .click().
So just update your keyboard shortcut script to this:
if (e.key == "1" && e.ctrlKey) {
document.getElementsByName("source")[0].click();
}

alert box shows up N times after clicking N times on submit button

Given this function:
function validate() {
var elements = ["firstname", "lastname", "password", "favfood", "favsport"];
document.getElementById('register').noValidate = true;
document.getElementById('register').addEventListener('submit', function(event) {
for (var i = 0; i < elements.length; i++) {
if(document.getElementById(elements[i]).hasAttribute("required")) {
if(!document.getElementById(elements[i]).checkValidity()) {
event.preventDefault();
alert('Please, fill in every required field of the form.');
break;
}
}
}
}, false);
}
And this form:
<form name="register" id="register" method="POST" action="this-file.php">
[HTML ELEMENTS TO VALIDATE]
<input type="submit" value="Register" onclick="validate()">
</form>
When I press Register the first time (without filling in anything), the alert box shows up just once; if I press Register again, the alert box shows up twice and so on. What's going on?
I'm using a custom JavaScript function to validate my form because the required attribute does not work on Safari.
Thank you all in advance.
Its quite straightforward, you are adding submit event listener each time whenever your hit submit button i.e. through validate function. There are two ways to handle this either register it only once or remove the added listener first and than add it.
First Way
function validate() {
var elements = ["firstname", "lastname", "password", "favfood", "favsport"];
document.getElementById('register').noValidate = true;
document.getElementById('register').addEventListener('submit', function(event) {
for (var i = 0; i < elements.length; i++) {
if(document.getElementById(elements[i]).hasAttribute("required")) {
if(!document.getElementById(elements[i]).checkValidity()) {
event.preventDefault();
alert('Please, fill in every required field of the form.');
break;
}
}
}
}, false);
}
validate(); // call this function directly and remove it from your submit button
Second Way
function validateCallback(event) {
var elements = ["firstname", "lastname", "password", "favfood", "favsport"];
for (var i = 0; i < elements.length; i++) {
if(document.getElementById(elements[i]).hasAttribute("required")) {
if(!document.getElementById(elements[i]).checkValidity()) {
event.preventDefault();
alert('Please, fill in every required field of the form.');
break;
}
}
}
}
function validate() {
document.getElementById('register').noValidate = true;
document.getElementById('register').removeEventListener('submit', validateCallback, false);
document.getElementById('register').addEventListener('submit', validateCallback, false);
}
and use it same as you are using currently.
You are getting more and more alerts because inside your validate method, you're adding a new event listener to the submit button each time.

Function activate after two onclicks

Hey I'm using javascript+html only.
Is there any way to activate a function after the button has been clicked two (or more) times? I want the button to do NOTHING at the first click.
For a "doubleclick", when the user quickly presses the mouse button twice (such as opening a program on the desktop), you can use the event listener dblclick in place of the click event.
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/dblclick
For a quick example, have a look at the below code. http://jsfiddle.net/jzQa9/
This code just creates an event listener for the HTMLElement of "item", which is found by using getElementById.
<div id="item" style="width:15px;height:15px;background-color:black;"></div>
<script>
var item = document.getElementById('item');
item.addEventListener('dblclick',function(e) {
var target = e.target || e.srcElement;
target.style.backgroundColor = 'red';
},false);
</script>
As for wanting the user to click an element X times for it to finally perform an action, you can do the following. http://jsfiddle.net/5xbPG/
This below code works by adding a click tracker to the HTMLElement and incrementing the click count every time it's clicked. I opted to save the clicks to the HTMLElement instead of a variable, but either way is fine.
<div id="item" style="width:15px;height:15px;background-color:black;"></div>
<script>
var item = document.getElementById('item');
item.addEventListener('click',function(e) {
var target = e.target || e.srcElement;
var clicks = 0;
if(target.clicks)
clicks = target.clicks;
else
target.clicks = 0;
if(clicks >= 4) {
target.style.backgroundColor = 'red';
}
target.clicks += 1;
},false);
</script>
== UPDATE ==
Since you recently posted a comment that you want two different buttons to be clicked for an action to happen, you would want to do something like this... http://jsfiddle.net/9GJez/
The way this code works is by setting two variables (or more) to track if an element has been clicked. We change these variables when that item has been clicked. For each event listener at the end of changing the boolean values of the click state, we run the function checkClick which will make sure all buttons were clicked. If they were clicked, we then run our code. This code could be cleaned up and made to be more portable and expandable, but this should hopefully get you started.
<input type="button" id="button1">
<input type="button" id="button2">
<div id="result" style="width:15px;height:15px;background-color:black;"></div>
<script>
var result = document.getElementById('result');
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var button1Clicked = false;
var button2Clicked = false;
button1.addEventListener('click',function(e) {
button1Clicked = true;
checkClick();
},false);
button2.addEventListener('click',function(e) {
button2Clicked = true;
checkClick();
},false);
function checkClick() {
if(button1Clicked && button2Clicked) {
result.style.backgroundColor = 'red';
}
}
</script>
Two ways you can do this, one would be to have a data attribute within the html button that identifies whether the click has been done.
<button id="btn">Click Me!</button>
<script>
var clickedAlready = false;
document.getElementById('btn').onclick = function() {
if (clickedAlready) {
//do something...
}
else
clickedAlready = true;
}
</script>
While global variables aren't the best way to handle it, this gives you an idea. Another option would be to store the value in a hidden input, and modify that value to identify if it's the first click or not.
Maybe something like this?
var numberTimesClicked = 0;
function clickHandler() {
if (numberTimesClicked > 0) {
// do something...
}
numberTimesClicked++;
}
document.getElementById("myBtn").addEventListener("click", clickHandler);

How to click buttons after creating with jQuery?

I have 10 buttons that are created when click button "Create".
How to also click all those buttons when i click "Create" ?
function a() {
selectAll();
jQuery(selectAllValues());
};
function selectAllValues() {
for(var i = 0; i < array.length; i++) {
document.getElementById("select" + array[i]).click();
}
};
The problem is that the buttons are created but not clicked.
Just use Jquery like this :
$("#select" + array[i]).click();
Or without loop : http://api.jquery.com/attribute-starts-with-selector/
//Will execute the click event on all element where the id begins by "select"
$('[id^="select"]').click();
Why do you want to click them all? Are these actually checkboxes that you are trying to mark as "Checked"?
//If checkboxes then try
$('#select'+array[i]).prop('checked', true);
if these are truly buttons then why wouldn't you manually initialize the "onClick" function that they would initialize?
for(var i = 0; i < array.length; i++) {
//call the onClick function yourself here
}
Please elaborate
EDIT:
function selectAllValues() {
for(var i = 0; i < array.length; i++) {
$('#select'+array[i]).prop('checked', true);
//code to create tables
//loop through tables
$('tableselector').each(function(key,value){
//check the checkboxes within the tables
$(this).find('input[type="checkbox"]').prop('checked', true);
});
}
};

need to click 2 times to lose focus

In my form, I have some fields on which I have applied onblur event. Problem is if I click on save directly after entering some field, save does not get called. I need to click twice.
For more clarifications, refer to steps below and code snippet is also attached.
1) Enter some value in input box
2) Lose focus by either tabing out or clicking somewhere else on screen
3) it works fine and function triggerOnBlur gets invoked
4) now enter some value in input box again
5) straight away click on save button, without clicking anywhere else
6) function triggerOnBlur gets invoked, but in order to click save button, I need to click on save.
I want to get it done in one click..
<!DOCTYPE html>
<html>
<head>
<script>
function triggerOnBlur()
{
alert("onblur event triggered");
}
function triggerSaveButton()
{
alert("save button");
}
</script>
</head>
<body>
<form>
<input type = "text" onblur = "triggerOnBlur()" />
<input type = "submit" value = "Save" onclick = "triggerSaveButton()" />
</form>
</body>
</html>
You could always do something like:
function triggerSaveButton()
{
var inputs = document.getElementsByTagName("input"), input = null;
for(var i = 0, len = inputs.length; i < len; i++) {
input = inputs[i];
if(input.type == "text" && input == document.activeElement) {
input.blur();
}
}
// onblur triggered, now continue with function
alert("save button");
}
Because your alert() break the click event, click event need you release mouse key on the button, if you must use alert(), you may use onmousedown event, look at this example
http://jsfiddle.net/3w8VM/

Categories

Resources