What's the easiest way to clear this form after refresh. The way I have tried will clear the form but not submit to the database. Could someone else explain to me the best way to do this.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#newsletterform").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('newsletter.php', $("#newsletterform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
</head>
<div id="content">
<div id="newsletter-signup">
<h1>Sign up for News, Updates, and Offers!</h1>
<form id="newsletterform" action="" method="post">
<fieldset>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" />
</li>
<li>
<label for="email">Email:</label>
<input type="text" name="email" />
</li>
<div id="results"><div>
<li>
<input type="submit" value="submit" name="signup" onclick="" />
</li>
</ul>
</fieldset>
</form>
</div>
</div>
</html>
You can add this to the callback from $.post
$( '#newsletterform' ).each(function(){
this.reset();
});
You can't just call $( '#newsletterform' ).reset() because .reset() is a form object and not a jquery object, or something to that effect. You can read more about it here about half way down the page.
You can reset your form with:
$("#myform")[0].reset();
Better way to reset your form with jQuery is Simply trigger a reset event on your form.
$("#btn1").click(function () {
$("form").trigger("reset");
});
try this in your post methods callback function
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
for more info read this
Propably this would do it for you.
$('input').val('').removeAttr('checked').removeAttr('selected');
A quick reset of the form fields is possible with this jQuery reset function.
$(selector)[0].reset();
Just add this to your Action file in some div or td, so that it comes with incoming XML object
<script type="text/javascript">
$("#formname").resetForm();
</script>
Where "formname" is the id of form you want to edit
Related
There are two inputs in my form. The first input can be validated before an ajax function. The second input can't be validated. The second input comes from a page using ajax and the submit button also comes from the page using ajax. I need to validate the second input which comes from the page using ajax. Also the submit button which comes from the page is not working. Please help me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#form").submit(function(){
if ($('#Name1').val().length<3) {
alert ("please enter your first names");
$('#Name1').focus();
return false;
}
$.ajax({
url: "result.php",
method: "GET" // Either get or post
}).done(function(response) {
var splitted = response.split("|"); // RESULT
$("#Div1").html(splitted[0]); // The first name
$("#Div2").html(splitted[1]); // The first name
});
return (false);
if ($('#Name2').val().length<3) {
alert ("please enter your second names");
$('#Name2').focus();
return false;
}
});
});
</script>
</head>
<body>
<form id="form" action="Page.php">
<div style="float:left;">
<b>Name1:</b>
</div>
<input id="Name1" type="text">
<br><br><br><br>
<div style="clear:both;">
<div style="float:left;">
<b>Name2:</b>
</div>
<div id="Div1" style="float:left;">
</div>
<br><br><br>
<div style="clear:both;">
<div id="Div2">
<button>First Event</button>
</div>
</div>
</div>
</form>
</body>
</html>
This is result.php
<input type="text" id="Name2">
i need to validate this input. | <button>Second Event</button>
There's a few ways you can do this, however because I am on my phone I can't give you a detailed example.
What I recommend for you to look into is sending the AJAX request as JSON data to your PHP file, you can then validate the JSON data within the PHP file and return a response to the front end accordingly.
Within the PHP file you can return any value as a response, meaning that if you echo "success" or "true", you can see whether the data is what you are looking to receive from the user.
I would highly recommend doing as much validation possible in the back end. It is a good habit to get in to as anything can be manipulated on the front end of a website.
This code works well. i have solved myself.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#form").submit(function(){
if ($('#Name1').val().length<3) {
alert ("please enter your first names");
$('#Name1').focus();
return false;
}
if ($('#hidden').val().length<3) {
$.ajax({
url: "result.php",
method: "GET" // Either get or post
}).done(function(response) {
var splitted = response.split("|"); // RESULT
$("#Div1").html(splitted[0]); // The first name
$("#Div2").html(splitted[1]); // The first name
});
//alert ("please verify");
return false;
}
if ($('#Name2').val().length<3) {
alert ("please enter your second names");
$('#Name2').focus();
return false;
}
});
});
</script>
</head>
<body>
<form id="form" action="Page.php">
<div style="float:left;">
<b>Name1:</b>
</div>
<input id="Name1" type="text">
<br><br><br><br>
<div style="clear:both;">
<div style="float:left;">
<b>Name2:</b>
</div>
<div id="Div1" style="float:left;">
<input id="hidden" type="hidden">
</div>
<br><br><br>
<div style="clear:both;">
<div id="Div2">
<button>First Event</button>
</div>
</div>
</div>
</form>
</body>
</html>
result.php
<input type="hidden" id="hidden" value="something"> <input type="text" id="Name2"> | <input id="button" type="submit" value="Second Event">
I have this basic HTML page and there is a form to upload data to a MySQL database.
There is also a JavaScript that passes data to the process.php file. Into this file, I have an INSERT query. I use this script because I do not want to reload the page on submit.
Now I have 2 problems:
1) When I send data to the MySQL table (clicking on submit button), the first time 1 data = 1 record inserted and this is correct. If I insert a new data into the input form field, I have 1 data = 2 records equal. The third time, 3 records and so on...
But if I print what is passed by POST with print_r($_POST), I have always one data Array ( [comune] => foo ).
I also tried to use unset() without success.
2) When I click for the first time on submit button, there's no action, I have to click twice.
This is the HTML page with the JS script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".formValidation").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
},
submitHandler: function(form) {
// do other stuff for a valid form
$('.formValidation').on('submit', function () {
$.post('process.php', $(this).serialize(), function(data){
$('#results').html(data);
});
})
}
});
});
</script>
</head>
<body>
<div class="row">
<div class="col-xs-12">
<form id="myform2" class="formValidation" name="myform2" action="" method="post"></form>
<div class="col-xs-12 col-sm-4">
<div class="widget-box">
<div class="widget-body">
<div class="widget-main">
<div>
<label for="form-field-select-1">form</label>
</div>
<hr>
<div class="widget-body">
<div class="widget-main">
<div>
<input type="text" name="comune" id="comune" value="" placeholder="Add something" form="myform2">
<input type="submit" name="submit" value="Submit" class="btn btn-sm btn-success" form="myform2">
<p id="result"></p>
<div id="results"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</body>
</html>
and the process.php
foreach( $_POST as $key => $value ) {
$sql = "INSERT INTO tbl_".$key."(nome_".$key.") VALUES ('$value')";
$result = dbQuery($sql);
unset($key);
unset($value);
}
You have too many submit handlers.
Just do the ajax in the submitHandler callback option of the plugin.
Internally it is already doing the on('submit') so the first time you click it...the handler you wrote to do the ajax is created but isn't sending yet
The next time it will actually send the form twice and add another submit handler. A third click would send 3 times and add another submit handler and so on
submitHandler: function(form) { // fires only when valid
$.post('process.php', $(form).serialize(), function(data) {
$('#results').html(data);
});
}
your submit handlers are stacking one by one.. and each time requests to the php files increases, causing inserting more than once in database.
Use
submitHandler: function (form) {
$.post('process.php', $(this).serialize(), function (data) {
$('#results').html(data);
});
return false;
}
Hope this helps
I have the following code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form method="post" id="theform" action="http://example.com" target="_blank">
<input name="email" placeholder="email" type="text">
<input id="submit" type="submit" value="submit">
</form>
<script type="text/javascript">
jQuery(function() {
jQuery('#submit').on('click', function(e) {
e.preventDefault();
jQuery('#theform').attr('disabled', 'disabled');
//Code here
jQuery('#theform').removeAttr('disabled').submit();
}
});
});
</script>
</body>
</html>
The form does not submit. Any idea what is up?
I know I could do an ajax call to manually submit the form to action URL and then use JavaScript to redirect to where I want to send the user in a new tab; however, I don't want to do that because popup blockers will eat up the JavaScript redirect. Hence, I have the form target="_blank" upon submit, which gets the user where I want to send them... if only the code worked.
remove the line e.preventDefault(); from your onclick event handler.
Update:
Sorry my bad that I didn't notice that you were explicitly trying to submit the form later in the code. Even though the above change will fix it, the actual issue is else where. Don't make any changes to the function just rename the submit button's id to something else and update the binding and the code should work.
Working fiddle : http://jsfiddle.net/epednoat/
<body>
<form method="post" id="theform" action="http://example.com" target="_blank">
<input name="email" placeholder="email" type="text">
<input id="smt" type="submit" value="submit">
</form>
<script type="text/javascript">
jQuery(function() {
jQuery('#smt').on('click', function(e) {
e.preventDefault();
jQuery('#theform').attr('disabled', 'disabled');
//Code here
jQuery('#theform').removeAttr('disabled').submit();
}
});
});
</script>
</body>
</html>
You can jQuery submit form with below code.
$( "#theform" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
With JavaScript
function submitform()
{
document.theform.submit();
}
After researching this for too many hours I finally decided to post the question myself, as what is working for others, doesn't seem to work for me. Please keep in mind that I am fairly new to ajax and jquery, but as I am on a deadline with my current project I wont have time to go through it all.
I have the following html form:
<div class="form">
<form id="savePlacemarkForm" method="post" action="createPlacemark.php">
<div>
<input type="text" id="placemarkName" name="placemarkName" placeholder="Name:"/>
</div>
<div>
<input type="text" id="placemarkAddress" name="placemarkAddress" placeholder="Adress:"/>
</div>
<div>
<input type="text" id="placemarkTag" name="placemarkTag" placeholder="Tags:"/>
</div>
<div>
<textarea id="placemarkDescription" name="placemarkDescription" placeholder="Description" rows="1" cols="1"></textarea>
</div>
<div>
<input id="latitude" type="text" name="latitude"/>
</div>
<div>
<input id="longtitude" type="text" name="longtitude"/>
</div>
<button class="md-close" id="savePlacemark" onclick="createPlacemark();"/>Save</button>
</form>
<button class="md-close">Cancel</button>
<script src="my_script.js" type="text/javascript"></script>
</div>
As you see I have the action set to createPlacemark.php which takes input from these fields and saves it to my DB, which works fine!! However since this should work without redirecting or resubmitting the page, meaning ajax! I include my_script.js which looks like this:
$("#savePlacemark").click( function() {
$.post( $("#savePlacemarkForm").attr("action"),
$("#savePlacemarkForm :input").serializeArray();
});
clearInput();
});
$("#savePlacemarkForm").submit( function() {
return false;
});
function clearInput() {
$("#savePlacemarkForm :input").each( function() {
$(this).val('');
});
}
As you see it does the post for me, which works, but for some reason the return false; doesnt seem to work for me, as I am continuously redirected to the before mentioned php file.
Any help would be greatly appreciated! thx!
Try the following. The .submit() function actually triggers a submit for the form. Take this out of the script since you don't need it when you've already posted the values with $.post.
$("#savePlacemark").click( function() {
$.post( $("#savePlacemarkForm").attr("action"),
$("#savePlacemarkForm :input").serializeArray();
});
clearInput();
});
function clearInput() {
$("#savePlacemarkForm :input").each( function() {
$(this).val('');
});
}
try this
<button onclick="return createPlacemark();">Save</button>
it may help you.
I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.