We Keep Coding

submit function submits twice after first submisson jquery, PHP

function slideupSubmit (name) {
$(name).submit(function ( event ) {
event.preventDefault();
var target = $(this).attr("action");
var response = $(this).attr("response");
var formName = $(this).attr("id");
$.post(target,
$(this).serialize() + '&' + $.param({ 'formName':formName, response : response}),
function (data) {
$(response).html(data);
$(name).hide();
$(name)[0].reset();
}
);
});
};
function resetForm (name){
$(name).show();
};
Im really new at this and only been coding for a few months so if my code is really bad I apologize, and if the solution is very easy, please forgive me.
I wrote this code so I could reuse it to submit diffrent forms on my page and have a response sent to a div above it. Im able to post everything I want but after the first time it posts, if I post again, it will post twice. Then three times. I know I did something wrong but I cant find the error.
I include this on my response to allow the form to be brought back after hiding.
<a onClick="resetForm('.$_POST['formName'].')" href="#" response=""> New Form?</a>
Here is the form.
<!-- Form 1 --->
<div class="row ">
<div class="col-xs-12">
<div class="well well-dark ">
<h4>Update Contacts</h4>
<span class="contactUpdate-response text-success"></span>
<form id="contactUpdate" class="form form-inline hidden contact-form" response=".contactUpdate-response" method="post" action="ajax/contactUpdate.php">
<div class="form-group">
<input hidden name="contact_entry" value="1"/>
</div>
<div class="form-group">
<label>Contact Title:</label>
<input class="form-control" name="contact_title" required />
</div>
<div class="form-group">
<label>Link to Employee</label>
<select name="empId" class="form-control select-emp-name"></select>
</div>
<div class="form-group">
<label>Category:</label>
<select name="category"class="form-control select-contact-categories ">
</div>
<div class="form-group">
<label>Link to Location</label>
<select name="locat_id" class="form-control select-location"></select>
</div>
<div class="form-group">
<label>Number:</label>
<select name="extId" class="form-control select-dig-ext"></select>
</div>
<div class="form-group">
<input hidden name="updateBy" value="24"/>
</div>
<div class="form-group">
<input onclick="slideupSubmit(contactUpdate)" type="submit" class="form-control btn btn-primary" value="Update List" />
</div>
</form>
</div>
</div>
</div>
<!--- -->

