i had an onclick event for a button and it worked fine. now it doesnt and im trying to see why not. it worked for a little bit and i think i changed something, but the code seems correct. i think there may be some outside factors influencing the code possibly.
here's my code:
<script language="javascript">
function search(){
document.write("hi");
}
</form>
<input type="button" value='s' name='submit' id='submit' onClick='search();'>
</form>
<div id='searchdrop'>
stuff inside dropdown
</div>
Firstly, your markup is messed up. Correct it and then check if you still have problems. Shown below will just correct the markup you have shown, please make sure your entire markup is valid.
<script language="javascript">
function search(){
document.write("hi");
}
</script> <!-- this was missing -->
<form> <!-- this was ending the form tag instead of starting -->
<input type="button" value='s' name='submit' id='submit' onClick='search();'>
</form>
<div id='searchdrop'>
stuff inside dropdown
</div>
this works
<html>
<body>
<input type="button" value='s' name='submit' id='submit' onClick='search();'>
<script type='text/javascript'>
function search(){
document.write("hi");
}
</script>
</body>
</html>
Your form begins with a </form> rather than <form>. Could that be the problem?
You enigmatically decline to describe exactly what the "not working" part is, but I'll tell you right now that using document.write() inside an event handler like that is almost certainly not going to end up in a satisfactory user experience.
You haven't closed your <script> tag.
Your form starts with </form>
Related
I am trying to learn some JQuery. I am using an external js to write my code in. It works fine when I call the 2 paragraph functions, but when I call the submit button it just load the page again.
My code looks like this:
<html>
<body>
<p id="paragraf">This is an internal paragraf</p>
Another Example:
<p id="paragraftest">This is the external js script</p>
<form>
<input type="text" name="Submit_test">
<button id="buttontest">Submit</button>
</form>
<script type="text/javascript" src="jqueryScript/jquery.js"></script>
<script type="text/javascript" src="jqueryScript/hide.js"></script>
</body>
</html>
Javascript:
$('#paragraf').click(function() {
$('#paragraf').hide();
});
$('#paragraftest').click(function() {
$('#paragraftest').hide();
});
$('buttontest').submit(function() {
alert("test");
});
/* I have tried with "" and '' in buttontest and test, but still the same */
I have also tried with this, but it is still the same.
<form>
<input type="text" name="buttontest">
<input type="submit" value="">
</form>
Can anybody see why nothing happens?
Best Regards
Mads
Missing id selector - buttontest is the id of the button so you need to use id-selector to select it(prefix with #)
$('#buttontest').submit(function() {
alert("test");
});
Correct this syntax:
$('input[name=buttontest]').submit(function() {
alert("test");
});
Using a unique ID for the button:
$('input#button_id').submit(function() {
alert("test");
});
You should select the button with the following way:
$('#buttontest')
You hadn't used the #, which is required when we are selecting elements form the DOM using their ids. For sure it was a writing error, since you use this correctly on your other selections.
Submit event is a form event, and you are trying to bind it to a button.
$('form').submit(function() {
alert("test");
});
In generally if you want to submit a form you should use dedicated onsubmit form event, not click event on any button.
It works with this code now:
<form id="form">
<input type="text" name="buttontest">
<input type="submit" value="submit">
</form>
<form id="form_1">
<input type="text" name="buttontest">
<input type="submit" value="submit">
</form>
Javascript:
$('#form').submit(function() {
alert("test");
});
$('#form_1').submit(function() {
alert("test");
});
I have a form that should redirect the user to a page when clicking the Delete button. This is the only object in the form.
<input type="submit" name="delete" value="Delete" class="submitbutton" id="submitbutton" onclick="Redirect();">
Unfortunately the redirect is not working:
<script type="text/javascript">
function Redirect()
{
alert('b');
window.location="http://www.tutorialspoint.com";
}
</script>
The alert is displayed. Then nothing happens. I also tried window.navigate. I am pulling my hairs out.
There is a session in the beginning of a page if that matters:
<?php
session_start();
?>
<html>...
I tried in chrome and firefox. I am clearly missing something.
It's probably running your script and then submitting the form.
You should use:
<input type="button" ...>
Instead of:
<input type="submit" ...>
It was in front of my eyes the whole time:
The accepted solution on this page:
Try to combine javascript confirm box with php post method?
I am sure I am missing some basic part here, but have a look at my very simple code:
<html>
<head>
<script>
function showscore(){
var score = document.createTextNode("test");
var placeholder = document.getElementById("field");
placeholder.value = score.nodeValue;
}
</script>
</head>
<body>
<form>
<input type="text" id="field"/>
<input type="submit" value="Show score" onclick="javascript:showscore()" />
</form>
</body>
</html>
When I run it, the result (for the moment, the word "test") appears inside the input field for a very brief moment and then goes away.
What extremely simple and easy thing I am missing? :-)
Thanks very much.
That's because the page is submitting the form. Just change type="submit" to type="button" or prevent the form from submitting.
It's because your button is an <input type="submit /> so after your Javascript is executed, the browser submits the form.
If you don't want the form to submit, you could use an <input type="button" /> instead.
Alternatively you could leave it as a submit and return false; after the showscore() call. That will prevent the form from submitting.
Does someone know a wizards trick to make it work ?
<input type="button" value="Dont show this again! " onClick="fbLikeDump();" onclick="WriteCookie();" />
PS: I am using it in a .js file.
Additional attributes (in this case, the second onClick) will be ignored. So, instead of onclick calling both fbLikeDump(); and WriteCookie();, it will only call fbLikeDump();. To fix, simply define a single onclick attribute and call both functions within it:
<input type="button" value="Don't show this again! " onclick="fbLikeDump();WriteCookie();" />
Try it:
<input type="button" value="Dont show this again! " onClick="fbLikeDump();WriteCookie();" />
Or also
<script>
function clickEvent(){
fbLikeDump();
WriteCookie();
}
</script>
<input type="button" value="Dont show this again! " onClick="clickEvent();" />
<input type="button" value="..." onClick="fbLikeDump(); WriteCookie();" />
Give your button an id something like this:
<input id="mybutton" type="button" value="Dont show this again! " />
Then use jquery (to make this unobtrusive) and attach click action like so:
$(document).ready(function (){
$('#mybutton').click(function (){
fbLikeDump();
WriteCookie();
});
});
(this part should be in your .js file too)
I should have mentioned that you will need the jquery libraries on your page, so right before your closing body tag add these:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://PATHTOYOURJSFILE"></script>
The reason to add just before body closing tag is for performance of perceived page loading times
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.