Dreamweaver form button - javascript

I've been struggling with this one for some time. I have this code:
<h2 id="registerH2">Subscribe to the cake club.<br>
Please fill out the form. (* means required)</h2>
<div id="subscribeBox">
<form class="subscribeForm" name="Subscription Form"><br>
<input Name="First Name" type="text" required id="fname" placeholder="First Name*"><br><br>
<input id="lname" type="text" placeholder="Last Name*" name="Last Name" required><br><br>
<input id="email" type="email" placeholder="Email*" name="Email" required><br><br>
<input id="address" type="text" placeholder="Address (optional)" name="Address"><br><br>
<input id="submit" type="submit" value="Send" onclick="href=registered.html">
</form>
</div>
So what I want to do is when I click the "send" button in my website, to direct me to another html file I have. Right now it's not working with this code.
(This is for my assignment I'm not working on a cake club :D)

What your want is a action="registered.html" attribute in your form
In any form when you hit a submit type input
<form action="registered.html"> [...] </form> is triggered
read more on w3school
https://www.w3schools.com/tags/att_form_action.asp
Cheers.

i just added a single quote:
<input id="submit" type="submit" value="Send" onclick="window.location.href='registered.html'">

You can use anchor tag for that, if redirection is the only purpose.
<a href="register.html">
<button>Send</button>
</a>

Try to correct your html:
<input id="submit" type="submit" value="Send" onclick="window.location.href=registered.html">
Though I think you should do it in the form tag, no need to use javascript here
<form action='registered.php' method='post'>

Related

Javascript alert not working on website

I have tried several different things in javascript but nothing seems to work on my site. I'm trying to have an alert pop up when submitting a form. This is what I have
<form>
Name:<br>
<input type="text" name="name" required><br>
Email:<br>
<input type="email" name="email" required><br>
Phone (Format: 999-999-9999):<br>
<input type="tel" name="phone" required pattern="\d{3}[\-]\d{3}[\-]\d{4}"><br>
Nature of comment:<br>
<input type="checkbox" name="comment" value="Question"> Question
<input type="checkbox" name="comment" value="Business Inquiry"> Business Inquiry
<input type="checkbox" name="comment" value="Comment"> Comment
<input type="checkbox" name="comment" value="Other"> Other <br>
Comment:<br>
<textarea></textarea><br>
<input type="submit" value="Submit">
<form onsubmit="return confirm('Do you really want to submit the form?');">
</form>
This is the website: http://webpages.uncc.edu/~kjardine/MC_Portfolio/contact.html
You were almost there, the key is the code you have already has a <form> tag which starts on line 1, so you should add your onsubmit="" attribute into that one. Here is the revised code that should do the trick:
<form onsubmit="return confirm('Do you really want to submit the form?');">
Name:<br>
<input type="text" name="name" required><br>
Email:<br>
<input type="email" name="email" required><br>
Phone (Format: 999-999-9999):<br>
<input type="tel" name="phone" required pattern="\d{3}[\-]\d{3}[\-]\d{4}"><br>
Nature of comment:<br>
<input type="checkbox" name="comment" value="Question"> Question
<input type="checkbox" name="comment" value="Business Inquiry"> Business Inquiry
<input type="checkbox" name="comment" value="Comment"> Comment
<input type="checkbox" name="comment" value="Other"> Other <br>
Comment:<br>
<textarea></textarea><br>
<input type="submit" value="Submit">
</form>
The onsubmit should go in the form element at the top, like the commenter said. and the form element its in currently should be deleted.
That said, you could also have checked a "dont show any more popups" option once for that website, and now popups will be disabled until you enable the popups again, by clearing your chrome cache for instance.
<form onsubmit="return confirm('u sure?');">
<input>...
</form>
I also advise against using onsubmit as an HTML parameter, and instead writing a js handler in an actual <script></script block to do the confirm.
window.onload = function () {
document.getElementById("myForm").onsubmit = function onSubmit(form) {
return confirm('u sure?');
}
}
Remember to add id="myForm" to your form element in this case.

Disable submit button once the user submits the form

I am using the PHP & MySQL to submit a form with following code and using isset function in PHP to submit the value to database.
<div class="display">
<form action="" method="POST">
<div>
<input type="text" name="name" placeholder="Your Name" required="required">
</div>
<div>
<input type="text" name="phone" id="phone" placeholder="Mobile" required="required" onblur="check();">
<br/>
<span id="e_mobile"></span>
<?php if(isset($_GET["r"])){ ?><p>Invalid number; must be ten digits. Please submit your query again</p><?php } ?>
</div>
<div>
<input type="text" name="landline" id="landline" placeholder="Alternate Number" required="required" onblur="check1();">
<br/>
<span id="e_landline"></span>
</div>
<div>
<input type="email" name="email" placeholder="Email" required="required">
</div>
<div>
<input type="text" name="address" placeholder="Your Address" required="required">
</div>
<div>
<input type="hidden" value="0" name="salesid"/>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</div>
Now I want once the user click submit button once the button should freeze; as of now if the user clicks the submit button more than once(by intentionally or by mistake) the same information is getting submitted in the database more than once.
What to do in this circumstance?
Try with JQuery:
First add an ID to your form
<form action="" method="POST" id="form">
After that add script:
<script type="text/javascript">
$(document).ready(function() {
$("#form").submit(function(e){
$("input[type='submit']").attr("disabled","disabled");
});
});
</script>
You can add PHP Captcha to prevent user click again.
Please review below two urls which includes demo too.
http://www.w3schools.in/php/captcha/
http://99webtools.com/blog/php-simple-captcha-script/

Why am I getting a null value?

I have an HTML form that looks like this:
ar form={
formName: document.getElementById("contactus"),
name: document.getElementById("name"),
email: document.getElementById("email"),
comment: document.getElementById("question")
};
//form submit
form.formName.addEventListener( "submit", checkform );
<form name="contactus" method="post" action="html_form_send.php">
<label for="name">Name:</label><br /><input <input type="text" name="name" maxlength="50" size="59" autofocus required/><br /><br />
<label for="email">E-Mail Address:</label><br /><input type="email" name="email" maxlength="50" size="59" required/><br /><br />
<label for="question">Question:</label><br /><textarea name="question" maxlength="1000" cols="50" rows="6" required></textarea><br /><br />
<input class="c1_scButton" type="submit" value="send"/>
</form>
<script type="text/javascript" src="js/validate.js"></script>
The problem is that Firebug shows that form.formName is null, as are the rest of the form values. Why are they not acquiring the elements?
The ultimate goal of the script is to validate the form data. I think the rest of the form will work if the elements will load.
Because you are trying to get the element by ID, when there is no ID in it.
Adding the ID to the form tag should solve the problem:
<form name="contactus" ID="contactus" method="post" action="html_form_send.php">
But you may prefer to change your approach to document.getElementsByName("theName"), since you are not using IDs at all.
Here you go: http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp
Your form has the name contactus, but you're trying to get it by id.
Also, there seems to be a mistake with the name input:
<input <input type="text" name="name" maxlength="50" size="59" autofocus required/>
You'll probably want to remove the first <input.
Finally, if you include your JavaScript at the top of the page, it might run before the page has fully loaded, which means that the form and/or input elements might not be in the DOM yet.
To fix this is to add an event listener to be triggered when the DOM is ready. If you're using JQuery, you do this with:
$(document).ready(function(){
//do stuff here
});
If you have no need for JQuery, don't include it just to do this. You can find more info on how to do this in the answers to this question.
This will work sure..
<form name="contactus" id='contactus' method="post" action="html_form_send.php">
<label for="name">Name:</label><br />
<input type="text" id='name' name="name" maxlength="50" size="59" autofocus required/><br /><br />
<label for="email">E-Mail Address:</label><br />
<input type="email" id='email' name="email" maxlength="50" size="59" required/>
<br /><br />
<label for="question">Question:</label><br />
<textarea name="question" id='question' maxlength="1000" cols="50" rows="6" required></textarea><br /><br />
<input class="c1_scButton" type="submit" value="send"/>
</form>

When you disable button[type=submit], is it possible to trigger a submit event?

For instance by hitting return while in an input field?
No, it's not. try the sample here: https://jsfiddle.net/tun8js68/
<form action="http://www.w3schools.com/html/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit" disabled>
</form>
You still can submit form with javascript.

Avoid a form from being submitted when pressing "Enter" button within a text input

I need to know how to stop a form from submitting while pressing "Enter" button within a text.
<form >
<input id="a" name="a" type="text"/>
<input id="address" name="address" type="text" maxlength="300" value=""/>
<input id="showonmap" type="button" value="show on map" onclick="codeAddress()"/>
<input type="submit"/>
</form>
I use JavaScript to click on showonmap button after pushing enter within address text input, but the problem is that right after that the whole form and its submit input works which I want to stop it.
Many thanks in advance.
Basically, remove the input type submit and try something like this:
<form id="myForm">
<input id="a" name="a" type="text" />
<input id="address" name="address" type="text" maxlength="300" value="" />
<input id="showonmap" type="button" value="show on map" onclick="codeAddress()" />
<input type="button" value="submit" onClick="myForm.submit()"/>
</form>

Categories

Resources