I have this script
$('#addDescriptionButtonId').click(function(){
alert ('ee');
});
and this button
<button id="addDescriptionButtonId" class="btn btn-primary" type="submit">Add Description</button>
expecting the alert when I click, but nothing happens when I click
Make sure your script is either running in $(document).ready() or is at the end of your <body>.
Need to add jQuery library
$('#addDescriptionButtonId').click(function(){
alert ('ee');
$('#productFormId').attr('method', 'post');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addDescriptionButtonId" class="btn btn-primary" type="submit">Add Description</button>
Well, If your expecting not to add any JQuery library and want the alert to work on button click then you might want to use native JS click events on button as shown below.
Javascript:
var element = document.getElementById('addDescriptionButtonId');
element.onclick = myFunction;
function myFunction() {
alert("ee");
}
HTML:
<button id="addDescriptionButtonId" class="btn btn-primary" type="submit">Add Description</button>
Hope this helps you.
Related
First time here ...
Im a beginner in JS .
I want to display an input only when another input has a disabled attribute:
<button type="button" id="Last"> Last </button>
<button type="button" id="Go" style="display:none"> Go </button>
after few click, and using jQuery, $("#Last").attr("disabled", "disabled"), I get (using the inspect tool) :
<button type="button" id="last" disabled="disabled"> Last </button>
I want to display this:
<button type="button" id="Go" style="display:block"> Go </button>
I tried this:
$( document ).ready(function() {
if($("#Last").prop('disabled', true)) {
$('#Go').show();
} else {
$('#Go').hide();
}
});
I doesn't work! Dont know where is the problem!
You should show the button when the button is clicked. See the commented code below.
// When button is clicked
$("#last").on("click", function() {
// Set button disabled to true
$(this).prop("disabled", true);
// Show the #go button
$("#go").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="last"> Last </button>
<button type="button" id="go" style="display:none"> Go </button>
I have changed to ids to all lowercase. That is a good coding convention.
as describe in the doc at this link http://api.jquery.com/prop/ the method prop(name, xxx) set the property name to the value xxx, o in your code the if statement is disabling the button last. You should use:if($("#Last").prop('disabled'))
$('#Go').show();
Be carefull that if you place this piece of code in $( document ).ready it only run once the page DOM is ready for JavaScript code to execute.
I need a function on a button only if a bool conditional is met. Currently I have it implemented similar to
<button class="btn btn--primary pull-right" type="submit" data-bind="click: myBoolFlag ? $root.myFunction : function(){}"/>
I am using this button as my generic submit button on multiple pages, but on two of them it merely needs to add in a small function on click ontop of its normal submit functionality.
I feel as though doing this via an anonymous empty function isn't the best route, and am looking for cleaner alternatives.
In this situation I usually do something like so..
HTML
<!-- I gave it an ID to make it unique -->
<button id="myButton" class="btn btn--primary pull-right" type="submit"/>
JavaSCript/jQuery
//this handles the click function now
$('#myButton').click(function() {
if(condiion1){
do this;
} else {
do that;
}
});
Try returning true if you don't want to a function to be executed on click
<button class="btn btn--primary pull-right" type="submit" data-bind="click: myBoolFlag ? $root.myFunction : return true;"/>
Other option would be null
data-bind="click: myBoolFlag ? $root.myFunction : null"
I'm trying to add a duplicate function to clone and append a div. Here's the JS:
function NL(){
var original = document.getElementsByClassName('form-block')[0];
var clone=original.cloneNode(true);
document.getElementsByTagName('form')[0].appendChild(clone);
}
document.getElementsByClassName('new-line')[0].addEventListener('click',NL);
and the HTML:
<form class='myform'>
<div class='form-block'>
<span class='line'>1</span>
<button class='new-line'>New Line</button>
<button class='new-nested'>New Nested Line</button>
<input class='input' type='text' placeholder='Enter Value...'>
<button class='new-input'>Add input</button>
</div>
</form>
CodePen Link
The idea is when you click the "New Line" button, a new 'form-block' is cloned and appended under the first one. But if you click on the "New Line" button now, the new block shows up briefly and then disappears. I can't figure out why.
I can't modify anything in the HTML, and I can only use vanilla JS.
Thanks!
button default type is submit. When there is no type specified it will act as a submit button & in your case it is trying to make a post call. You can open the developers console and check the network tab. In order to prevent that use
preventDefault()
function NL(event){
event.preventDefault() // Here is the change
var original = document.getElementsByClassName('form-block')[0];
var clone=original.cloneNode(true);
document.getElementsByTagName('form')[0].appendChild(clone);
}
document.getElementsByClassName('new-line')[0].addEventListener('click',NL);
DEMO
Just use type="button"
<button type="button" class='new-line'>New Line</button>
<button type="button" class='new-nested'>New Nested Line</button>
I have a button tag that is referring to a link given as below
<button onclick="window.location='example.com'" formtarget="_blank"></button>
but its opening in the same tab what's the problem
formtarget only work for form,
if you want for link, You can try this
<button onclick="window.open('https://www.google.com', '_blank');">BUTTON TEST</button>
JsFiddle
You can use either
<input type="button" onclick="window.open('https://www.google.com')" />
or
<button onclick="window.open('https://www.google.com');">BUTTON TEST</button>
Can someone tell me why this is not working:
<button class="btn danger" id="delete" onclick="return $(location).attr('href','http://yahoo.com');">Delete</button>
I have this placed in a form just beside the submit button. When it's clicked, it's like I clicked the submit button.
If you're trying to make the button load that URL, the correct way to do it is:
<button class="btn danger" id="delete" onclick="document.location.href = 'http://yahoo.com'">
I don't think wrapping it in jQuery helps much here since location isn't a DOM object.
Use the window.location property. See comment below.