Javascript alert not working on website - javascript

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.

Related

How to submit a form without putting an onload event in the body tag

I have several forms synced to Salesforce currently running on a WordPress website using the Avada theme, but the client wants a new field added which will require adding an onload event in the body tag. I thought the easiest way to do this would be to go through the dashboard>Theme Options>Advanced>Code Fields but I don't see an option to add an event to the body tag. What's the best way to do this without editing the core template files (the forms are only on a few pages)?
Snippet of current code:
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST"><input type=hidden name="oid" value="00DU0000000H99p">
<input type=hidden name="retURL" value="https://www.sablesys.com/thank-you/">
<input type="hidden" name="member_status" value="Sent"/>
<!-- Campaign id for Quote Campaign -->
<input type="hidden" name="Campaign_ID" value="7010B000001Eiz3QAC" />
<input type="hidden" id="lead_source" name="lead_source" value="Website">
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required/><br>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" required/><br>
<label for="company">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" required/><br>
<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" required/><br>
<label for="city">City</label><input id="city" maxlength="40" name="city" size="20" type="text" required/><br>
Notes:<br><textarea id="00NU0000003mN8A" name="00NU0000003mN8A" rows="25" type="text" wrap="soft" style="width: 100%"></textarea><br>
<input type="submit" name="submit">
</form>
New code the client requested be added:
A new field for the form:
<input type="hidden" id="URL" name="URL" value="" >
A new onload event:
<body onload="document.getElementById('URL').value = document.location.href">
Is there a way to do a window.onload inside a script instead? I admit I don't know javascript well. Please be descriptive in your replies. Thanks.
This line of code IS javascript.
document.getElementById('URL').value = document.location.href;
You just need a way to get it executed.
If any other javascript code is executing on your page, make it part of that.
You could add an "onsubmit" event to the form, like so:
<form onsubmit="FillInURL()">
<input id="URL" type=hidden>
</form>
function FillInURL() {document.getElementById('URL').value = document.location.href;}

Dreamweaver form button

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'>

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.

Auto-complete input2 with the value from input1

On page 1.html I have this form:
<form id="my_form" action="2.html">
<input type="text" id="input1" value="" />
<input type="submit" />
</form>
After the user presses the button he is redirected to 2.html. On this page I have this input:
<input type="text" id="input2" value="" />
How can I get input2 "auto-completed" with the value inserted by the user in input1 ?
Tried this:
Changed 2.html to 2.php and <input type="text" id="input2" value="" /> to <input type="text" id="input2" value="<?php echo htmlspecialchars($_POST['input1'])?>" /> - no luck
Different approaches using sessionStorage - no luck.
I must be missing something simple, please help...
In the form on page 1.html you didn't provide a submission method. Try changing it to
<form id="my_form" action="2.html method="POST">
<input type="text" id="input1" name="input1" value="" />
<input type="submit" />
</form>
The reason your script is not working is because #input1 is missing name attribute .. try changing html of #input1 to this :
<input type="text" id="input1" name="input1" value="" />
Also, you were not declaring any method on form, by default if the method is not declared then it is set as GET. As you are getting values on second page by POST, declare form method to POST.
So, the html of form will be:
<form id="my_form" action="2.php" method="POST">
<input type="text" id="input1" name="input1" value="" />
<input type="submit" />
</form>

Passing form data from one page to another html mobile page

I'm new to mobile development and I am trying to pass information from a form and I want to display it on another page. I have tried passing the info using cookies but with no success..
Here is my code for the form:
function submit_jobs_post(){
$.cookie('job_title', $('#job_title').val());
$.cookie('job_des', $('#job_des').val());
$.cookie('company_name', $('#company_name').val());
$.cookie('company_address', $('#company_address').val());
$.cookie('company_phone', $('#company_phone').val());
$.cookie('company_email', $('#company_email').val());
}
<form method="post" action="jobs_page.html" id="post_ads">
<label for="job_title">Job Title:</label>
<input type="text" name="job_title" id="job_title">
<label for="job_des">Job Description:</label>
<textarea name="job_des" id="job_des"></textarea>
<label for="company_name">Company Name:</label>
<input type="text" name="company_name" id="company_name">
<label for="company_address">Address:</label>
<input type="text" name="company_address" id="company_address">
<label for="company_phone">Phone:</label>
<input type="text" name="company_phone" id="company_phone">
<label for="company_email">Email:</label>
<input type="email" name="company_email" id="company_email" placeholder="Your email..">
<input type="submit" data-inline="true" value="Post Job" onClick='submit_jobs_post()'>
</form>
And here is my code for the page to receive the information. When I submit the form the data does not appear on this page.
window.onload = function()
{
$('#job_title_got').val($.cookie('job_title'));
$('#job_des_got').val($.cookie('job_des'));
$('#company_name_got').val($.cookie('company_name'));
$('#company_address_got').val($.cookie('company_address'));
$('#company_phone_got').val($.cookie('company_phone'));
$('#company_email_got').val($.cookie('company_email'));
};
<input type="text" name="job_title_got" id="job_title_got">
<textarea name="job_des_got" id="job_des_got"></textarea>
<input type="text" name="company_name_got" id="company_name_got">
<input type="text" name="company_address_got" id="company_address_got">
<input type="text" name="company_phone_got" id="company_phone_got">
<input type="email" name="company_email_got" id="company_email_got" >
Any help would be great, thanks in advance...

Categories

Resources