Hello gentlemen and ladies. I'm trying to test the button to see if it binds to event but it's not working. I have been at this for hours and couldn't find the answer.I'm looking for code that separates the HTML and javsScript. I'm new and I really appreciate your time. I can't get the alert to work when I click button.
var formId;
formId = document.GetElementById("button");
function run(){
alert("Stack overflow");
}
formId.addEventListener("submit", run, false);
<div id ="content">
<div id ="title">Special Offers</div>
<div id="colors">Sign-up to receive personalized offers!
</div>
<fieldset>
<legend> Please enter your information</legend>
<form action="#" method="post" />
<input type="text" />
<label for ="button">add</label>
</form>
</fieldset>
<!--**************Button******-->
<button type="submit" id="button">submit</button>
</div>
Try ...
var formId = document.getElementById("button");
function run(){
alert("Stack overflow");
}
formId.addEventListener("click", run, false);
Where I am using .getElementById (spelling) and the click event on the Listener.
Fiddle: http://jsfiddle.net/rfornal/9duqfgL6/
You could use the following code:
<div id ="content">
<div id ="title">Special Offers
</div>
<div id="colors">Sign-up to receive personalize offers!
</div>
<button type="submit" id="button" onclick="run()">submit</button>
</div>
and your JS should be as follows:
function run(){
alert("stack overflow");
}
Your form tag was self closing. It should be getElementById. Try the click event instead of the submit event.
Your button is outside the form. When you have your button inside it, you can add the submit event listener to your form.
var formId = document.getElementById("button");
function run(){
alert("Stack Overflow");
}
formId.addEventListener("click", run, false);
<div id ="content">
<div id ="title">Special Offers</div>
<div id="colors">Sign-up to receive personalized offers!</div>
<fieldset>
<legend> Please enter your information</legend>
<form action="#" method="post">
<input type="text"/>
<label for="button">add</label>
<button type="submit" id="button">submit</button>
</form>
</fieldset>
</div>
Related
So I have a submit form and want an alarm that pops up after the user send the form.
Heres the part of code that's not working for me
HTML
<div class="col-md-12">
<input onclick="formSuc" type="submit" class="btn btn-box" value="ABSENDEN">
</div>
<script>
function formSuc(){
alarm("test");
}
</script>
Use parenthesis when calling a function:
<div class="col-md-12">
<input onclick="formSuc()" type="submit" class="btn btn-box" value="ABSENDEN">
</div>
<script>
function formSuc() {
alert("test");
}
</script>
I will explain my problem: I have a form and I want to click on submit to display a div (in the same page) and run a java script function without refreshing the page
<form action="#" method="post" name= "form1" id = "form1">
<div class="row_ligne">
<div class="col-25">
<label for="fname">Fréquence </label>
</div>
<div class="col-75">
<select id="frequence" name="frequence" onchange="showDiv(this)">
<option value="yearly">Annuelle</option>
<option value="monthly">Mensuelle</option>
<option value="daily">Quotidienne</option>
</select>
</div>
</div>
<div class="row_ligne">
<div class="col-50">
<input type="submit" id="Backtest" value ="Backtest" name =
"Backtest" onclick ="open_div_res(),openOnglet(event, 'repartition');" >
</div>
</div>
</form>
<div class="tab_back" id ="id_div_res" style="display:none;">
<button class="tablinks"
onclick="openOnglet(event,'repartition')">Result</button> </div>
<script>
function open_div_res(){
document.getElementById("id_div_res").style.display = "block";
document.getElementById('id_div_res').scrollIntoView();
}
</script>
Add type="button" to the button, you don't do this it will trigger a submit.
<button type="button" class="tablinks"
onclick="openOnglet(event,'repartition')">Result</button>
If you mean by clicking this:
<input type="submit" id="Backtest" value ="Backtest" name =
"Backtest" onclick ="open_div_res(),openOnglet(event, 'repartition');" >
You have to change that into a button also
If I do understand this correctly, you want to NOT refresh the page when you click on submit.
Add a listener on your submit button, and, using jQuery
$("#mySubmitButton").on("click", function(event){
event.preventDefault();
// show the div code
$("#myDiv").show();
});
Or, vanilla javascript :
document.getElementById('mySubmitButton').addEventListener('click', function(e){
e.preventDefault();
document.getElementById('myDiv').classList.add('isVisible');
});
this should do the trick !
Try this:
<form action="#" method="post" name= "form1" id = "form1" onSubmit="return false;">
//Code here
</form>
Am new to javascript i foud this one in w3schools.com - Entering pincode in search box will show in <p> tag !! How to do ? any help appreciated. Thanks in advance
HTML :
<form class="form1" role="search" method="get" action="search-pincode.html">
<input class="pincode1" type="number" placeholder="Enter Postcode" id="user-pincode">
<button class="submit" type="submit" formaction="search-pincode.html" onclick="myFunction()">Check</button>
</form>
JS SCRIPT :
<script>
function myFunction() {
var x = document.getElementById("user-pincode").value;
document.getElementById("user-pincode-show").innerHTML = x;
}
</script>
OUTPUT : search-pincode.html
<h1 class="search-h1-contact">
Yes, we install CCTV in <p id="user-pincode-show"></p>
</h1>
For one, you will not see the result long enough because after clicking the button, you are being redirected to search-pincode.html. Try changing type="submit" to type="button"
function myFunction() {
var x = document.getElementById("user-pincode").value;
document.getElementById("user-pincode-show").innerHTML = x;
}
<form class="form1" role="search" method="get" action="search-pincode.html">
<input type="number" placeholder="Enter Postcode" id="user-pincode">
<button type="button" onclick="myFunction()">Check</button>
</form>
<h1 class="search-h1-contact">
Yes, we install CCTV in
<p id="user-pincode-show"></p>
</h1>
If what you are planning is to pass the value of the input to search-pincode.html, and user-pincode-show is inside it, then using JavaScript is not proper way to do it
If you want to avoid redirecting on form submition you can declare an event listener using EventTarget.addEventListener() to handle the click event and call e.preventDefault in the function handler..
Also notice that there is no need to add formaction="search-pincode.html" in the button element because the form has the attribute action="search-pincode.html"
And last thing: With in the h1 element you can better use a span element instead of p.
<h1>Yes, we install CCTV in <span id="user-pincode-show"></span></h1>
Code example:
document
.querySelector('button.submit')
.addEventListener('click', function (e) {
e.preventDefault();
var x = document.querySelector('#user-pincode');
document.querySelector('#user-pincode-show').innerHTML = x.value;
});
<form class="form1" role="search" method="get" action="search-pincode.html">
<input class="pincode1" type="number" placeholder="Enter Postcode" id="user-pincode">
<button class="submit" type="submit">Check</button>
</form>
<h1>Yes, we install CCTV in <span id="user-pincode-show"></span></h1>
function myFunction() {
var x = document.getElementById("user-pincode");
document.getElementById('user-pincode-show').innerHTML = x.value;
}
<form class="form1" role="search" method="get" action="search-pincode.html">
<input type="number" placeholder="Enter Postcode" id="user-pincode">
<button type="button" onclick="myFunction()">Check</button>
</form>
<h1 class="search-h1-contact">
Yes, we install CCTV in
<p id="user-pincode-show"></p></h1>
How do I keep my duplicated forms from disapearing whenever I press the "Duplicate Form" button? The duplicated form appears for about one second then instantly disapears, how do I prevent this?
Javascript
function myFunction() {
var elmnt = document.getElementById("formid");
var cln = elmnt.cloneNode(true);
document.body.appendChild(cln);
}
HTML
<form action="dilemman.php" method="post" class="copy" id="formid" enctype="multipart/form-data">
Video: <br>
<textarea type="text" rows="1" cols="40" name="videolank"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Lägg till fler svar</button>
</div>
<button onclick="myFunction()">Duplicate form</button>
</form>
form will submit by default ,to disable the default action use preventDefault()
<button onclick="myFunction(e)">Duplicate form</button>
function myFunction(e) {
e.preventDefault();
... rest of code
}
Try moving the cloning button outside of your form, I'm suspecting that it triggers the submit action because the button is part of your form.
Also remember to change the ID of any new forms, as duplicate IDs will break code. I suggest adding a counter and adding this to the ID of the form every time.
<form action="dilemman.php" method="post" class="copy" id="formid" enctype="multipart/form-data">
Video: <br>
<textarea type="text" rows="1" cols="40" name="videolank"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Lägg till fler svar</button>
</div>
</form>
<button onclick="myFunction()">Duplicate form</button>
and
var count = 0;
function myFunction() {
var elmnt = document.getElementById("formid");
var cln = elmnt.cloneNode(true);
cln.id = "formid"+(++count); //add 1 to count, then append
document.body.appendChild(cln);
}
I want show alertbox on click button but more of button the some ID attr and work click on first button but not working click on second button.
Jquery;
jQuery("#submit").click(function(e){
alert("message");
});
HTML; (Repeat html per message)
<div class="reply">
<form id="vivam" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button id="submit" class="btn btn-primary">Reply</button>
</p>
</form>
</div>
jsfiddle Link
What is the solution to this problem? Thank you in advance for answers.
Approach 1: IDs should be unique, use class instead of id.
HTML:
<div class="reply">
<form id="vivam" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button class="btn btn-primary submit">Reply</button>
</p>
</form>
</div>
JS:
jQuery(".submit").click(function(e){
alert("message");
});
Working Demo Approach 1
Approach 2: You can also use attribute value selector to target element with same id. However this breaks the rule ids should be unique.and i do not recommend you using this:
jQuery("[id=submit]").on('click',function(e){
e.preventDefault();
alert("test");
});
Working Demo Approach 2
ID Must be unique .
Handler get attached to the first element with the id only.
Use class instead of id .
Fiddle Demo
Change HTML
<button class="btn btn-primary submit">Reply</button>
// ^ add class submit and remove id submit
Make it
jQuery(".submitbuttons").click(function(e){
and then
<button id="submit" class="btn btn-primary submitbuttons">Reply</button>
and please give unique ids and I recommend to set the button-type attribute (button or submit)
You can use the on listener in JQuery. That way you listen on an class, and then do something with the id...
Here's an JSFiddle of the working code...
The HTML ( note that i've changed the ID's because ID's need to be unique, and add the class to the buttons ):
<div class="reply">
<form id="vivam_1" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button id="button_1" class="btn btn-primary submit">Reply</button>
</p>
</form>
</div>
<div class="reply">
<form id="vivam_2" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button id="button_2" class="btn btn-primary submit">Reply</button>
</p>
</form>
</div>
And the JQuery part:
$('body').on('click', '.submit', function () {
e.preventDefault();
alert("Clicked on button " + $(this).attr('id'));
});