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>
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'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 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.
I am new to JQuery and need suggestions on following requirement.
I have a form with a submit button as below. Page accepts locale as an input parameter. Depending on the value of locale, on page load I am populating the labels of the input fields in respective language using jQuery.i18n.properties.js plug-in, but I could not update the display value of the button.
Please suggest solution or if there is another way to achieve this.
HTML code:
<input type="submit" data-inline="true" id="submit" value="Submit"/>
Have tried below jQuery options to update the button label:
$("#submit").val($.i18n.prop('submit'));
$("#submit").html($.i18n.prop('submit'));
$("#submit").prop('value',($.i18n.prop('submit')));
$("#submit").text($.i18n.prop('submit'));
None of them worked. But I see the value gets updated as below in Developer tools window, for this button.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" id="submit" value="New Text">
</div>
Try $("#submit")[0].value = $.i18n.prop('submit');. Does that work for you?
(Even though it's a JS workaround, not a JQuery solution)
If your button is an input tag, use the jQuery val:
function changeBtnText() {
$("#submit").val("My new button text");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="submit" value="My button">
<button type="button" onclick="changeBtnText()">Change button text</button>
If your button is a button tag, use the jQuery text (or html):
function changeBtnText() {
$("#submit").text("My new button text");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="submit">My button</button>
<button type="button" onclick="changeBtnText()">Change button text</button>
Note: I recommend giving your button an ID different from "submit" to avoid confusion.
I'm having a hard time getting a submit button to open a link in a new window.
The button code:
<input type="button" name="buy" value="Buy" onClick="parent.location='myurl'" />
I tried to add a target="_blank" to the form, but that didn't help.
Is it possible to open a new window using this "parent.location" method or any equivalent.
I'm afraid my shopping cart script won't work any longer if I change the code too much.
Best regards,
Erik Chan
<form action="whatever" method="post" target="foo" onSubmit="window.open('', 'foo', 'width=1040,height=900,status=yes,resizable=yes,scrollbars=yes')">
This should work for your needs. I have used this time and time again
<input type="button" name="buy" value="Buy" onClick='window.open("http://www.abcd.com/")' />
see it for open function param
http://www.w3schools.com/jsref/met_win_open.asp
Try window.open() method.
<input type="button" name="buy" value="Buy" onclick="window.open('myurl')">