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>
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.
Im calling a function from onclick of a button. When i press the button it executes my function deletes everything from the screen and displays the button inside my function. Everything works ok but why does it delete everything from screen. How to make it for it to only run the function but keep previous html elements prior to clicking the function?
<div id="form-container">
<form id="dim_form" action="">
<div class="bg">
<label class="form-label-a" for="dimm">Dimension</label>
<input id="dimm" type="text" />
</div>
<div class="bg">
<label class="form-label-b" for="dimm_upper">Upper tolerance</label>
<input id="dimm_upper" type="text" required />
</div>
<div class="bg">
<label class="form-label-c" for="dimm_lower">Lower tolerence</label>
<input id="dimm_lower" type="text" required />
</div>
<div class="bg">
<input class="form-button" type="submit" onclick="data_table();" value="Calculate" />
</div>
</form>
</div>
data_table()
document.write("<input class='download' type='button' id='button-a' value='download xls' />");
I tried with "button" instead of submit. return false, basically everything i found on google and nothing works for me.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
When this method is not used for testing, it is often used to write some text to an output stream opened by the document.open() method. See "More Examples" below
see the full documentation here: https://www.w3schools.com/jsref/met_doc_write.asp
if you want to add some nodes without cleaning the whole HTML try append
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
document.write will erase everything you had earlier. Instead use append.
function data_table() {
const input = document.createElement('input');
input.type = "submit";
input.id = "button-a";
input.value = "download xls";
document.querySelector('.bg').appendChild(input);
}
<div class="bg">
<input class="form-button" type="submit" onclick="data_table();" value="Calculate" />
</div>
Document is referred to the entire html page when you are trying to do document.write it will write on the entire page....
There can be couple of work arounds but i will suggest this one
Give class to the element you want to add element to.
Get element by the class you assign to the element in first step
var x = document.getElementsByClassName("example");
if you want to keep whats already there
x.appendChild("whatever you want to add goes here");
if you want to add only new element and discard everything previously present
x.innerHtml="whatever you want to add goes here";
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 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.