There is a button when you click on which the fancybox with the form opens, after filling out the form and clicking on the send button, I want this window to close automatically and another one opens with the text "that the message was sent successfully" and after a couple of seconds it would disappear, or when pressed outside the window area.
$("form").submit(function() { //Change
var th = $(this);
$.ajax({
type: "POST",
url: "mail.php", //Change
data: th.serialize()
}).done(function() {
$('#alert-massage').fadeIn(500);
alert("Thank you!");
setTimeout(function() {
// Done Functions
th.trigger("reset");
}, 1000);
});
return false;
});
<div id="modal">
<div class="modal__wrap">
<div class="modal__title">
Write me
</div>
<form >
<!-- Hidden Required Fields -->
<input type="hidden" name="project_name" value="kylun-Serg">
<input type="hidden" name="admin_email" value="kylun1serg#gmail.com">
<input type="hidden" name="form_subject" value="popup-form">
<!-- END Hidden Required Fields -->
<input type="text" placeholder="Username" name="Name" required>
<input type="email" placeholder="Email" name = "E-mail"required>
<input type="phone" placeholder="Phone" name = "Phone">
<textarea placeholder="Massage" name="Massage"></textarea>
<button type="submit" class="btn">
Send
</button>
</form>
</div>
when submitting form you can trigger a function
<button type="submit" onclick="myFunction()" class="btn">Send</button>
and function will do hide the modal and display success message and reload the current page.
function myFunction(){
document.getElementById("modal").style.display = "none";
alert('Form submitted successfuly.');
location.reload();
}
Related
I have a form that includes a checkbox:
<form action="tienda3.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email to confirm the order">
</div>
<div class="form-group">
<div class="checkbox">
<label><input type="checkbox" id="TOS" value="This"> I certify that I am of legal age and I have read and agree to the
Terms of use and
Privacy Policy of Sdocks LLC</label>
</div>
</div>
<button type="submit" onclick="validate()" class="btn btn-primary">Submit</button>
</form>
I need to verify that the user checks the checkbox to post the form to tienda3.php.
I am using this script to validate that the user has checked the checkbox or not:
<script type=text/javascript>
function validate(){
if (document.getElementById('TOS').checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.");
return true;
}
}
</script>
If the checkbox is checked then the form is posted to tienda3.php, else an alert must be shown to inform the user that it is mandatory to check the checkbox to continue the process.
In my case, the form is always posted to tienda3.php. The script detects if the checkbox is checked or not, but in both cases, the form always opens file tienda3.php
I suggest you make this changes:
/* replace this:
* <form action="tienda3.php"> */
<form action="tienda3.php" onsubmit="return validate(event)" >
/* replace this:
* <button type="submit" onclick="validate()" class="btn btn-primary">Submit</button> */
<button type="submit" class="btn btn-primary">Submit</button>
/* and replace the validate() function with: */
function validate(event){
if (document.getElementById('TOS').checked){
alert("checked") ;
return true;
} else {
event.preventDefault();
alert("You didn't check it! Let me check it for you.");
return false;
}
}
Let me know if it worked as expected.
You can also find solutions by searching Stackoverflow How to prevent form from being submitted - inline javascript
I prefer to use ajax request instead of form action
HTML
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email to confirm the order">
</div>
<div class="form-group">
<div class="checkbox">
<label><input type="checkbox" id="TOS" value="This"> I certify that I am of legal age and I have read and agree to the
Terms of use and
Privacy Policy of Sdocks LLC</label>
</div>
</div>
<button type="button" onclick="SubmitRequest()" class="btn btn-primary">Submit</button>
</form>
js
function SubmitRequest() {
if (document.getElementById('TOS').checked){
var postObj = {
email: $('#email').val(),
};
$.ajax({
url: "/tienda3.php",
data: JSON.stringify(postObj),
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
console.log(result)
},
error: function (errormessage) {
console.log(errormessage);
}
});
}
});
I am trying to submit a form. When i click the the submit button it takes me to the next page which is not in my control(hitting an api). From that, that page user can click browsers back button come to my form page. From there onwards user can fill the form and resubmit. In this form i am passing an randomid as a hidden value. Problem is even when user comes back by clicking back button and resubmit the form with different values and that randomid remains the same. How can i solve this?
Here is my form.php
<?php
include_once 'dbconnect.php';
$r= mt_rand();
<body>
<form id="register-form" action="http://api.ipayy.com/v001/c/oc/dopayment" method="get" class="form input-group register-form">
<div class="container-fluid">
<div class="row">
<input type="hidden" id="reqnum" name="reqnum" value="<?php echo $r ?>" />
<div class="col-sm-3 col-xs-12">
<input name="fname" id="fname" class="form-cus form-control" type="text" placeholder="Your First Name" autocomplete="off" required>
</div>
<div class="col-sm-3 col-xs-12">
<input name="title" id="title" class="form-cus form-control" type="text" placeholder="Title of Your Web site" autocomplete="off" required>
</div>
<div class="col-sm-3 col-xs-12">
<input name="descr" id="descr" class="form-cus form-control" type="text" placeholder="Description of Your Web site" autocomplete="off" required>
</div>
<div class="form-group col-sm-3 col-xs-12">
<button class="btn btn-1 btn-fill" type="submit" id="btn-signup" name="btn-signup" style="display:none;">Submit</button>
</div>
</div>
</div>
</form>
<script>
$('form').submit(function() {
$.ajax({
url: "http://ll.php",
async:false,
data: $(this).serialize(),
success: function(data){
},
error : function(data) {
console.log(data);
}
});
});
</script>
You should use ajax post form submit. You can use event.preventDefault(); to prevent default form submit. I think it good solution to avoid unwanted page redirect or page reload
Update, here's another solution that I've come across...
function Reload() {
try {
var headElement = document.getElementsByTagName("head")[0];
if (headElement && headElement.innerHTML)
headElement.innerHTML += "<meta http-equiv=\"refresh\" content=\"1\">";
}
catch (e) {}
}
window.onload(function () { Reload(); }
By default, a browser will show a cached version of the previous page.
To get around this, it's a very simple fix...
<body onunload="">
This will disable the browser from caching the page and force it to reload the page when a user clicks "back"
I've seen this appear in a lot of places; however, after several hours, I still can't figure this simple thing out. Could someone verify my syntax is correct here?
$(document).ready(function(){
$("#login-form").on('submit', "#logout-btn", function() {
alert("The logout button was clicked.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
<input placeholder="Username" id="formUsr" required>
<input type="password" placeholder="Password" id="formPwd" required>
<input id="logout-btn" type="submit" value="Login">
<input id="login-btn" type="submit" value="Logout">
</form><!-- login form -->
The submit event is triggered when a submit button is clicked, and there could be more than one, a button element without type="button|reset" is clicked. It can also be triggered by the Enter key.
You can use this to determine if the logout button was clicked. However, for form submission purposes, the submit event is by far the most reliable.:
$("#logout-btn").on('click', function(e) {
e.preventDefault(); //prevents default action.
alert("The logout button was clicked.");
});
$(function() {
$("#logout-btn").on('click', function(e) {
e.preventDefault(); //prevents default action.
alert("The logout button was clicked.");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
<input placeholder="Username" id="formUsr" required/>
<input type="password" placeholder="Password" id="formPwd" required/>
<input id="login-btn" type="submit" value="Login"/>
<input id="logout-btn" type="submit" value="Logout"/>
</form><!-- login form -->
Another approach:
$(function() {
$(':submit').on('click', function(e) {
e.preventDefault();
if( $(this).is('#login-btn') ) {
alert('login-btn clicked');
} else if( $(this).is('#logout-btn') ) {
alert('logout-btn clicked');
} else {
alert('some other submit button clicked');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
<input placeholder="Username" id="formUsr" required/>
<input type="password" placeholder="Password" id="formPwd" required/>
<input id="login-btn" type="submit" value="Login"/>
<input id="logout-btn" type="submit" value="Logout"/>
</form><!-- login form -->
Try this:
$("#login-form").submit(function() {
alert("The logout button was clicked.");
});
Store the value of the last clicked button and in the .submit() event, make sure the last clicked button was the logout button. This works because the .click() event is fired before the .submit() event:
$(document).ready(function() {
//The logout button:
var logoutButton = $("#logout-btn");
//This variable holds the button in #login-form that the user last clicked:
var lastClicked = null;
//When the user clicks a button in #login-form, set it equal to lastClicked:
$("#login-form input[type=submit]").click(function() {
lastClicked = $(this);
});
//When the form is submitted, if it was the logout button, call the alert:
$("#login-form").on('submit', function() {
if (lastClicked.is(logoutButton)) {
alert("The logout button was clicked.");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
<input placeholder="Username" id="formUsr" required>
<input type="password" placeholder="Password" id="formPwd" required>
<input id="login-btn" type="submit" value="Login">
<input id="logout-btn" type="submit" value="Logout">
</form><!-- login form -->
you have two submit button in your form, you can detrmine which was clicked like this.
$(document).ready(function() {
$("#login-form input[type=submit]").click(function() {
var clickedId = $(this).attr('id');
if(clickedId=="logout-btn")
alert("The logout button was clicked.");
else if(clickedId=="login-btn")
alert("The login button was clicked.");
});
});
Note that your Login button has the ID of the logout button and the other way around.
I'm gonna add an alternative to Peters answer, just for the sake of having an alternative.
Using onclick in the markup
function logOutClicked() {
alert("Logout button clicked!");
return true;
}
<form id="login-form">
<input placeholder="Username" id="formUsr" required>
<input type="password" placeholder="Password" id="formPwd" required>
<input id="login-btn" type="submit" value="Login">
<input id="logout-btn" type="submit" onclick="return logOutClicked();" value="Logout">
</form>
Using .bind()
Since we have a linear compilation of JavaScript, the first event that will be bound to the logout button in this case is the click event.
$(document).ready(function() {
$('#logout-btn').bind('click', function() {
alert('Logout clicked click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
<input placeholder="Username" id="formUsr" required>
<input type="password" placeholder="Password" id="formPwd" required>
<input id="login-btn" type="submit" value="Login">
<input id="logout-btn" type="submit" onclick="return logOutClicked();" value="Logout">
</form>
How do i change my submit button text after submit?? i have a form with a button . i would like to change the button text from click to Next after submit the form.
<form>
<div class="form-group">
<div class="rightbox"> <label for='phone'>phone</label></div>
<div class="leftbox">
<div class="col-sm-12">
<input class="text-box single-line" data-val="true" name="phone" type="tel" value="" />
</div></div>
</div>
<div class="form-group">
<div class="rightbox"> <label for='phone'>mobile</label></div>
<div class="leftbox">
<div class="col-sm-12">
<input class="text-box single-line" data-val="true" name="phone" type="tel" value="" required />
</div></div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="btnok">
<br/>
<button type="submit" class="btn-primary" >
click
</button>
</div>
</div>
</div>
</form>
$("#save").on('click',function(){
var $btnElm = $(this);
$("form").submit(function() {
return $btnElm.text('Next');
});
})
<button type="submit" class="btn-primary" id="save" >
i think this is how you can change.
else you want to more specific with the only after form is submitted then you can go with the ajax method to submit the form and change the text the of button to next after only submitting the form
$("#save").on('click',function(){
var $btnElm = $(this);
$("form").submit(function() {
$.ajax({
url: $(this).attr('action'),
method: "POST",
data : $(this).serialize(),
success : function (data){
$btnElm.text('Next');
}
});
});
});
You can try with the below link.
fiddle link
$(document).ready(function(e) {
$('#theForm').submit(function() {
var txt = $('#btnSubmit');
txt.val("Next");
return confirm("Do you want to save the information?");
});
});
Updated link: Fiddle
Try with this.
First off all, add id to your form and button.
<form id="myform">
....
<button id="mybutton" type="submit" class="btn-primary" >
click
</button>
...
</form>
Then, using JQuery you can do a Jquery Callback after form submit.
$("#myform").bind('ajax:complete', function() {
document.getElementById("mybutton").value="New Button Text";
});
It works for me. I Hope it helps.
Edit
If you dont want to use JQuery you can use onSubmit event to call a function after form submit.
<form onsubmit="changeButton()">
....
<button id="mybutton" type="submit" class="btn-primary" >
click
</button>
...
</form>
This is the function to change button text.
function changeButton(){
document.getElementById("mybutton").value="New Button Text";
}
Can someone help me out here, i have a form which pop ups after a min on a video page, i want the form to close by itself once its submitted so the video could continue, how this is possible with jQuery?
this is my form
<ul class="mktLblLeft">
<div class="txt-fld">
<label>First Name:</label><span class="mktInput"><input class="mktFormText" id="Email" maxlength="255" name="24132" tabindex="1" type="text" value="" />
</span></li>
<label>Last Name:</label><span class="mktInput"><input class="mktFormTex" id="FirstName" maxlength="255" name="24134" tabindex="2" type="text" value="" /></span></li>
<label>Email Address:</label><span class="mktInput"><input class="mktFormText" id="LastName" maxlength="255" name="24136" tabindex="3" type="text" value="" />
</div>
<div class="btn-fld">
<button type="submit">Sign Up »</button>
i have tried this code, is there something wrong with this?
function closeSelf(){
// do something
if(condition satisfied){
alert("conditions satisfied, submiting the form.");
document.forms['certform'].submit();
window.close();
}else{
alert("conditions not satisfied, returning to form");
}
}
An easy way to to this would be to use hide() when the button is clicked.
<button type="submit" onlick="$('#myForm').hide()">Sign Up »</button>
Assuming this is inside a <form id="myForm">
Here's a jQuery AJAX solution:
jQuery('button#yourSubmitButton').on('click', function(event) {
// prevent normal submit
event.preventDefault();
// call ajax submit
jQuery.ajax({
type: "POST",
url: "bin/yourprocess.php",
success: function() {
// fadeout the form
jQuery('.mktLblLeft').fadeOut();
},
error: function() {
// give feedback to user
alert('something went wrong!');
}
});
});