Here is the HTML of the button i would like to click:
<div style="" class="widgetPlaceholder widgetExpireTurbo" data-widget="turboBinary_tradologic_expireTurbo">
<input type="button" value="15s" class="expireTurboRuleInterval activeRule" data-ruleid="149">
<input type="button" value="30s" class="expireTurboRuleInterval" data-ruleid="148">
<input type="button" value="45s" class="expireTurboRuleInterval" data-ruleid="147">
<input type="button" value="1m" class="expireTurboRuleInterval" data-ruleid="106">
<input type="button" value="2m" class="expireTurboRuleInterval" data-ruleid="107">
<input type="button" value="5m" class="expireTurboRuleInterval" data-ruleid="108">
</div>
I wish to click the button with the value="30s" progmatically via jquery.
Here is the URL: https://binarykings.co.uk/traderoom-aspx?game=turbo&view=single&lang=en&filter=currencies
Thanks
You can use Attribute Equals Selector [name="value"]
Live Demo
$(':button[value="30s"]').click();
Use attribute-equals-selector
jQuery('input[value="30s"]').click();
$('input[value="30s"]').click();
You need to use selector on attibute and also call click when page is loaded:
$(function(){$('input[value="30s"]').click();})
FIDDLE
Related
In the HTML below, how can I use jQuery .empty to remove <div class="password-link"> and everything inside - the href link, the text Log in and the </a> - as well as the closing </div>?
I'm trying to use
jQuery('#lostpasswordform input#wp-submit').empty('password-link');
but I must not be selecting the input or the form in the correct way.
<form name="lostpasswordform" id="lostpasswordform" action="http://localhost/~user/wp-core/wp-login.php?action=lostpassword" method="post">
<input type="hidden" name="redirect_to" value="">
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="">
// Remove this:
<div class="password-link">Log in</div>
</p>
</form>
Make sure you want to remove that element or clean the content of it
$('.password-link').empty() will return:
<div class="password-link"></div>
while $('.password-link').remove() will remove/delete that element .password-link
You can try this way
$('#lostpasswordform input#wp-submit').on("click", function(){
var $passwordlink = $(".password-link");
$passwordlink.empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="lostpasswordform" id="lostpasswordform" action="http://localhost/~user/wp-core/wp-login.php?action=lostpassword" method="post">
<input type="hidden" name="redirect_to" value="">
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="">
// Remove this:
<div class="password-link">Log in</div>
</p>
</form>
.empty() removes the child nodes and content. So the div you want to remove should be wrapped around another div and you can call the .empty() method on that parent div.
I have a form where I would like to hide the submit button unless the input is focussed/selected.
There is only one input apart from the submit.
I need to do this using pure JS (or perhaps CSS/Sass), not jQuery etc.
Basic example:
<form>
<input type="text" placeholder="Example field">
<input type="submit value="Submit">
</form>
First get references to your objects, so change the HTML for example :
<form>
<input id="input_1" type="text" placeholder="Example field">
<input id="submit" type="submit" value="Submit" />
</form>
With some CSS we will hide the submit by default:
#submit{
display:none;
}
We have added Id's, now we add the event listeners for focus on input..
document.getElementById("input_1").addEventListener('focus', function(){
document.getElementById("submit").style.display = 'block';
}
, true);
The second param into the eventListener will execute when the event is fired..
You will need to do more work on this..
https://jsfiddle.net/7uzkzr67/
Here is the pure CSS solution;
.showonfocus{
display:none;
}
.inputfield:focus + .showonfocus{
display:inline;
}
<form>
<input type="text" placeholder="Example field" class="inputfield">
<input type="submit" value="Submit" class="showonfocus">
</form>
You can use the onblur and onfocus events to manipulate your html elements. You can try something like,
HTML
<form>
<input type="text" placeholder="Example field" onblur="setVisible('hidden');" onfocus="setVisible('visible');">
<input id="submit" type="submit" value="Submit" style="visibility:hidden">
</form>
Javscript
function setVisible(state) {
document.getElementById("submit").style.visibility = state;
}
Here is the working DEMO: https://jsfiddle.net/qbotxpL6/
Hope this helps!
<div id="file">
<input type="file" name="txtImage[]" class="upload" />
<input type="text" name="txtImageDesc[]" class="desc" />
</div>
<input type="button" value="Add" name="addButton" id="addButton" />
<input type="button" value="Remove" name="removeButton" id="removeButton" />
This is my html div i need to add and remove on button click and here is my jquery code
<script type='text/javascript'>
$('#addButton').click(function(){
$('.upload:last').clone().appendTo('#file');
$('.desc:last').clone().appendTo('#file');
});
$('#removeButton').click(function(){
$('.upload:last').clone().remove('#file');
$('.desc:last').clone().remove('#file');
});
</script>
Problem is The On add button, it works perfectly but on remove button, it does not.
I need to remove the cloned div when i click on remove button.
I think your remove code should be like this:
$('#removeButton').click(function(){
$('#file > .upload:last').remove();
$('#file > .desc:last').remove();
});
Try this:
$('#removeButton').click(function(){
$('.upload:last').remove();
$('.desc:last').remove();
});
You can also use this,
$('#removeButton').click(function(){
$('#file').css('display','none');
});
I want to trigger an event with a button that changes the visibility of a set of elements (inputs of type text and button) from hidden to visible. Now everytime I click on the triggering button, I want a new set of the same elements to appear on a new line. How can that be done? Here is a snippet of the code:
<script type="text/javascript">
function generatenew()
{
document.add.property1.style.visibility="visible";
document.add.button2.style.visibility="visible";
document.add.button3.style.visibility="visible";
document.add.button4.style.visibility="visible";
}
</script>
</head>
<body>
<form name='add' method="post" action="">
<div id="div"></div>
<input type="button" value="+Add" onclick="generatenew();">
<input type="button" value="Edit" name="button2" style="visibility:hidden">
<input type="text" style="visibility:hidden" size="50" name="property1" placeholder="<street> <city> <ZIP> <country> <lockunitID>">
<input type="button" style="visibility:hidden" name="button3" value="open main door">
<input type="button" style="visibility:hidden" name="button4" value="open apartment door">
<div id="abc"><input type="button" value="save"></div>
If I well understood your question, all you have to do is putting a function that is triggered by an onClick event, (element.onClick=function();) You put all your input type tags in the function, and then you end your function bay calling appendChild method so that each click triggers the display of your elements.
I want to display the content of a label in a text fieldwith onClick event how can I do it,
Is there any specific method to do it or is there any other way.
Please help I am new to ajax.
Thanks
NO need of ajax for this you can do this by using jquery instead simply
In html:
<input type="text" name="txt1" value="" id="txt"/>
<label for="checking" id="label">checking</label>
<input type="submit" name="submit" value="Click" id="butt" />
In Javascript:
$("#butt").click(function(){
var lab_val = $("#label").text();
document.getElementByID("txt").value =lab_val;
// or $("#txt").val(lab_val);
});