I have made this code and script for my blog - it's for the contact page, and I have one problem. I would like to send the email provided to the popup windows, so that the user doesn't have to re-enter it. But can't seem to get it to work. I've added an event to the submit-button, because the code is just intended for a contact form, (it's a blogger code, and I don't have access to the script.)
HTML:
<form name="contact-form">Hvad skal jeg kalde dig?
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Skriv dit navn her ..." size="40" style="margin-top: 10px;" type="text" value="" />
<br />
<br />Hvordan svarer jeg dig? <span id="required">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Indtast din email her ..." size="40" style="margin-top: 10px;" type="text" value="" />
<br />
<br />Hvad vil du gerne fortælle mig?<span id="required">*</span>
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Skriv din besked til mig her ..." rows="8" style="margin-top: 10px;"></textarea>
<br />
<br />
<input type="checkbox" id="nyhedsbrev">Tilmeld dig mit nyhedsbrev</p>
<input name='uri' type='hidden' value='ThingsThatMadeMe' />
<input name='loc' type='hidden' value='en_US' />
<input class="contact-form-button contact-form-button-submit2" id="ContactForm1_contact-form-submit" size="40" type="button" value="Send din besked" onclick="myFunction()">
<br />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
</form>
Script:
<script>
document.getElementById("ContactForm1_contact-form-submit").addEventListener("click", myFunction);
function myFunction() {
if (document.getElementById('nyhedsbrev').checked) window.open("https://feedburner.google.com/fb/a/mailverify?uri=ThingsThatMadeMe", "popupwindow", "toolbar=yes, scrollbars=yes,width=550, height=520 method=post action=https://feedburner.google.com/fb/a/mailverify?");
}
</script>
This code in general is working fine. It's just this one thing, that's bugging me.
Move your JS code before closing BODY tag i.e. before </body> or after your FORM code.
You can check working demo here: http://jsfiddle.net/7j8s0wen/2/
Related
I used one script to show a "thank you message" when send the form, but the "thank you message" is cancelling the "validation" of the input, also, you can send without any value on input.
I need this validation working to check if its an valid email and if
is not empty. How can I fix it?
This is my form code:
<div id="btnsucess"><p>Obrigado!</p></div>
<div id="formhide">
<form action="https://ws.inversapub.com/subscribe" data-validate="https://lp.inversapub.com/wp/wp-admin/admin-ajax.php" method="POST" target="hiddenFrame">
<input name="emailAddress" type="email" required="" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('Preencha um endereço de e-mail válido.')" placeholder="Coloque aqui seu e-mail" class="input-email" />
<input type="submit" value="QUERO ME INSCREVER" class="btn-submit" id="btnclick"/>
<input name="sourceId" type="hidden" value="XV-MEL-WV-FRI-X-X-LP-X-X" />
<input name="listCode" type="hidden" value="inv_hotlist_fri" />
<input name="redirect" type="hidden" value="https://lp.inversapub.com/profit-hunter-concluido/" />
<input name="email_page" type="hidden" value="inv_welcome_fri" />
</form>
<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe></div>
The script:
<script>
document.getElementById("btnclick").onclick = function() {myFunction()};
function myFunction() {
document.getElementById('formhide').style.display = "none";
document.getElementById('btnsucess').style.display = "block";
};
</script>
The text message is cancelling the script:
oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('Preencha um endereço de e-mail válido.')"
I am working on validating forms am not sure if I am making it more complicated than it needs to be. I have a variable that i'm comparing the element to and then on success replacing a img src with a check for success or x for failure. It is supposed to run my validateData function once the field is unfocused. Here is the js. My img src src does not change when I test the first field by putting in numbers to trigger the redx.png src change.
function validateData() {
var letters = /^[A-Za-z]+$/;
var image1=document.getElementsById("image1");
if (document.forms["quiz_form"]["last_name"].value.match(letters) && document.forms["quiz_form"]["last_name"].value!="")
{
image1.src="check.png";
}
else{
image1.src="redx.png";
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<script src="quiz.js"></script>
<link rel="stylesheet" href="quiz.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1>Overwatch</h1>
</div>
<div id="content">
<h2>Overwatch Quiz</h2>
<p>
Hi there!
This quiz is dedicated to one of my favorite games Overwatch!
</p>
<form action="quiz.js" method="post" name="quiz_form">
<p><br>
<input name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image1" class="image1"/>
</p>
<p><br>
<input name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image2" class="image2"/>
</p>
<p><br>
<input name="email" type="text" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain # '" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image3" class="image3"/>
</p>
<p><br>
<input name="number" type="text" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image4" class="image4"/>
</p>
<p><br>
<input name="sulley" type="text" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image5" class="image5"/>
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).<br>
<input type="radio" name="exist" value="2">Female(Human).<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.<br>
<input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.
<p>Which motivations most align with your own?<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.
<br>
<br>
<input type="submit" name="submit" id="submit" value="submit" />
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<div id="footer">
<h2 align="center" >Created by </h2>
</p>
</div>
</div>
</div>
</body>
</html>
You can't just simply set the action to your JS script, you will need to use the onsubmit event handler.
<form onsubmit="validateData">
This will trigger the validateData method once the form is submitted. This won't stop the form from performing as usual though, you will need to stop that in your validateData method like so:
function validateData (event) {
// prevent the form from actually submitting
event.preventDefault();
}
There are multiple problems here; some have been mentioned by others. One of the main problems is you had getElementsById instead of getElementById. If you haven't figured out how to pull up the developer console and see what errors you're getting, now would be a good time.
Form validation can get pretty complicated and normally I use a library that does the heavy lifting. You might look into that.
Here is a working version of what I'm guessing you're trying to do. It's far from optimal but it's what I was quickly able to come up with.
https://jsfiddle.net/ec2L08vf/1/
I'm trying to get a preview box update with form data when you click on a checkbox. But it doesn't work for array values.
Here's the code:
<script>
function FillPreview(f) {
if(f.update.checked == true) {
f.preview_name.value = f.post_title.value;
f.preview_description.value = f._ecp_custom_13.value;
f.preview_date.value = f.EventStartDate.value;
f.preview_venue_name.value = f.venue[Venue].value;
f.preview_venue_address.value = f.venue[Address].value;
f.preview_venue_city.value = f.venue[City].value;
f.preview_venue_state.value = f.venue[Province].value;
f.preview_phone.value = f.organizer[Phone].value;
f.preview_website.value = f.organizer[Website].value;
}
}
</script>
The following form HTML is just a summary. I'm actually using The Community Events Add-on to The Events Calendar plugin for Wordpress.
<form name="eventForm">
<input type="text" name="post_title" />
<input type="text" name="_ecp_custom_13" />
<input type="text" name="EventStartDate" />
<input type="text" name="venue[Venue]" />
<input type="text" name="venue[Address]" />
<input type="text" name="venue[City]" />
<input type="text" name="venue[Province]" />
<input type="text" name="venue[Zip]" />
<input type="text" name="organizer[Phone]" />
<input type="text" name="organizer[Website]" />
</form>
And the preview box HTML
<div id="preview">
<h2>Print Preview</h2>
<input type="text" class="preview-date" name="preview_date" />
<div class="preview-category" name="preview_category"></div>
<input type="text" class="preview-name" name="preview_name" />
<input type="text" class="preview-time" name="preview_time" />
<input type="text" class="preview-venue-name" name="preview_venue_name" />
<input type="text" class="preview-venue-address" name="preview_venue_address" />
<input type="text" class="preview-venue-city" name="preview_venue_city" />
<input type="text" class="preview-venue-state" name="preview_venue_state" />
<input type="text" class="preview-venue-zip" name="preview_venue_zip" />
<input type="text" class="preview-description" name="preview_description" />
<input type="text" class="preview-phone" name="preview_phone" />
<input type="text" class="preview-website" name="preview_website" />
</div>
<div>
<input type="checkbox" id="update" name="update" onclick="FillPreview(this.form)" />
</div>
My problem is that the array values are undefined while the other values (title, description, etc.) work just fine. Like I said before, the form code is actually from The Community Events Add-on to Wordpress's "The Events Calendar" plugin, so anybody who knows that plugin well will be more helpful.
I grabbed the javascript from this link. I tested that on my submit event page by itself and it worked just fine. As you can see I'm an absolute script kiddie. Any help would be greatly appreciated.
Apologies in advance, I know this has been asked before (I did do the search).
The reason I'm posting is because I need help specifically to my situation as I can't work it out with other examples.
I'm trying to trigger logging in by pressing enter instead of clicking but have had no luck (been searching for hours and hours).
Here is my code behind:
script>
function loginBtn_Click() {
doLogin();
}
function doLogin() {
var args = {
'UserId': document.getElementById('UserId').value,
'ContactId': document.getElementById('ContactId').value,
'Password': document.getElementById('Password').value
};
var callback = function (data) {
document.location.href = 'matters.html';
}
DoAjaxCall('ws/general.asmx/Login', args, callback);
}
</script>
Here is my HTML:
Please enter your login details
<input id="UserId" type="text" placeholder="Username" /><br />
<input id="ContactId" type="text" placeholder="Contact Reference" /><br />
<input id="Password" type="password" placeholder="Password" /><br />
<div id="loginBtn" class="btn" onclick="loginBtn_Click();" onkeypress="DoAjaxCall;">Log in</div>
<br /><br />
<p>Error logging in?</p>
<p>Contact your liason at Buckles Solicitors LLP directly or alternatively call reception on <b>01733 888888</b>.</p>
</div>
I would appreciate your help.
Thanks in advance,
Rajan
Yep as Rick S mentioned, I just changed it to input type and submit, nothing else and it works perfectly. Added new code in css to reference the input type of submit and it works like a charm!
<div id="main"><br /><br />
<h2 id="logoutStatus">Please enter your login details</h2>
<input id="UserId" type="text" placeholder="Username" /><br />
<input id="ContactId" type="text" placeholder="Contact Reference" /><br />
<input id="Password" type="password" placeholder="Password" /><br />
<input type=submit value="Log in" onclick="return loginBtn_Click();">
<!-- Old log in button, works but no on hitting Enter
<div id="loginBtn" class="btn" onclick="loginBtn_Click();" onkeypress="return loginBtn_Click();">Log in</div>-->
<br /><br />
<p>Error logging in?</p>
<p>Contact your liason at Buckles Solicitors LLP directly or alternatively call reception on <b>01733 888888</b>.</p>
</div>
Thanks guys!
I need to develop a submit button with js but as I have a register and a login bn on the same page So, when I press the register, it goes fine but if I press the login, the login uses the register files for example.
<form name="as" method="POST" action="loginpro.php">
Username:
<input type="text" name="username" />
<br />
<br />
Password:
<input type="password" name="password" />
<br />
<br />
<input style="font-size: 17px" type=button onClick="submitform()" value="Submit"/>
</form>
This is the code that I am using to make the login form and as you can see I call a file with the name loginpro.php where I have the php settings to ask the db the files that I need but when I execute it he is calling regpro.php that is the file that I am using for register take a look.
<form name="register" method="POST" action="regpro.php">
Username:
<input type="text" name="username" />
<br />
<br />
Email:
<input type="text" name="Email" />
<br />
<br />
First Name:
<input type="text" name="fname" />
<br />
<br />
Last Name:
<input type="text" name="lname" />
<br />
<br />
Password:
<input type="password" name="password" />
<br />
<br />
<input style="font-size: 11px" type=button onClick="submitform()" value="Submit"/>
</form>
Well, it could be something in your submitform() Javascript function since both forms are triggering that function in the onclick event.
In JS, pass the form name to the function, like below:
<input style="font-size: 17px" type=button onclick="submitform('as')" value="Submit"/>
<input style="font-size: 11px" type=button onclick="submitform('register')" value="Submit"/>
And in your function:
function submitform(form) {
//will submit the form where the button was clicked from within
document.forms[form].submit();
}
jQuery (remove inline event handlers onclick="submitform()" from both forms)
$("input:button").on("click", function() {
var $form = $(this).closest("form");
$form.trigger("submit");
//OR
//$form[0].submit();
});
Why dont you give them id so you could call the onclick event for each button or other way you could use jquery like below
<input id="btnSubmit" type=button onClick="submitform()" value="Submit"/>
<script type="text/javascript">
$("#btnSubmit").click(function(){
$.post("the php page address goes here like regpro.php",
{
//here set the paramter
'firstname':$("#fname").val().trim(),
'lastname':$("#lname").val().trim()
}, function(data){
data=data.trim();
//you can retrive a data to find that the call is success or not
});
});
</script>
you could do the same with login button
Give different id for different form and use the simple way bellow
document.getElementById("your_form_id").submit();