I'm trying to show forms based on the button clicked. That is, on clicking the first button, two other buttons are displayed. However, the new buttons generated behave like dummy buttons (onClick event not working).
How can I resolve this error? Is there any alternative for this to implement the same functionality?
I have the following code:
<html>
<head>
<title>Frequently Asked Questions</title>
<link rel="stylesheet" type="text/css" href="CSSfiles/faqCSS.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script >
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
</script>
</head>
<body>
<p>Put banner and logo on top; Put footer later </p>
<div class="intro">
Looking for help? We provide you information about what can be done when in trouble. Hope you find it helpful!
</div>
<form name="myForm" class="select">
<input type="button" value="ND" class="select-button" onClick="addContent('myDiv', document.myForm1.ND.value);"><br>
<input type="button" value="E" class="select-button" onClick="addContent('myDiv', document.myForm1.E.value);">
</form>
<form name="myForm1" class="select">
<textarea name="ND">
<input type="button" value="Earthquakes" class="trial" onclick="addContent('yourDiv', document.myForm2.HW.value);"/><br>
</textarea>
<textarea name="E"><u>E</u></textarea>
</form>
<form name="myForm2" class="select">
<textarea name="HW">
<u>Hello world!</u>
</textarea>
</form>
<br><br>
<div id="myDiv"></div>
<div id="yourDiv"></div>
</body>
</html>
It is not clear to me how you add the buttons to your DOM (could you post that code?).
However, say that your button has an id of 'MyButton1',
<button id="MyButton1">Hello</button>
then if you do this with jQuery, your code needs to have it delegate the click, by hooking an object that is already existing and will contain your button; for example the body element:
// This is registered before MyButton1 is created.
$('body').on('click', '#MyButton1', function(event) {
alert("Hello, I'm button 1");
}
Using plain javascript, after you have created the new content (so that getElementById can find the button), you need to bind the onclick event:
document.getElementById('MyButton1').onclick = function() {
alert("Hello again");
}
or (not supported on older IEs)
document.getElementById('MyButton1').addEventListener("click",
function() {
alert("Still me");
});
Here you can find a Javascript fiddle with code re: the javascript method.
Initially keep all forms hidden. Put them in the desired division. Onclick of each button only show/hide intended form..
This can help you out.
Related
This question already has answers here:
How is the default submit button on an HTML form determined?
(15 answers)
Closed 1 year ago.
I'm currently trying to make a program in which you enter a link into an HTML form and when you click a button it sends you to that link. However, when I click the button the page just clears the form. I'm a Python native and a newbie to HTML/JS so the way I'm structuring my code may be why:
<form>
<input type="url" id="link" placeholder="Enter link of website:" required>
<br>
<button class="outline" id="open">Create gate</button>
</form>
<script type="text/javascript">
document.getElementById("open").onclick = () =>
location.assign(String(document.getElementById("link").value));
</script> </form>
Since, you are using a form. Your Button
<button class="outline" id="open">Create gate</button>
is acting as the form submit button and hence it refreshes the page before executing the location.assign() method. There are many ways to fix this.
One simple way is to exclusively tell the browser that this button is not the submit button, we can do that by using type="button" attribute in our button.
Create gate
You can use e.preventDefault() on your form submit to stop refreshing of the page.
Try the below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Location Object</title>
</head>
<body>
<form>
<input type="url" id="link" placeholder="Enter link of website:" required>
<br>
<button class="outline" id="open">Create gate</button>
</form>
<script type="text/javascript">
document.getElementById("open").addEventListener('click', (e) => {
e.preventDefault();
location.assign(String(document.getElementById("link").value));
});
</script>
</form>
</body>
</html>
Your code, exactly as provided, pasted into a minimal HTML5 boilerplate template, works in the Textastic code editor and in Safari running on localhost.
Perhaps some other JavaScript in the vicinity of your event listener is breaking the arrow function. Maybe bracketing the one function statement could help?
Very new to Javascript. I would like to pass a timestamp to a form when the user clicks a button, but I'm having trouble with getting the actual value to submit.
<html>
<head>
<script type="text/javascript">
var dateOfUser = new Date();
document.getElementById("userdate").value = dateOfUser;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
// hide the content from user until they click the button
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#ans").show();
});
});
</script>
</head>
<body>
<p>
Click the button to see the text.
</p>
<p><button type="button" id="show" onclick="userdate = new Date()">Show text</button></p>
<div id="ans" style="display:none">
<input type="hidden" id="userdate" name="timestamp" value="dateOfUser">
Here is the hidden text.
</div>
</body>
I've omitted the form submission code - unfortunately I did not write it and I don't have access to the code beyond using it for form submission.
But upon submission, the .csv file contains:
"timestamp":"dateOfUser"
And not the value of "userdate". As far as I understand, using document.getElementById("userdate").value = dateOfUser; should allow me to use "userdate" in the HTML.
Any help would be appreciated, I've poured over many similar questions on this site and others, but I am having trouble figuring out what I'm doing wrong.
you can remove the type="hidden" to test. At least it works for me using userdate.value.
<html>
<head>
</head>
<body>
<p>
Click the button to see the text.
</p>
<p><button type="button" id="show">Show text</button></p>
<div id="ans" style="display:none">
<input id="userdate" name="timestamp" value="dateOfUser">
Here is the hidden text.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
// hide the content from user until they click the button
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#ans").show();
$("#userdate")[0].value = new Date()
});
});
</script>
</body>
The way you put script above the body
<script type="text/javascript">
var dateOfUser = new Date();
document.getElementById("userdate").value = dateOfUser;
</script>
wouldn't work because the dom(i.e. the elements) has not loaded. While onclick and $(document).ready are different from the above way.
However, it's still better for you to put script at the bottom of body.
I am building a chrome/firefox web extension. When the user clicks the button in the extension's popup, the extension's UI changes.
Here's a visual example:
Before pressing one of three buttons:
After pressing one of three buttons:
As you can see from the screenshot, after pressing the button, a textarea is created.
Here is the code that does that (this function is called when one of the three original buttons is pressed):
function createSummaryBox(summary) {
console.log("Setting textarea content to: " + summary)
window.location.href = "../summary_page/summary_page.html";
document.getElementById('summary-field').value = summary;
}
However, even when this function is called, the content inside of the textarea does not change.
Instead, I get the following error:
TypeError: document.getElementById(...) is null
Here is the code for "summary_page.html":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../common/common_styles.css" />
<link rel="stylesheet" href="summary_page.css" />
</head>
<body>
<div class = container>
<textarea class="summary-field" type="text" disabled="disabled" id = "summary-field"></textarea>
<div class="btn-group">
<button class="btn">Back</button>
<button class="btn">Copy</button>
<button class="btn">Enlarge</button>
<script src="summary_page.js"></script>
</div>
</div>
</body>
</html>
Also, the sole content of "summary_page.js" is console.log("Summary Page Loaded);, which is printed out to the console.
How do I fix this?
Been trying to find some solution but I wasn't able to. I need to get a button to fire two events on one click. This code worked for firefox but it doesn't on Chrome:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
<script type="text/javascript">
function changeLocation (){
window.location = "https://www.bing.com";
}
</script>
</head>
<body>
<form action="https://www.google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
I'm trying to redirect users to a new page in new tab and redirect the main page (old one) after the button has been clicked.
Is there any solution which would also work on Chrome?
Would really appreciate any kind of help!
function changeLocation() {
document.getElementById("form").submit();
window.open("https://www.bing.com","_blank");
}
<form id="form" action="https://www.google.com">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
This will help you. By the way you need to use the name attribute in the input tag to submit the data.
Hello Stackoverflow people!
I'm making a mobile website using the latest jquery mobile (1.2.0). I have a form and I want the submit button change text/value on click. I have a code that works in a empty html page:
<body>
<form method="get" action="/show.php?" target="showframe">
<select name="week">
<option value="1">Week</option>
</select>
<select name="id">
<option value="1">ID</option>
</select>
<input type="hidden" name="type" value="2">
<input type="submit" value="Load" id="show" onclick="javascript:document.getElementById('show').value='Refresh'">
</form>
<iframe id="showframe" width="100%" height="1000px" frameborder="0" scrolling="no" sandbox="allow-forms"></iframe>
<body>
But when I copy and past the submut button in my jquery page it wont change value..
My question is: how do i get this to work in jquery mobile? what is an alternative?
Thanks in advance
EDIT:
I have tried jivings answer and this is it:
<html>
<head>
<title>Infoweb Mobiel - Dominicus College</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/style.js"></script>
<script>
$("#show").click(function () {
$(this).val('Refresh');
});
</script>
</head>
<body>
<form method="get" action="/show.php?" target="showframe">
<select name="week">
<option value="1">Week</option>
</select>
<select name="id">
<option value="1">ID</option>
</select>
<input type="hidden" name="type" value="2">
<input type="submit" value="Load" id="show" $("#show").button("refresh");>
</form>
<iframe id="showframe" width="100%" height="1000px" frameborder="0" scrolling="no" sandbox="allow-forms"></iframe>
<body>
but it doesnt work.. i think im doing something wrong. where and how do i have to place $("#show").button("refresh"); ?
This is because the text that you're seeing isn't actually part of the button element. JQuery Mobile pads the button out with it's own elements to create the style you see. If you want it to refresh these elements when you make a change then you need to call the refresh() method on the button:
$("#show").button("refresh");
Also, since this is jQuery, you should be using handlers properly. You onclick should be with the rest of the JavaScript logic, either in the head or in an external file and look like this:
$("#show").click(function() {
$(this).val('Refresh');
});
First you need to understand few things about the jQuery Mobile:
What you did in your EDIT part was wrong, you cant use $("#show").button("refresh") in a HTML block. Java script can not be mixed with a HTML like that.
This is an example how this should work: http://jsfiddle.net/Gajotres/K8nMX/.
Code:
$('#index').live('pagebeforeshow',function(e,data){
$(document).on('click', '#show', function(){
$('#show').attr('value','Show');
$('#show').button("refresh");
$('#custom-form').submit();
});
});
In the case of my example index is an id of my jQuery Mobile page. Pagebeforeshow is an event that will be triggered before the page can be shown:
$('#index').live('pagebeforeshow',function(e,data){
Your button type was changed to button. Reason is, you cant change button text (or anything else) while form is submitting it data to php server:
<input type="button" value="Load" id="show">
That is why we are binding a click event to the button in this line :
$(document).on('click', '#show', function(){
Next line, we are changing the button text:
<input type="button" value="Load" id="show">
Because this is a jQuery Mobile styled button we need to refresh him so the new style can be applied:
$('#show').button("refresh");
Finally we are triggering form submit:
$('#show').button("refresh");
Before you continue please read this article: http://jquerymobile.com/test/docs/api/events.html. There you will find everything you need to know about jQuery Mobile page events.
Also read this article about anatomy of jQuery Mobile page: http://jquerymobile.com/test/docs/pages/page-anatomy.html
As you are new to this page take a look at this article, it will help you get a better response in the future. I hope this was an answer to your question. Feel free to leave a comment if you have more questions.