<input type="submit" class="form-control btn btn-primary" value="Update List" />
take your event listener out of function
and remove onclick=...
$(name).submit(function ( event ) {
event.preventDefault();
var target = $(this).attr("action");
var response = $(this).attr("response");
var formName = $(this).attr("id");
$.post( target, $(this).serialize()
+'&'+$.param({ 'formName': formName,
response : response}),
function(data){$(response).html(data);
$(name).hide();
$(name)[0].reset();
});

After form submit redirect back to page and show a modal

I'll try to explain this as best as possible.
I have a form that on submit actions on email.php:
<form data-toggle="validator" role="form" method="POST" action="email.php">
<div class="row">
<!-- Full Name -->
<div class="form-group col-lg-4">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" name="inputName" id="inputName" required>
</div>
<!-- email -->
<div class="form-group col-lg-4">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" name="inputEmail" id="inputEmail" data-error="Incorrect Email Format" required>
</div>
<!-- phone number -->
<div class="form-group col-lg-4">
<label for="inputTel" class="control-label">Phone Number</label>
<input type="text" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" name="inputTel" id="inputTel" data-minlength="10" maxlength="15" class="form-control" placeholder="123-456-7890" data-error="(123)-456-7890 | 1234567890 | 123-456-7890">
</div>
<!-- message -->
<div class="form-group col-lg-12">
<label for="content" class="control-label">Message</label>
<textarea name="content" id="content" class="form-control" rows="6" data-minlength="5" data-error="Message Must be longer"></textarea>
</div>
<!-- button -->
<div class="form-group col-lg-12">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
After the form is successfully processed in email.php, I want it to go back to the page the form is located on and show the "thank you" modal I created
currently I have in email.php (after validation):
echo "<script>
$(window).load(function(){
$('#myModal').modal('show');
});
window.location.href="Websitename";
</script>";
This does not work. What happens is the page just gets redirected but does not display the modal.
Can anyone please provide me any assistance?

I think the problem is in
window.location.href="Websitename";
When browser see this line , she will automatically locate the browser which means new request immediately made.
Let me explain :
Your form send request to email.php -----> sends response as a javascript --> javascript request to "website name".
In order to correct this issue , you should put window.location.href inside timeout function and that timeout triggered after window.load .
Please check :
echo "<script>
function deferredFunction(){
window.location.href="Websitename";
}
$(window).load(function(){
$('#myModal').modal('show');
setTimeout(deferredFunction,5000);
});
</script>";
Hope Helps!!

Error message in contact form

I have created a contact (4 input text) form and I want if user doesn't text in anyone of input a text message will appear above each input.
Contact From:
<form class="form-horizontal" method="post" action="#" name="form" onsubmit="return validation();">
<fieldset>
<div><h2 style="font-family: Myriad Pro;color:#7f8c8c">form</h2></div>
<div class="form-group">
<div class="col-sm-8">
<input id="fname" name="name" type="text" placeholder="Όνομα" class="form-control">
<div id="error1" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8">
<input id="lname" name="surname" type="text" placeholder="Επώνυμο" class="form-control">
<div id="error2" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 ">
<input id="email" name="email" type="email" placeholder="E-mail" class="form-control">
<div id="error3" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 ">
<textarea id="message" name="message" type="text" placeholder="Το σχόλιο σας.." columns="7" rows="7" class="form-control" style="background-color:#e5e6e6;" required=""></textarea>
<div id="error4" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 text-center">
<button type="submit" class="btn btn-primary btn-block" id="label" >SEND</button>
</div>
</div>
</fieldset>
</form>
And the script I use:
function validation(){
if (document.form.name.value == "") {
document.getElementById('error1').innerHTML="*Error Msg1 ";
}else if (document.form.surname.value == "") {
document.getElementById('error2').innerHTML="*Error Msg2 ";
}else if (document.form.email.value == "") {
document.getElementById('error3').innerHTML="*Error Msg3 ";
}else if (document.form.message.value == "") {
document.getElementById('error4').innerHTML="*Error Msg4 ";
}
return false;
}
My issue is that if for example the user doesn't fill his name(error message displayed below the text field) BUT then if he text his name the error message IS still displayed.How can I solve this?
There is an example here: Fiddle

I would suggest that you clear the error message at the start of the validation again:
function validation(){
document.getElementById('error1').innerHTML=""
document.getElementById('error2').innerHTML=""
document.getElementById('error3').innerHTML=""
document.getElementById('error4').innerHTML=""
//Your validation code below:
...
}
This way whenever the input validates, all of the error messages will be cleared and evaluated again.
You might want to consider storing the labels at the start of the function in a field so you have easy access to them later. This should help with readability as well. For example:
function validation(){
var errorMessage1 = document.getElementById('error1');
//Access the label using your new variable:
errorMessage1.innerHTML = "Your value here"
...

On keyup event lets try resetting the error message
document.form.name.addEventListener("keyup", function(){
document.getElementById('error1').innerHTML = '';
});

Html form submit button not calling succes method?

Html form:
<form class="form-horizontal" id="contactfrm" onsubmit="contactus()">
<fieldset class="scheduler-border">
<!-- Form Name -->
<legend class="scheduler-border">Fill contact details</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="fname">First Name</label>
<div class="col-md-6"><input id="fname" name="firstName" type="text" placeholder="First Name" class="form-control input-md" title="Enter your First Name" required="required"></div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="lname">Last Name</label>
<div class="col-md-6"><input id="lname" name="firstName" type="text" placeholder="Last Name" class="form-control input-md" title="Enter your Last Name" required="required"></div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="button"></label>
<div class="col-md-4">
<button type="submit" value="Submit" class="btn btn-success" id="submit" />
</div>
</div>
</fieldset>
</form>
script code:
<script type="text/javascript">
function contactus(){
alert("hi");
var test = JSON.stringify({
"help": $('#help').val(),
"firstName": $('#fname').val(),
"lastName":$('#lname').val()
});
alert("test values are"+test);
$.ajax({
type: "POST",
contentType: 'application/json',
url: baseurl+"contact/add",
data: test,
dataType:"text",
success:successmethod,
error: function(data,status)
{
alert("Error "+status);
}
});
}
function successmethod(data){
document.getElementById("contactfrm").reset();
$('#showcontactmessage').show();
alert("Contact Details Saved");
}
</script>
Anchor tag:
Contact us now
In the above form when i use anchor tag to submit the form every thing works fine ie; the function is called and the values are saved in database and success method is called and executed.but the problem here is, when i use button tag to submit form values, the values are saved in databse but the succes method is not called instead it calling error method..Any help would be appreciated??

The submit handler does not prevent the form from submitting.
The JavaScript will run, then the form will immediately submit. The browser will leave the current page and load a new one before it gets the response to the Ajax request. The event handler won't exist on the new page.
You need to prevent the default form action. Using the 90s style approach you are taking, you need to return false from the event handler.
onsubmit="contactus(); return false;"

parsley.js form validation - confirm when no errors found on form submission

I have read the parsley.js docs but I am still learning JQuery so it goes in one ear and out the other.
I think I need to add a custom event listener to achieve what I need, but I am really not sure, so some help would be appreciated.
I have a form with parsley.js embedded. The form works as expected but I have to add some functionality to the form.
How would I display an alert message (alert('no client side errors!');) to the user when all the client side errors have been cleared or when there are no client side errors when the form is submitted?
Here is an example of my form code:
<form id="name_details_form" class="form-horizontal" method="post" data-parsley-validate>
<div id="row_id_name_details_first_name" class="control-group">
<label for="id_name_details_first_name" class="control-label required">First Names:</label>
<div class="controls">
<input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_first_name" name="name_details_first_name" class="input-xxlarge parsley-error" data-parsley-id="8581" dir="ltr"><span class="parsley-errors-list filled" id="parsley-id-8581" style="display: none;"><span class="parsley-required">This field is required.</span></span>
</div>
</div>
<div id="row_id_name_details_middle_name" class="control-group">
<label for="id_name_details_middle_name" class="control-label ">Middle Names:</label>
<div class="controls">
<input id="id_name_details_middle_name" type="text" name="name_details_middle_name" data-parsley-maxlength="200" maxlength="200" class="input-xlarge" data-parsley-id="7500"><span class="parsley-errors-list" id="parsley-id-7500" style="display: none;"></span>
</div>
</div>
<div id="row_id_name_details_last_name" class="control-group ">
<label for="id_name_details_last_name" class="control-label required">Last Names:</label>
<div class="controls">
<input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_last_name" name="name_details_last_name" class="input-xxlarge parsley-success" data-parsley-id="7577" dir="ltr"><span class="parsley-errors-list" id="parsley-id-7577" style="display: none;"></span>
</div>
</div>
<hr />
<input class="btn-u btn-u-blue" type="submit" value="Add">
</form>
<script>
....
</script>

This code shows the alert message when the form is submitted and the all fields are valid.
<script>
$(document).ready(function() {
// bind parsley to the form
$("#name_details_form").parsley();
// on form submit
$("#name_details_form").on('submit', function(event) {
// validate form with parsley.
$(this).parsley().validate();
// if this form is valid
if ($(this).parsley().isValid()) {
// show alert message
alert('no client side errors!');
}
// prevent default so the form doesn't submit. We can return true and
// the form will be submited or proceed with a ajax request.
event.preventDefault();
});
});
</script>