I've gotten the validation to work and the message appear on submit, however the page doesn't seem to process the form/refresh. Otherwise I think I am good to go!
This my html:
<form parsley-validate id="frmContact" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<p>
<label for="yourName">name</label>
<input id="yourName" parsley-required="true" parsley-mincheck="2" parsley-focus="first" type="text" name="name" class="required textArea" placeholder="Please enter your full name"/>
</p>
<p>
<label for="email" >Email</label>
<input id="email" data-trigger="change" parsley-required="true" parsley-type="email" type="email" name="email" class="textArea" placeholder="Please enter your email address"/>
</p>
<p>
<label for="comments">Comments</label>
<textarea id="comments" data-trigger="change" required data-required="true" name="comments" class="textArea" title="Message field!"/>
</textarea>
</p>
<p>
<input type="submit" class="submit myButtons submitButton specificLink button button-block button-rounded button-large" name="submit" value="Submit" placeholder="">
</p>
<div id="results" class="results" style="text-align:center;">
<span>
<p class="success">Your message was sent succssfully!<br> I will be in touch as soon as I can.
</p>
</span>
</div>
</form>
js/jquery:
var dd= $.noConflict();
dd(function() {
dd(":text:first").focus();
dd(".success").hide();
dd('#frmContact').submit(function(e) {
e.preventDefault();
if ( dd(this).parsley('validate') ) {
dd.post("index.php", dd(".success").show());
}
});
});
Try replacing dd(this).parsley('validate') with true and false to eliminate parsley.js from the problem.
You may then notice that e.preventDefault(); does not work as you want it to. See this answer for more details.
Try this instead of your code:
dd(function() {
dd(":text:first").focus();
dd(".success").hide();
dd('#frmContact').submit(function(e) {
if ( dd(this).parsley('validate')) {
dd.post("index.php", dd(".success").show());
}
return false;
});
});
Here is a fiddle.
Related
Hello I have a divi contact form module. website is not wordpress. I want to display a success message after user submits form. How can I go about it. Tried many ways.
The form appears below.
<div class="et_pb_module et_pb_contact_form_0 dct-contact-forn et_pb_contact_form_container clearfix"
data-form_unique_num="0"
id="et_pb_contact_form_0">
<div class="et-pb-contact-message"><p>Thanks</p></div>
<div class="et_pb_contact">
<form action="contact.php" class="et_pb_contact_form clearfix"
method="post">
<p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_last"
data-id="name_2" data-type="input">
<label class="et_pb_contact_form_label"
for="name">Name</label>
<input class="input" data-field_type="input" data-required_mark="required" id="name"
name="name" placeholder="Name"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_1 et_pb_contact_field_half"
data-id="email" data-type="email">
<label class="et_pb_contact_form_label" for="email">Email
Address</label>
<input class="input" data-field_type="email" data-required_mark="required" id="email"
name="email" placeholder="Email Address"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_2 et_pb_contact_field_half et_pb_contact_field_last"
data-id="subject" data-type="input">
<label class="et_pb_contact_form_label" for="subject">Subject</label>
<input class="input" data-field_type="input" data-required_mark="required" id="subject"
name="subject" placeholder="Subject"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_3 et_pb_contact_field_last"
data-id="message" data-type="text">
<label class="et_pb_contact_form_label"
for="et_pb_contact_message_0">Message</label>
<textarea class="et_pb_contact_message input" data-field_type="text"
data-required_mark="required"
id="message"
name="message"
placeholder="Message"></textarea>
</p>
<input name="et_pb_contactform_submit_0" type="hidden"
value="et_contact_proccess">
<div class="et_contact_bottom_container">
<button class="et_pb_contact_submit et_pb_button" name="submit"
type="submit">Submit
</button>
</div>
<input id="_wpnonce-et-pb-contact-form-submitted-0"
name="_wpnonce-et-pb-contact-form-submitted-0"
type="hidden"
value="7dbdd1dfcb"><input name="_wp_http_referer"
type="hidden"
value="/?page_id=1750">
</form>
That is what it looks like. I really need assistance. Anyone here that could help, would appreciate your time and efforts. thanks in advance.
Forgive me I
function addText() {
var input = document.getElementById('something');
input.value = input.value +'URGENT PLEASE READ';
}
<form name="frm1" action="?" onsubmit="addText()">
<p> Subject </p><input type="text" name="Subject" size="40" id="something" onsubmit="addText()"maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="20"></textarea>
<input type="submit" value="MAKE URGENT" id="URGENT"/>
</form>
am very new to JS and I am attempting to create a button that adds the words "URGENT PLEASE READ" to the subject of a message; however, the following code simply clears my subject head. Thank you in advance,
I'm not sure if you wanted a separate button for make urgent and submit - if so you can do it like this
function addText() {
var input = document.getElementById('something');
input.value = input.value + 'URGENT PLEASE READ';
}
<form name="frm1" action="?" onsubmit="addText()">
<p> Subject </p><input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="10"></textarea>
<button type="button" id="URGENT" onclick="addText()">MAKE URGENT</button>
<input type="submit" value="SUBMIT" id="SUBMIT"/>
</form>
Use proper event handlers on the forms submit event, and prevent the form from submitting, otherwise the page just reloads, and the changed value is lost.
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault();
var input = document.getElementById('something');
input.value = input.value + 'URGENT PLEASE READ';
});
<form name="frm1" action="?" id="myForm">
<p> Subject </p>
<input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="20"></textarea>
<input type="submit" value="MAKE URGENT" id="URGENT" />
</form>
Why not use a Checkbox?
<form name="frm1" action="?">
<p> Subject </p>
<input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="50" rows="5"></textarea>
<br><br>
<input type="checkbox" name="Urgent" /> Make urgent
<br><br>
<input type="submit" value="Submit"/>
</form>
Here the code for review rating. When I submit the form, the data will not be submitted to database. Any help is welcome.
<form id="commentform" method="POST" action="#" class="form form-inline form-contact">
<p class="push-down-20">
<input type="text" tabindex="3" size="30" value="" id="url" name="txtTitle">
<label for="email">REVIEW TITLE<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<input type="text" aria-required="true" tabindex="1" size="30" value="" id="author" name="txtName" required>
<label for="author">NAME<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<input type="email" aria-required="true" tabindex="2" size="30" value="" id="email" name="txtEmail" required>
<label for="email">MAIL<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<input type="text" tabindex="3" size="30" value="" id="url" name="txtContact">
<label for="email">CONTACT<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<textarea class="input-block-level" tabindex="4" rows="7" cols="70" id="comment" name="txtComment" placeholder="Your Review ..." required></textarea>
</p>
<p class="push-down-20">
<!--<div class="tuto-cnt">-->
<div class="rate-ex2-cnt">
<div id="1" class="rate-btn-1 rate-btn"></div>
<div id="2" class="rate-btn-2 rate-btn"></div>
<div id="3" class="rate-btn-3 rate-btn"></div>
<div id="4" class="rate-btn-4 rate-btn"></div>
<div id="5" class="rate-btn-5 rate-btn"></div>
</div>
<!--</div>-->
</p>
<p>
<input class="btn btn-primary bold" type="submit" tabindex="5" id="rate-btn" name="rate-btn">Submit</button>
</p>
</form>
You should check if the form submitted successsfully first.In the other words, if there's something wrong in the submit button or form definition, background codes will know nothing about what you do! The second step, you said 'the data will not be submitted to database', if the backgound codes already received the data successfully but can't save to database only, I suggest you paste more codes about the saving process, then we can know more about where's the error!
I am having trouble pinpointing why my javascript code is failing to validate the form on the bottom. Any help is appreciated. I'm new and learning when in comes to javascript.
Here's the javascript:
<script type="text/javascript" language="javascript">
function validate(){
//Initialize array
var field = new Array;
var field = [document.getElementById('first_name'),document.getElementById('last_name'),document.getElementById('address'),document.getElementById('eadress'),document.getElementById('city'),document.getElementById('state'),document.getElementById('telephone'),document.getElementById('comments')];
//Error tracker
var error = 0;
//Validation Loop
for (i=0;i<field.length;i++)
{
if (field[i].value == "")
{
error++;
}
}
//If no errors are present, submit
if (error == 0)
{
document.contact-form.submit();
}
//Else, display alert
else {
alert("One or more fields are empty.");
return false;
}
}
Here's the form:
<div id="registration">
<form action="" method="post" onsubmit="return validate();" id="contact-form">
<h2>Contact Us
</h2>
<div>
<label for="first_name">First Name:</label>
<input id="first_name" name="first_name" type="text" class="required" />
</div>
<div>
<label for="last_name">Last Name:</label>
<input id="last_name" name="last_name" type="text" class="required" />
</div>
<div>
<label for="address">Address:</label>
<input id="address" name="address" type="text" />
</div>
<div>
<label for="city">City:</label>
<input id="city" name="city" type="text" />
</div>
<div >
<label for="state">State:</label>
<input id="state" name="state" type="text" />
</div>
<div >
<label for="zip">Zip:</label>
<input id="zip" name="zip" type="text" />
</div>
<div>
<label for="eaddress">Email address:</label>
<input id="eaddress" name="eaddress" type="text" class="required"/>
</div>
<div>
<label for="telephone">Telephone:</label>
<input id="telephone" name="telephone" type="text" />
</div>
<div>
<label>Comments:</label>
<textarea rows="4" cols="4" name="comments" id="comments" ></textarea>
</div>
<div>
<label></label>
<input id="submit" type="submit" value="Submit" />
<input id="reset" type="reset" value="Reset" />
</div>
</form>
I just corrected your code. it seems that in the array you are asking for eadress and the field is eaddress with 2 d's
In the script, you misspelt eaddress as eadress :)
You misspelled one of the fields ids in your array definition document.getElementById('eadress') is eaddress in HTML id attribute
How can I make my form run a function when submit is clicked?
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_comment();">
</fieldset>
...
I am trying running the following function:
function ajax_add_comment () {
alert ("testing");
}
Use onclick attribute instead of action.
You could use jQuery, and use the .submit() function.
You can give the form an id and then attach the submit function to it.
Example:
<form id="execute"....
</form>
<script type="javascript">
$("#execute").submit(function(){
alert("i've submitted this form");
});
</script>
make sure you have included the jquery js file.
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
You can use the onsubmit event to execute JavaScript code when the form is submitted. For example:
<script>
function ajax_add_comment () {
alert ("testing");
}
</script>
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" onsubmit="ajax_add_comment();">
</fieldset>
Thank you!