I have this code. my problem is when I check the checkbox is still
refreshing and the scroll is going up and did not return in his
position after submitting the page. Can any one help me? Sorry I'm new in ajax.
<style>
.container {
border:2px solid #ccc;
width:600px;
height: 1000px;
overflow-y: scroll;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="ajaxtry.php" id="searchForm">
<div id="Html2" style="position:absolute;left:0x;top:60px;width:250px;height:100px;z-index:12" class="container">
<input onclick="javascript: submit()" type="checkbox">Checkbox1
<br>
<input onclick="javascript: submit()" type="checkbox">Checkbox1
<br>
<input onclick="javascript: submit()" type="checkbox">Checkbox1
<br>
<input onclick="javascript: submit()" type="checkbox">Checkbox1
<br>
<input onclick="javascript: submit()" type="checkbox">Checkbox1
<br>
<input onclick="javascript: submit()" type="checkbox">Checkbox1
<br>
<input onclick="javascript: submit()" type="checkbox">Checkbox1
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
Related
I want to display the loading.gif image when doing a domain search with a click button. So when php processes a domain name search request, the loading image appears and disappears when the search results appear.
Below code from my php page:
<form class="form-full-width" method="post">
<div class="group align-center form-row">
<input autofocus class="group-stretch" type="text" name="domain" placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
<input type="hidden" name="token" value="70ed0e77d1b8f7124c494a970929ccb2">
<button class="button-secondary"> Search </button>
</div>
</form>
This is result after click search button, will appear approximately 5-30 seconds after clicking the Search button
$response = '<section class="content-row">
<div class="container">
<center>
<header class="content-header">
<h3><i class="fa fa-check text-color-success icon-left"></i> Selamat! Domain <b class="text-color-primary">'.$domain.'</b> Tersedia</h3>
<h4>Hanya dengan <b>Rp. 200.000</b> / tahun</h4>
<p>
<a href="member.domain.com/cart.php?a=add&domain=register&sld='.$domain.'" class="button button-primary">
<i class="fa fa-shopping-cart icon-left"></i>DAFTARKAN
</a>
</p>
<p>
atau<br>Lihat saran domain lainnya <i class="fa fa-angle-double-right"></i>
</p>
</header>
</center>
</div>
</section>
Javascript
<script type="text/javascript">
$( document ).ready(function() {
$('.button-secondary').click(function(){
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
});
event.preventDefault();
})
});
</script>
add <img id='loading' src='loading.gif' style='display:none' > to hide the image, then when a search prompts add this on your script $("#loading").css("display","block"); afterwards when php request is finish $("#loading").css("display","none");, hope that works
HTML
<form class="form-full-width" method="post">
<img id='loading' src='loading.gif' style='display:none' >
<div class="group align-center form-row">
<input autofocus class="group-stretch" type="text" name="domain"
placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
<input type="hidden" name="token"
value="70ed0e77d1b8f7124c494a970929ccb2">
<button class="button-secondary"> Search </button>
</div>
</form>
JQuery
<script type="text/javascript">
$( document ).ready(function() {
$('.button-secondary').click(function(){
$("#loading").css("display","block");
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
$("#loading").css("display","none");
});
event.preventDefault();
})
});
</script>
JQuery EDIT
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('click','.button-secondary',function(){
$("#loading").css("display","block");
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
$("#loading").css("display","none");
});
event.preventDefault();
})
});
</script>
How can i disable button when clicked once after post request ? In my code below, when i click the button, the post request is not executed but the button is disabled.
HTML
<form class="col s12" method="POST" action="<?php echo base_url(); ?>do/this">
<button type="submit" name="send" id="my_button"
class="waves-effect waves-green btn">My Button</button>
</form>
JS
document.getElementById("my_button").onclick = function() {
this.disabled = true;
}
document.getElementById("my_button").onclick = function(e) {
e.preventDefault();
this.disabled = true;
}
<form class="col s12" method="POST" action="<?php echo base_url(); ?>do/this">
<button type="submit" name="send" id="my_button"
class="waves-effect waves-green btn">My Button</button>
</form>
If I were you, I would use jQuery to do this.
Like that:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
</body>
</html>
You can disable the button in this part of the code:
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
Like that:
posting.done(function( data ) {
document.querySelector("#send_messages").disabled = true;
});
I'm trying to have my form send me an email every time the "Submit Query" button is clicked. The form is validated and brings the user to a confirmation page after the button is clicked, but I get no email.
Form code:
$(document).ready(function() {
$('#sumbit').click(function() {
$('#contactform').attr('action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio' +
$('#name').val() + '&body=' + $('#email').val() + '&body=' + $('#comments').val() + '&body=');
$('#contactform').submit();
});
});
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
</head>
<body>
<form onSubmit="MM_validateForm('name','','R','comments','','R');return document.MM_returnValue" id="contactform">
<label for="name">Full Name:
<input name="name" type="text" id="name" required="required"></label><br /><br />
<label for="email">Email:
<input name="email" type="email" id="email" required="required"></label><br /><br />
<label for="comments">Comments:
<textarea name="comments" id="comments" required></textarea></label><br /><br />
<input name="submit" type="submit" id="submit" formaction="confirmation.html" formmethod="POST" formtarget="_self" action="mailto:chinochinako#gmail.com">
</form>
<script src="js/form.js"></script>
</body>
</html>
<script>
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$("#returnmessage").empty(); // To empty previous error/success message.
// Checking for blank fields.
if (name == '' || email == '' || contact == '') {
alert("Please Fill Required Fields");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("contact_form.php", {
name1: name,
email1: email,
message1: message,
contact1: contact
}, function(data) {
$("#returnmessage").append(data); // Append returned message to message paragraph.
if (data == "Your Query has been received, We will contact you soon.") {
$("#form")[0].reset(); // To reset form fields on success.
}
});
}
});
});
</script>
$(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$(this).attr(
'action',
'mailto:rafaeljunqueira.rs#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
console.log($(this)[0].action);
return true;
});
});
form ul {
padding: 0;
margin: 0;
}
form ul li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
<ul>
<li>
<input type="text" placeholder="Name" id="name" />
</li>
<li>
<input type="text" placeholder="Email" id="email" />
</li>
<li>
<input type="text" placeholder="Comments" id="comments" />
</li>
</ul>
<button type="submit" id="submit">Send</button>
</form>
Welcome to Stack Overlfow.
I suspect you are missing the .preventDefault() to prevent the click event from proceeding.
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$('#contactform').attr(
'action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
$('#contactform').submit();
});
});
Mind you, if the user bypasses clicking the button, and hits Enter, this code will not execute. You may want to consider moving your verification code into the submit event in jQuery, and move this code in there too.
I noticed a potential typo: $('#sumbit').click(function() {
Did you mean: $('#submit').click(function() {
Update
According to the HTML specifications, the action field of the form should be a correctly formed HTTP URL. So ‘mailto:’ is not valid for the action field.
Also, this will not "send" the email. It will only ask the default email program to compose a message that the user can send. If you want the data submitted to be sent via SMTP, this must be done by a server-side script (ASP/ASP.NET, PHP, ColdFusion, Perl, Python...) via a form handler.
$(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$(this).attr(
'action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
console.log($(this)[0].action);
return true;
});
});
form ul {
padding: 0;
margin: 0;
}
form ul li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
<ul>
<li>
<input type="text" placeholder="Name" id="name" />
</li>
<li>
<input type="text" placeholder="Email" id="email" />
</li>
<li>
<input type="text" placeholder="Comments" id="comments" />
</li>
</ul>
<button type="submit" id="submit">Send</button>
</form>
I simulate keypress event and bind to the input element, but the login button still cann't use.
Here is the test address: http://124.207.226.122:21701/test.html.
My question is how to pass input empty validation in iframe.
Thanks.
parent page:
<body>
<div style="margin:0;">
<iframe id="hk_iframe" src="Ng-Click-1.html" frameborder="0" width="100%" Height="768" scrolling="no">do not support iframe</iframe>
</div>
<script type="text/javascript">
jQuery.fn.simulateKeyPress = function(character) {
jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });
};
$(function() {
$('#hk_iframe').load(function(){
var $iframe = $(this),
$contents = $iframe.contents();
window.setTimeout(function(){
$contents.find('#textbox').keypress( function(e) {
//alert( String.fromCharCode( e.which ) );
console.log(e);
});
$contents.find('#textbox').simulateKeyPress('x');
$contents.find('#textbox').val('user1');
$contents.find('#password').keypress( function(e) {
//alert( String.fromCharCode( e.which ) );
console.log(e);
});
$contents.find('#password').simulateKeyPress('x');
$contents.find('#password').val('user123456');
$contents.find('#login').click();
}, 1000);
});
});
</script>
</body>
child page:
<body ng-app="">
<form name="form">
<div ng-hide="isShow">
User Name <input type="text" required ng-model="userName" id = "textbox"/><br /><br />
Password <input type="password" required ng-model="password" id="password"/><br /><br />
<input type="button" ng-disabled="form.$invalid" ng-click="isShow = true" value="Login" id="login"/>
</div>
<div ng-show="isShow">
Successfully Login.<br />
<input type="button" ng-click="isShow = false;password='';userName=''" value="Logout" />
</div>
</form>
</body>
Thank you Michael Walter, you are right. Also, I made reference to this answer:
Angularjs: call other scope which in iframe
Here is my answer:
parent page:
<body>
<div style="margin:0;">
<iframe id="hk_iframe" src="Ng-Click-1.html" frameborder="0" width="100%" Height="768" scrolling="no">do not support iframe</iframe>
</div>
<script type="text/javascript">
$(function() {
$('#hk_iframe').load(function(){
var $iframe = $(this),
$contents = $iframe.contents();
window.setTimeout(function(){
$contents.find('#textbox').val('user1');
$contents.find('#password').val('user123456');
var $scope = document.getElementById("hk_iframe").contentWindow.angular.element("#formID").scope();
$scope.form.textbox.$setValidity('required', true);
$scope.form.password.$setValidity('required', true);
$scope.$apply();
$contents.find('#login').click();
}, 1000);
});
});
</script>
</body>
I'm working on fading in the new content of #myform's HTML after the mail has been sent, but I cannot figure out, how to give it an animation, so it doesn't just throw out the new HTML. I'm thinking about something like this with the "fadeIn", but it doesn't work, what's the correct way of doing it?
$(document).ready(function() {
$(function() {
var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px; transition:1s;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';
$('#myform').validate();
$('#myform').on("submit",function(e){
e.preventDefault();
if ($(this).valid()) {
var data = $(this).serialize();
$(this).html(newHTML).fadeIn("fast");
$.post( "includes/sendmail.php", {data});
}
});
});
});
$(document).ready(function() {
var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px; transition:1s;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';
$('#myform').on("submit",function(e){
e.preventDefault();
$(this).fadeOut(3000, function(){
$('#myform').html(newHTML);
$('#myform').fadeIn(3000);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myform">
<input id="text" />
<input type="submit" value="Submit" />
</form>
On form submit you can first fadeOut the original contents and then you can replace its contents with the newer html like following way:
$('#myform').on("submit",function(e){
e.preventDefault();
if ($(this).valid()) {
var data = $(this).serialize();
$(this).fadeOut(3000, function(){
$('#myform').html(newHTML);
$('#myform').fadeIn(3000);
});
$.post( "includes/sendmail.php", {data});
}
});
You can take an idea from above code but there are N number of combinations that you can do with fadeIn/fadeOut. So please fine tune it as per you need.
You must first hide the content of the node you just replaced for fadeIn to work properly:
$(function() {
var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px; transition:1s;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';
$('#myform').validate();
$("#myform").on("submit", function(e) {
if ($(this).valid()) {
console.log("it's valid");
var data = $(this).serialize();
$(this).html(newHTML).hide().fadeIn();
$.post("includes/sendmail.php", {
data
});
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form method="POST" id="myform">
<input type="text" name="username" id="username" />
<input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>