This my code for trialindex.php. The code contains an html form which is submitted properly. I am trying to create a javascript function to be called when the form is going to be submitted. Right now there is only an alert in this function. But it the function isn't called when the form is submitted.
<?php session_start();?>
<html>
<head>
<script type="text/javascript">
function try(){
alert("Hello");
}
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="change">
<form id="trialForm" method="post" action="connection.php" onSubmit="try()">
<center>
<h3><b>Login</b></h3>
<br/>
<label>Username :</label>
<input type="text" id="username" name="username"/>
<br/>
<br/>
<label>Password :</label>
<input type="password" id="password" name="password"/>
<br/>
<br/>
<input type="submit" value="Login"/>
</center>
</form>
</div>
</body>
</html>
The javascript function try() doesn't seem to work. I have also tried several other calls for try like : try(); , javascript:try() , javascript:try();
But in any of the syntax no alert is popped. Also in my browser pop-up are not blocked.
Could you please suggest what could the possible problem be?
You can't use try as a function name.
It is a reserved word:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words
Just use a different name for your function.
function my_submit_function(){
alert("Hello");
}
It is good practice to check your console for errors.
The error message I see is:
Uncaught SyntaxError: Unexpected token try
Which makes clear that try is not a method, but a token (or keyword).
If you rename try it works.
Related
Why doesn't the following code work?
<html>
<body>
<form id="myForm" action="http://example.com" method="POST">
<input type="text" name="engine" value="v2.5" />
<input type="text" name="verify" value="2" />
<input type="text" name="submit" value="Save" />
</form>
<script type="text/javascript">
document.getElementById("myForm").submit();
</script>
</body>
</html>
I'm getting the following error:
Uncaught TypeError: document.getElementById(...).submit is not a function
Thanks.
I want to send a POST parameter named submit through forms, how can this be done automatically?
myForm.submit is a reference to the text input with name="submit":
<input type="text" name="submit" value="Save" />
Change the name to something other than "submit".
Since you have an input with the name submit, try to use following line:
document.getElementById("myForm").submit.click();
Rename <input type="text" name="submit" value="Save" /> to something other than submit, and it should work.
This is because you can access form values using object notation in Javascript, so by calling submit(), you are attempting to execute the submit field as a function.
However, your question is how to send a POST parameter named submit. You might want to take a look at XMLHttpRequest, like this:
xmlhttp.open("POST", "http://example.com", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("engine=v2.5&verify=2&submit=Save");
go to submit button and check if you put id = submit EX:
if your id was submit you should change it to other id that's all
I am trying to get a fairly simple bit of code to work. The essence of it is just to take user input, append it on to a source URL, and then use a script to display the appropriate tumblr feed.
I have spent some time on this, and I can't get my head around how javascript works enough to do something like this.
This is what I have so far:
<html>
<body>
<form>
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src= username + ".tumblr.com/js"></script>
</body>
</html>
Thanks in advance.
The way that JavaScript works, is you need an event to attach the running of your code. In your case, the form's submit event. Additionally, you cannot compute values within the HTML as you're attempting; you'll need code to manipulate the HTML (the DOM). Here's a sample of how you can do it:
<html>
<body>
<form onSubmit="handleSubmit(event)">
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script id="theScript" type="text/javascript"></script>
<script>
function handleSubmit(e) {
e.preventDefault(); // Keep the form from actually submitting
var username = document.querySelector('[name="username"]').value;
document.getElementById('theScript').src = username + '.tumblr.com/js';
}
</script>
</body>
</html>
Because the JS file that is on username.tumblr.com uses document.write, I think it'd be better to just load the actual url of the user in an iframe, as this wouldn't require you to refresh the page, while creating a mini page inside your page.
This won't work on the snippet tool here or on JSFiddle, but I've tested it on a web server:
<html>
<body>
<script>
function getUN() {
var username = document.getElementsByName("username")[0].value;
document.getElementById("tumblrframe").src = "http://" + username + ".tumblr.com";
}
</script>
Tumblr Username:
<br>
<input type="text" name="username">
<br>
<br>
<button onclick="getUN()">Submit</button>
<br/>
<br/>
<iframe id="tumblrframe" width="80%" height="600px"></iframe>
</body>
</html>
This form automatically transfers the user to another form. The question i have is that when the script block is placed after the form block the code works. But when I swap them; so that script is above form, then the form doesn't work.
Can anyone tell why?
Works:
<form id="ponyo_form" action="formB.html" method="POST">
<input type="text" name="id" value="10" />
<input type="text" name="transfer_email" value="someone#aol.com" />
</form>
<script type="text/javascript">
document.getElementById("ponyo_form").submit();
</script>
This won't work:
<script type="text/javascript">
document.getElementById("ponyo_form").submit();
</script>
<form id="ponyo_form" action="formB.html" method="POST">
<input type="text" name="id" value="10" />
<input type="text" name="transfer_email" value="someone#aol.com" />
</form>
The reason this doesn't work when you have the code before the form, is that the code is run when as it is parsed along the page. So it is attempting to find a form called ponyo_form, which doesn't yet exist in the DOM.
To fix this, either place it after the form, or wrap it on an onload function.
IE:
window.onload = function()
{
document.getElementById("ponyo_form").submit();
}
I can't tell what I have done wrong here.
This part seems to be working, or at least it fires, because a breakpoint set with the debugger breaks in the code.
<script>
jQuery("#contactForm").validationEngine();
</script>
But it doesn't seem to be hooked up to the form fields and doesn't attempt to validate, or validates improperly, when used like this:
<form class = "contactform" id = "contactForm">
<fieldset>
<div class="contactform-email contactform-field">
<label class="contactform-label" for="contactform-email">Email Address:
<br>
</label>
<input class="validate[required,custom[email]] contactform-input" type="email" id="contactform-email" name="email" />
</div>
<input class="contactform-button" type="submit" name="submit" value="Send"/>
</fieldset>
</form>
Is there something I've mis-configured?
Bob
OK, I finally solved it.
The thing is that this code is running within the Meteor JavaScript framework and it expects code such as
jQuery("#contactForm").validationEngine();
To be in a Template.myTemplate.rendered function to execute properly and at the right time.
Still learning...
I keep getting this error saying that it cannot find my javascript function checkpw(). It's being called by onfocus.
<script type="text/javascript" >
function checkpw() {
alert ("working");
}
</script>
</head>
<body>
<h2>Welcome to our webpage.</h2>
<p>{{ reginfo}}</p>
<form action="/validate/" method ="get" >
<p>Username</p>
<input type="text" name="username" class="textbox"> </input > </br>
<p>Password</p>
<input class="textbox" name="password" id="password" type="text"> </input > </br>
<p>Confirm Password</p>
<input class="textbox" id="checkpw" type="text" onfocus="checkpw()"> </input > </br>
<p>Email<p>
<input class="textbox" name="email" type="text"> </input > </br>
<input type="submit" class="button" value="Submit">
</form>
</body>
I'm probably making a really stupid mistake but i'm new to javascript so anything that helps would be great. thanks.
Due to behavior that some ancient version of Internet Explorer implemented, in "quirks" mode, most browsers will let you directly address an element by its id.
E.g.
<div id="test"></div>
<script>
test.innerHTML = 'Hi';
</script>
I think this is what's happening for you. You have an element with id checkpw and also a function named checkpw. I think as the element is defined later on in the file, it is winning out, and since it's not a function, attempting to invoke it in your onfocus handler doesn't work.
Either change the name of your function, change the id of the element, or (more preferably) ensure that your page is not rendering in "quirks" mode (e.g. proper doctype, no invalid HTML, etc)
change: function checkpw() to: function checkPw()
and: focus="checkpw()" to: focus="checkPw()"
Edit:
It is not a reserved word; however the name is already polluted in the global namespace. As Domenic and jimr pointed out, the id attribute is using the same name, thus causing a conflicting condition.
The solution is still to change either:
(1) the id value of the input element
-or-
(2) the function name (as I stated above)