I am very new to JavaScript and web development in general. I have a problem when I want to have my log in system executes a JavaScript function when the user submits but it does nothing when it should print to the screen. I can't figure out exactly what I am missing. Any help will be greatly appreciated!
<form name="sign_in" onsubmit="check_stuff()">
<b>Username...</b>
<br>
<input type="text" name="Username" value="Your Username">
<br>
<br>
<b>Password...</b>
<br>
<input type="text" name="Password" value="Your Password">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script>
function check_stuff(){
document.write("gametime");
}
</script>
The function is writing to the document, but that will just be visible for a very short time while the page reloads. The form will still be posted, so the page will reload and replace what you have written.
You would want to return the result from the function in the event handler:
onsubmit="return check_stuff()"
That will allow you to return false from the function if you want to keep the form to be posted:
function check_stuff(){
document.write("gametime");
return false;
}
(I assume that you are just using the document.write for testing purposes, as it will replace the entire current page with what you write.)
This works fine. Although it overwrites the DOM because document.write is called after it loaded. This means only gametime will be on the screen afterwards. It does show but, but submitting a form reloads the page. So it will appear as nothing happened.
To fix this you will want to return false; in which will not submit the form. Also change onsubmit="check_stuff()" to onsubmit="return check_stuff()".
It works ok for me, I think the issue you have is that te page is reloading after submit. Just add a return false; after the check_stuff() call to avoid the reload.
<form name="sign_in" onsubmit="check_stuff(); return false;">
Check out this codepen.
if you want current page not be redirected, you should submit your form to a iframe in current page, like this:
<form name="sign_in" onsubmit="check_stuff()" target="#frame">
<b>Username...</b>
<br>
<input type="text" name="Username" value="Your Username">
<br>
<br>
<b>Password...</b>
<br>
<input type="text" name="Password" value="Your Password">
<br>
<br>
<input type="submit" value="Submit">
</form>
<iframe id="frame" name="frame"></iframe>
<script>
function check_stuff(){
document.write("gametime");
}
</script>
Related
I am trying to write some code where I have the pageA.html and pageB.html
On pageB.html I have a form:
<form>
First name:<br>
<input type="text" name="firstname" value="">
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
Both pages are on my localhost.
I need to add some code on pageA.html that with hit the submit button on pageB.html
Is this possible? If yes, How can I do this?
No, It is not possible by using only html. You have to use any server-side scripting language like PHP or C# etc.
So, I made a simple page where the submit button should redirect to another URL. Here's my code.
HTML:
<form onsubmit="javascript:redirectRoll();">
<input type="text" id="key" name="Roll" placeholder="Enter the full Roll No" size="60" pattern=".{10,}" required title="Every Roll No is exactly of 10 characters" maxlength="10" autofocus required><br></span></input><br>
<input type="submit" name="submit"></input>
</form>
JS
function redirectRoll(){
window.location.href="www.example.com";
}
Whenever I click on Submit it just takes me back to the same page. Help, please!
Ok, I'm posting the link to the website I've just hosted:
jbresults.site88.net/results.html
this should make it easy for you guys to find the problem :)
As #teemu has commented, the form submission is overriding the redirect. You need to use the following code for your redirectRoll function. Make sure to change the onsubmit value to "redirectRoll(event)"
function redirectRoll(e) {
e.preventDefault();
location.href = "example.com";
}
Just try this
function redirectRoll()
{
$(location).attr('href','www.example.com');
}
This work for me :
function redirectRoll(){
window.location ="www.example.com";
}
you may change the way you are calling the function
in the html
<form>
<input type="text" id="key" name="Roll" placeholder="Enter the full Roll No" size="60" pattern=".{10,}" required title="Every Roll No is exactly of 10 characters" maxlength="10" autofocus required><br></span></input><br>
<input type="submit" name="submit" onclick="redirectRoll();"></input>
</form>
I've got a problem regarding my contact form page. I did callback after clicking the submit button. I tried not to fill name textbox but form still submits.
My code:
function sendFeedback() {
alert("Thank you for the feedback :)");
}
<form>
<p class="font3">Name:</p>
<input name="name" type="text" maxlength="50" size="30" required/>
<br />
<p class="font3">Email:</p>
<input name="email" type="email" placeholder="" required/>
<br />
<p class="font3">Subject:</p>
<input name="subject" type="text" required/>
<br />
<p class="font3">Message:</p>
<textarea name="comment" row="80" cols="30" required></textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="sendFeedback()">
<input type="reset" value="Reset">
</form>
You should change <form> to <form onsubmit="test()",where test() would go something like this:
test(e){
e.preventDefault();
/* do some validations here */
document.querySelector("form").submit();
}
Hope it helps
The form submitting and your alert triggering are two completely different things. The required attributes you have on the inputs are working correctly. If you leave any of the required inputs blank, the form will not submit to the server, instead you'll trigger standard error messaging in whatever browser you're using (usually a red outline and a popover).
The bit of JavaScript you have (i.e. your alert) will trigger regardless of whether the form submits successfully or not since it's executed BEFORE the submit goes through. You need to either do something like e.preventDefault() or return false at the end of your function, but that will prevent the form from being submitted altogether.
As #dvenkatsagar said, your best option is to change your onclick to onsubmit.
I have a HTML submit button and am trying to send hidden info to an outside form.
<form name="input" action="https://www.skinnybodycare.com/aff/join" method="post">
<input type="hidden" value="2skinnyme" name="enroller" />
<input type="hidden" value="Continue">
<input type="submit" value="Order Now">
</form>
And it has to take the user to https://www.skinnybodycare.com/aff/join and input the value and click on Continue... but can't figure it out and I'm against time here... help is very much appreciated...
I also want to say that I've already searched the forum for similar issues but couldn't find anything
The answer is: You can't pre-fill forms from outside, unless you've made code that reads values from the URL.
Here's some sample code (untested) to give you an idea of how to make the page work this way:
<form name="input" action="https://www.skinnybodycare.com/aff/join" method="post" **id="myform1"**>
<input type="hidden" value="2skinnyme" name="enroller" />
<input type="hidden" value="Continue">
<input type="submit" value="Order Now">
</form>
<script type="text/javascript">
var myvar = location.toString().replace(/[&?]2skinnyme=([^&]*)/, '$1');
document.getElementById('myform1').2skinnyme = myvar;
document.getElementById('myform1').submit();
</script>
Alternatively, you can just submit directly, from the original page, to the URL using AJAX and jquery, but that would require you to be on the same domain:
<script type="text/javascript">
$.post('https://www.skinnybodycare.com/aff/join', { enroller: '2skinnyme' }, function() {
alert('Form has been submitted');
});
</script>
I have two files. One is login.html which is a simple html5 file with a form.
HTML
<form method="post" action="" name="form1">entre the pasword:
<input type="password" name="code" placeholder="code" maxlength="6">
<p class="submit">
<input type="submit" name="commit" value="send" onclick="verif(document.form1.code)">
</p>
</form>
Second is my javascript file with the below code:
function verif(inputtxt) {
var pwd = "123456";
if (inputtxt.value.match(pwd)) {
window.location.href = 'Test.html';
} else {
alert('Code erron\351 ! ')
return false;
}
}
Now my problem is that when I enter my password, if it is wrong the alert message indicating an error should appear (it appears and I don't have a problem with that) and if it is correct, I should get redirected to the next page. The second part doesn't work for me.
Please help, I'm stuck with that for two days now..
Since your button is a submit button, I think it is submitting the form after the JS is done and this could be the reason why you don't get redirected to Test.html (as form action attribute doesn't have any value.) Try the below code for the HTML form and check if this solves the issue.
<form method="post" action="" name="form1" onsubmit="verif(document.form1.code);return false;">entre the pasword:
<input type="password" name="code" placeholder="code" maxlength="6">
<p class="submit">
<input type="submit" name="commit" value="send">
</p>
</form>
The return false; in the onsubmit attribute prevents the form's default submit action. The verif(document.form1.code) will be executed whenever the form is submitted (that is the submit button is clicked).