This looks very simple but I cant get it working. Im not experianced in web design but here is the following:
I am trying to make input bar(like search box) that when entered specific text it redirects you to other page or makes somethign else.
Here is what I have so far.
<!DOCTYPE html>
<html>
<body>
<form method="post">
<input id="search" type="text"/>
<button onclick="return abc()">test</button>
</form>
<script>
function abc() {
var textt = document.getElementById("search");
if (textt.value == "test") {
window.location.assign("http://www.google.com")
}
}
</script>
</body>
</html>
http://jsfiddle.net/uvnyd8vz/1/
this just refreshes page and thats it. Any ideas? thanks!
Compare the value as string
Like
textt.value =="test";
Also inside the function write
event.preventDefault();
This will stop the submit action of submit button
Also specify the else condition i.e.
else{return false;}
Adding event.preventDefault(); to function fixed my problem! thanks
Related
I have a problem with my cancel submit code.
I have used the javascript code for canceling/stopping the submit function on my page but it's not working properly.
It is working in some point but it's not enough.. I'm looking for a solution to this problem please try to help me..
Here's my code for stopping the submit function..
<script language="JavaScript">
function mySubmit(evt)
{
evt.preventDefault();
try
{
someBug();
}
catch (e)
{
throw new Error(e.message);
}
return false;
}
}
</script>
And in form
<form id="form1" runat="server" onsubmit="return mySubmitFunction()">
At first it seems that it's working properly because my page is not blinking or refreshing after I click a button but suddenly I noticed that the page is still refreshing but its not blinking .. look at this screenshot
Notice that the logo is loading after I click the move to left button? look at the red line with arrowhead ..
So I tried to use the onclientclick function and put the return mySubmitFunction in it but same result
Here is the code
<asp:Button ID="Button2" runat="server" Text=">>>"
CssClass="button button-primary"
onclick="Button2_Click" onclientclick="return mySubmitFunction()" />
hope you can help me with this thank you i'm new to javascript ^_^
I'm using ASP.NET C#
Ignore the total data in the screenshot ^_^ I didn't click save that's why its not updating yet..
Check this Example..specify event in onclick onclick="mySubmitFunction(event)"
<!DOCTYPE html>
<html>
<body>
<a id="myAnchor" onclick="mySubmitFunction(event)" href="http://w3schools.com/">Go to W3Schools.com</a>
<p>The preventDefault() method will prevent the link above from following the URL.</p>
<script>
/*document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});*/
function mySubmitFunction(event){
alert(event)
event.preventDefault();
}
</script>
</body>
</html>
I see that in the tags you said you use jquery, this can be done easy with jquery instead pure javascript, hre you have an example.
http://codepen.io/xploshioOn/pen/ogJWKp
html
<form id="form1">
<input type="text">
<input type="submit">
</form>
jquery
$('#form1').submit(function(e){
e.preventDefault();
alert("asd");
});
the alert is just to be sure the function is executing...
I am trying to learn a little Javascript. I wrote the code below expecting to see the contents of the text box written to the page when the button is clicked. This does happen but very briefly as the page seems to redraw back to it's original values.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script>
function getData() {
var x = document.getElementById("name").value;
document.getElementById("space").innerHTML = x;
}
</script>
</head>
<body>
<h1>Playing with Javascript and Forms</h1>
<form id="myForm">
Name: <input type="input" id="name">
<input type="submit" value="Submit" id="submit" onClick = "getData()">
</form>
<p id="space"></p>
</body>
</html>
It does this because the form is being fully submitted and the page reloads. To stop it, change the onclick to:
onClick = "return getData()"
and your function to return false with:
function getData() {
var x = document.getElementById("name").value;
document.getElementById("space").innerHTML = x;
return false;
}
jsFiddle example
This will prevent the form from submitting and allow your code to run.
Your form submits. To avoid it try adding return false at the end of "getData" function and change onClick = "getData()" to onClick = "return getData()"
Demo: http://jsfiddle.net/6gAkL/
Your javascript seems to be working fine.
The problem is after the JS is ran the HTML kicks in and submits the form POSTing it's data to the POST target (None as currently set).
If you don't want the form to be posted when you click that input you probably should remove the: type="submit"
Edit:
This would be most appropiate:
< input type="button" value="Submit" id="submit" onClick = "getData()" >
I'm having a strange behaviour with this code:
<script type="text/javascript">
function get()
{
alert("gggg");
jQuery.get (
"http://localhost:8080/c/portal/json_service",
{
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : document.getElementById("nombre")
}
);
}
</script>
<div>
<form>
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="button" value="Submit" onClick="javascript:get()"/>
</form>
</div>
Liferay portal gets blocked when the button "Submit" is pressed. The pop-up with the message "gggg" is showed, but after click ok on it, the page becomes blocked.
If I remove the line 'param : document.getElementById("nombre")', it doesn't block.
Can anyone explain me where is the error, or the reason of this behaviour?
Thanks in advance,
Rafa
The problem is that you're trying to pass an entire DOM element as the value for param, which jQuery isn't going to like. What type of element has ID nombre, and what property from that element do you want? If it's some kind of input, you likely want the value property, so you'd do:
param : document.getElementById("nombre").value
Updated Answer:
Thinking this through a little more, you should probably do this in a different way altogether. You're sending the data when the user clicks on the submit button, but remember if a user hits enter while typing in the input text box the form will submit but your code will not catch that.
A more robust solution would be to do it this way instead:
<div>
<form id="nombre_search">
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="submit" value="Submit"/>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#nombre_search").submit(function(){
$.get("http://localhost:8080/c/portal/json_service", {
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : $("#nombre").val()
});
return false;
});
});
</script>
Changes to your code:
Added an id to the form.
Made the submit button a submit button instead of just a button.
Placed code inside $(document).ready block.
Code runs when form is submitted not when button is clicked.
Hope this helps,
Sandro
I want to execute a command by the click of a button, and not when the page loads.
function hey() {
alert('bla');
}
Do I add something to the code above or to the button?
<input type="button" value="Click Me" onclick="hey()" />
Have you taken the time to type in your question into the magical Google box yet? Surely you'll see something like this:
<input type="button" value="Click me, now" onclick="hey()" />
Say you have the function that alerts a window to the user.
<script type="text/javascript">
function showMe() {
alert('You clicked on the button');
}
</script>
<button onclick="showMe()">Button</button>
This will make sure that the function is only called when the button is clicked upon and not when the page is loaded.
Okay, so you have a code that should work for alerting something on the click of a button. But you state that the code is running on page load. You have to check you code, looking for:
An onload attribute on the body tag, something like <body onload="hey()">
A call to hey somewhere else on your js code. Look for hey().
Maybe a reference to the button followed by a call to .click()
There is something else on your code causing the function to be called, you'll have to scan your code to find out what it is.
This is the javascript code im using.
<script language="javascript" type="text/javascript">
function cancelevent()
{
input_box=confirm("Are you sure you want to cancel?");
if (input_box==true) {
document.cancelevent.submit();
} else {
}
}
</script>
This is the form thats being submitted:
<form name=cancelevent method="post" action="whor.php">
<input type="hidden" name="owner" value="owner">
Cancel
</form>
I have this form on 2 different pages. One page it works, the other, i get this error
Error: document.cancelevent.submit is not a function
Ive literally copy and pasted the code from the working page to the 2nd page....no idea what is going on or why it would do this.
I think the problem is that the HTML form and the javascript function have the same name!
Put an id on your form
<form id="cancelEventForm" name=cancelevent method="post" action="whor.php">
And use
document.getElementById('cancelEventForm').submit();