I'm testing out using a normal HTML drop-down menu, and I've encountered a problem when it comes to the submit button of this...
The following is my code:
<head>
<script>
function submitButton()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").innerHTML=mylist.options[mylist.selectedIndex].text;
}
</script>
</head>
<body>
<form>
<select id="myList">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<button onclick= 'submitButton()'> Submit </button>
<p>You chose: <span id= 'favorite'> </span></p>
</form>
</body>
Now when I run this code through Live in Adobe Dreamweaver, it works exactly how I want it to; when I choose something from my drop-down menu and press the submit button, the specific letter turns up after 'You chose:'.
However, when I run it in Google Chrome and Safari, it turns out different. When I choose from the drop-down and press 'Submit', the letter appears in its spot for a split second, then the page seems to automatically refresh, leaving the drop-down at its original value, and the <span> blank. Does anyone know why, and how I can solve this from happening?
By default a <button> in a form will submit the form loading the action url of the form or the same page if it doesn't have one.
Just change the button type to button which will prevent it from submitting the form.
<button type="button" onclick= 'submitButton()'> Submit </button>
you could try this also
<head>
<script>
function submitButton()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").innerHTML=mylist.options[mylist.selectedIndex].text;
}
</script>
</head>
<body>
<form>
<select id="myList">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<input type="button" onclick= 'submitButton()' value="Submit" />
<p>You chose: <span id= 'favorite'> </span></p>
</form>
</body>
Related
I've been through 2 web-related classes with similar projects in popup using html and javascript, but the problem is that the popup either won't show at all or showing for half a second and immediately closing on itself. I can't post the whole code, but here's the rough block of code (I put the script at the very bottom of the file, outside the html tag):
<script type="text/javascript">
var popup = document.getElementById('popup');
var btn = document.getElementById('btn_popup');
var close = document.getElementById('close');
btn.onclick = function(){
popup.style.display = "block";
}
close.onclick = function(){
popup.style.display = "none";
}
</script>
<html>
<body>
<div id="titleBar">
<h2>Title</h2>
<div>
<form action="page.php" method="get">
<input type="text" name="item"> by
<select name="search">
<option value="v1">Value 1</option>
<option value="v2">Value 2</option>
<option value="v3">Value 3</option>
</select>
<input type="submit" value="SEARCH">
<button id="btn_popup">Popup Button</button>
</form>
</div>
</div>
<div id="popup">
<div id="popup_content">
<header>
<span id="close">X</span>
<p>Popup Form</p><br>
</header>
<article>
<div>
<form method="POST" action="page.php">
<input type="text" name="n1" placeholder="N1">
<input type="text" name="n2" placeholder="N2">
<input type="text" name="n3" placeholder="N3">
<input type="text" name="n4" placeholder="N4"><br>
<select name="list">
<option value="">Select One</option>
<?php
//code to generate options
?>
</select><br>
<input type="submit" value="Click">
</form>
</div>
</article>
</div>
</div>
</body>
</html>
I copied these parts of code from other pages, but they no longer work on this page but they work on the previous page without any problems. I also use PHP to generate the dropdown list in the popup form. In the previous page, the popup shows like it should be, but in this page the popup only shows for like half a second and closes by itself.
Is there any fix to this? Or at least any clues on the problem? And please don't recommend me to use framework (other than w3, but not w3 modals) to fix this. I'm using the latest Google Chrome to view these files, already tried with Mozilla as well but gives the same result.
The problem is that this:
<form action="page.php" method="get">
causes a load of page.php when you click the button.
The reason for this is that the default "type" of a button tag is "submit".
Just add type="button":
<button type="button" id="btn_popup">Popup Button</button>
but the problem is that the popup either won't show at all or showing for half a second and immediately closing on itself.
This is because the form is getting submitted once u clicked on popup button.
Keep your popup button outside of the form, otherwise you have to handle prevent events.
<form>
//your code
</form>
<button id="btn_popup">Popup Button</button>
I created a fiddle, please check it once
https://jsfiddle.net/ponrajpaul/42g9bk3c/
I have simple HTML form with submit button. After hitting this button I would like to the see div#my_id which is not visible before.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
How can I make it work?
Is your HTML contained within the <form> tag? It is likely that your submit button is submitting the form and causing a page refresh before the JavaScript is executed.
If this is the case, try changing the input type to button to see the effect.
For example:
#my_id {
display: none;
}
<form>
<input type="button" name="xxx" value=" Show Text! " onclick="document.getElementById('my_id').style.display = 'block' ;" />
<div id="my_id"> My text </div>
</form>
It should work.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
Are you sure not any other HTML is 'ruining' your code? I have tested this on Firefox, Chrome and IE (all latest versions tho)
Your submit button will submit the form it is placed in using the defined action and method. Any arguments / fileds in the form will be included as query parameters.
The reason you are not seeing your div appear, is because the click results in the page being reloaded. After the reload the div will be hidden again.
I want to add a multiselect widget to a form that is set with some values. And when the user clicks on a button, the values inside the multiselect widget changes.
When I do this the form crashes.
This is a sample code for the issue:
<script type="text/javascript" >
function test(){
var msObj = dijit.byId('ms1');
msObj.set('label', ['val1', 'val2']);
}
</script>
</head>
<body class="claro">
<h2>Multiselect Test</h2>
<h3>Click on test button to see new data loaded in the multiselect widget</h3>
<div data-dojo-type="dijit/form/Form" enctype="multipart/form-data"
action="" method="POST">
<div data-dojo-type="dojox/layout/TableContainer"
data-dojo-props="cols:1">
<select id="ms1" data-dojo-type="dijit/form/MultiSelect"
title="MultiSelect123:" name="multi_select">
<option value="English 123">English 123</option>
<option value="1234.56">1234.56</option>
</select>
</div>
<br>
<button onclick="test()">test</button>
</body>
The reason for the crash is because on clicking the button the form gets submitted.
To avoid submitting the form we need to return false value in the button click function. i.e
<button onclick="test(); return false;">test</button>
Also the Multiselect Dojo widget is not associated with a data store/object. As per the documentation it is just a wrapper over the SELECT HTML element.
As a result you need to use the basic HTML/JS code to add and remove the OPTIONS for the widget.
Check the jsfiddle for a working example.
I have a form using the jqtransform jQuery plugin that gives forms an aesthetic makeover. However, I can't get my onclick events to fire.
I have a form setup similar to this:
<select name="person">
<option value="1">Yes</option>
<option value="2">No</option>
<option class="maybe" value="0">Maybe</option>
</select>
I also have a hidden div container which expands the form:
<div class="expander" style="display:none;">
More info <input type="text" name="moreinfo" />
</div>
Then the final piece of the puzzle:
<script>
$(".maybe").click(function () {
$(".expander").show("slow");
});
</script>
Any help would be greatly appreciated.
try using the change event instead of click.
http://api.jquery.com/change
here's a working example: http://jsfiddle.net/dwick/Sh4PA/
This is a dirty workaround, but works for me...
change the type of your input field to reset, then add an onclick event handler
<input type='reset' value='submit' onclick='$(#myFormId).submit()' />
I need to use form fields in an English/Amino Acid Code translater. The code below is simplified to show the problem I'm having. I want to change some text with a javascript function.
If I use an input of type: button with onclick it works.
A submit button with onsubmit in a form changes the text for a split second, then it changes back. I need to use a form for my translation program so how can I make it work?
Extra Credit: Why does it change for a split second with onsubmit?
<html>
<head>
<script type="text/javascript">
function changeTo(text){
document.getElementById("p1").innerHTML=text;
}
</script>
</head>
<body>
<h1 style="text-align:center;">Change text in an element</h1>
<!--
<form onsubmit="changeTo('Hello World');">
<input type="submit" />
</form>
-->
<input type="button" onclick="changeTo('Hello World');" />
<p id="p1">text</p>
</body>
</html>
It's changing it back because the form is submitting. It posts to the same page, and if you are on a local machine it might be so quick you don't notice. Try:
<form onsubmit="changeTo('Hello World');return false;">
<input type="submit" />
</form>
Return false at the end there will stop the submission process.