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;
});
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>
I have a problem where i am getting data from a PHP script using jQuery which works however the data instantly vanishes as i can only assume the page is refreshing for some reason.
How can i return "Hello world" and keep it on the page?
My HTML/JS code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#target" ).submit(function( event ) {
var usr = $("#username").val();
var pass = $("#password").val();
$.post("script.php", {username: usr, password: pass}, function(result){
$("#result").html(result);
});
});
});
</script>
</head>
<body>
<p>Start typing a name in the input field below:</p>
First name:
<form id="target">
<input id="username" type="text" value="User">
<input id="password" type="text" value="pass">
<input type="submit" value="Go">
</div>
<span id="result"></span>
</body>
</html>
The PHP code:
<?php
echo "Hello World";
?>
You are submitting the form with $( "#target" ).submit() so you need to prevent that from happening with event.preventDefault();
$( "#target" ).submit(function( event ) {
event.preventDefault(); // add this line
var usr = $("#username").val();
var pass = $("#password").val();
$.post("script.php", {username: usr, password: pass}, function(result){
$("#result").html(result);
});
});
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>
I have this search form:
JSFIDDLE
and it doesn't submits. When I click to enter or search icon. why?
<form action="/search.php" method="get">
<fieldset>
<ul class="toolbar clearfix">
<li><button type="submit" id="btn-search"><span class="fa fa-search" style="color:gray;"></span></button></li>
<li><input type="search" id="search" placeholder="" name="s"></li>
</ul>
</fieldset>
</form>
$(document).ready(function() {
$('#btn-search').on('click', function(e) {
e.preventDefault();
$('#search').fadeIn().focus();
});
});
Because you are preventing form submit with e.preventDefault()
and not submitting form with any other methods.
You can submit your form using ajax like this:
$('#btn-search').on('click', function(e) {
e.preventDefault();
if( $('#search').val() ){
$.ajax({
url : 'submit.php',
data : { 'input': $('#search').val() },
success : function( response ) {
alert( response );
}
});
}
$('#search').animate({
width: 'toggle',
}).focus();
});
and write submit functions in submit.php
Inside submit.php you can write what you need to do with user input. Something like this:
<?php
echo "You have entered: " . $_GET['input'];
?>
Hope this helps..
I have a html form and a jQuery function to validate my form.
When I send my form values to my php files, $_POST var is not set?
<form id="signup" class="dialog-form" action="bat/new_user.php" method="post">
<div class="form-group">
<label>E-mail</label>
<input type="text" name="mail" placeholder="email#domain.com" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" placeholder="My secret password" class="form-control">
</div>
<input type="submit" class="btn btn-primary">
</form>
PHP script is:
if (isset($_POST["mail"]))
{
$mail = $_POST["mail"];
print $mail;}
else{print "ko";
}
JS script is :
$( "#signup" ).submit(function( event ) {
event.preventDefault();
var $form = $( this ), url = $form.attr( "action" );
console.log($form.serialize() );
var posting = $.post( url, { s: $form.serialize() } );
posting.done(function( data ) {
$( "#register-dialog" ).append( data );
});
});
How I can get the form values?
The problem is the data passed to post(), it should be
var posting = $.post(url, $form.serialize());
You are passing a parameter called s with value as the serialized form