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.
Related
This question already has answers here:
Page reloads on hide/show button click using jQuery
(2 answers)
Closed 2 years ago.
I have been trying to make this very simple feature work where the user clicks the submit button and the question number is updated.
On the browser when I click the button the question number becomes "2" for a second and turns back to "1" immediately. There is no console warnings or errors.
I tried it on the JSFiddle as well and when the button is pressed it gave me a 404 error code.
Here is the very small script and HTML that I am trying to run and also the JSFiddle:
$(document).ready(() => {
var level = 1;
$('button').click(() => {
level++;
$("#question").text("Question " + level);
});
});
<h1 id="question">Question 1</h1>
<form>
<h3>What is your name?</h3>
<textarea type="text" name="answer" rows="3" cols="50"></textarea>
<br>
<button class="btn btn-outline-primary btn-lg" type="submit" name="submit">Submit</button>
</form>
Because the page is reloading when you submit the form.
The default submit action for a <form> is the current URL when not otherwise specified. And the default type for a <button> within a <form> is submit when not otherwise specified. Though in this case you are explicitly specifying type="submit". So essentially your markup is explicitly indicating that you want to reload the page when clicking the button.
Since you're not intending to post a form, you can simplify the HTML and remove the <form> elements and make the button no longer a submit button:
<h1 id="question">Question 1</h1>
<h3>What is your name?</h3>
<textarea type="text" name="answer" rows="3" cols="50"></textarea>
<br>
<button class="btn btn-outline-primary btn-lg" name="submit">Submit</button>
If for some other reason you want/need to keep the <form> (styling perhaps? though since it's not semantically a "form" then I'd recommend using something else, like a <div>) then you can at least specify type="button" to prevent default submit behavior:
<button class="btn btn-outline-primary btn-lg" type="button" name="submit">Submit</button>
The default type of button is submit even if you have not written but you also have specified it.
So what happens to your code :
Your function executes, we see the result and it reload as the type='submit' behaviour.
Make it type='button' not removing the type attribute.
And another thing i can see is you dont need to call $(document).ready() because it is not a function which is needed as the html loads.
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 have an input and two buttons, each of which are supposed to change the text within the input field. If I put the single line of code within onclick directly, it works perfectly. If I move the line to a separate function and attempt to call it via onclick, nothing happens, and I don't know why.
I've looked at many other SO questions about onclick, but none of them seemed to help with this. I'm stumped. JSFiddle is here: https://jsfiddle.net/wjw00h44/2/
Relevant code:
<div class="container">
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" id="noun-sentence" placeholder="Enter a sentence here">
</div>
<button type="button" class="btn btn-default" onclick="document.getElementById('noun-sentence').value = 'go away'">Check</button>
<button type="button" class="btn btn-default" id="noun-button" onclick="changeWords()">Check2</button>
</div>
<p id="test_p"></p>
</div>
<script>
function changeWords() {
document.getElementById('noun-sentence').value = 'go away';
return false;
}
</script>
In js fiddle, click on the settings gear icon in the javascript window and change how the script loads. Don't put it in either of the 'on' events, but either directly in the head or body elements. Then click 'run' and try again.
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.