Issue
I have rules in the input box, I created them with jQuery, I called the input box using XMLHttpRequest. After I called it using XMLHttpRequest, all the rules I had created failed.
But I've tried not using XMLHttpRequest, all the rules I made worked perfectly. why is that?
I want the rules in my input boxes to all work, even if I call them with XMLHttpRequest.
this is my simple code in the first file (z1.php):
<?php
include('z1ajax.php');
?>
<html lang="en">
<head>
<title>SIGN UP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" type="image/x-icon" href="/to/img/bqicon.png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
body{
background-color:black;
}
</style>
<script>
window.onload=function(){
var signup = document.getElementById("signup");
var xhr = new XMLHttpRequest();
xhr.open("POST", "/to/z1ajax.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
signup.innerHTML = xhr.responseText;
}
}
var v="onload=yes";
xhr.send(v);
}
$(document).ready(function(){
$('#email').on('keyup',function(){
var $this = $(this);
var value = $this.val();
$this.val(value.replace(/\s+/g,'')); //NO SPACE
$(this).val($(this).val().toLowerCase()); //LOWERCASE
});
$('#username').bind('keyup keypress blur', function(){
$(this).val(function(i, val) {
return val.replace(/[^a-z]/,''); //LOWERCASE, NO SPACE, LETTER ONLY
});
});
$('#namapang').bind('keyup keypress blur', function(){
$(this).val(function(i, val) {
return val.replace(/[^a-z]/,''); //LOWERCASE, NO SPACE, LETTER ONLY
});
});
$('#pwd').on('keyup',function(){
var $this = $(this);
var value = $this.val();
$this.val(value.replace(/\s+/g,'')); //NO SPACE
});
$('#city').bind('keyup keypress blur', function(){
$(this).val(function(i, val) {
return val.replace(/[^a-zA-Z ]/,''); //LETTER ONLY WITH SPACE
});
});
});
</script>
</head>
<body>
<div id='signup'></div>
</body>
</html>
This is my simple code in the second file (z1ajax.php):
<?php
$onload=isset($_REQUEST['onload'])?$_REQUEST['onload']:null;
if($onload=='yes'){
?>
<br>
<div class='container'>
<div class='row'>
<div class='col-md-4'></div>
<div class='col-md-4'>
<center>
<font size='4'><strong><font color='white'>SIGN UP</font></strong></font><br>
</center>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-envelope'></span></span>
<input type='email' id='email' class='form-control' placeholder='Email aktif'>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-pushpin'></span></span>
<input type='text' id='username' class='form-control' placeholder='username'>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-credit-card'></span></span>
<input type='text' id='namapang' class='form-control' placeholder='nama panggilan'>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-credit-card'></span></span>
<input type='password' id='pwd' class='form-control' placeholder='password untuk login'>
<span class='input-group-addon'><span id='eye' class='glyphicon glyphicon-eye-close' onclick="seppwd('pwd')"></span></span>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-home'></span></span>
<input type='text' id='city' class='form-control' placeholder='kota'>
</div>
<br>
</div>
<div class='col-md-4'></div>
</div>
</div>
<?php
}
?>
Solution
If you MUST ajax the form
- Give the fields one or more classes lowerCase, noSpace or letterOnly
- Delegate using .on from the container
$(function() {
$('#signup')
.on('input', '.lowerCase.noSpace', function() {
var $this = $(this);
var value = $this.val();
$this.val(value.replace(/\s+/g, '')); //NO SPACE
$(this).val($(this).val().toLowerCase()); //LOWERCASE
})
.on('input blur', '.lowerCase.noSpace', function() {
$(this).val(function(i, val) {
return val.replace(/[^a-z]/, ''); //LOWERCASE, NO SPACE, LETTER ONLY
});
})
.on('input blur', '.noSpace', function() {
var $this = $(this);
var value = $this.val();
$this.val(value.replace(/\s+/g, '')); //NO SPACE
})
.on('input blur', '.letterOnly', function() {
$(this).val(function(i, val) {
return val.replace(/[^a-zA-Z ]/, ''); //LETTER ONLY WITH SPACE
});
});
$.post('/to/z1ajax.php', (data) => $signup.html(data));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id='signup'>
<div class='container'>
<div class='row'>
<div class='col-md-4'></div>
<div class='col-md-4'>
<center>
<font size='4'><strong><font color='white'>SIGN UP</font></strong></font><br>
</center>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-envelope'></span></span>
<input type='email' id='email' class='form-control lowerCase noSpace' placeholder='Email aktif'>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-pushpin'></span></span>
<input type='text' id='username' class='form-control lowerCase noSpace' placeholder='username'>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-credit-card'></span></span>
<input type='text' id='namapang' class='form-control lowerCase noSpace letterOnly' placeholder='nama panggilan'>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-credit-card'></span></span>
<input type='password' id='pwd' class='form-control noSpace' placeholder='password untuk login'>
<span class='input-group-addon'><span id='eye' class='glyphicon glyphicon-eye-close' onclick="seppwd('pwd')"></span></span>
</div>
<br>
<div class='input-group'>
<span class='input-group-addon'><span class='glyphicon glyphicon-home'></span></span>
<input type='text' id='city' class='form-control letterOnly' placeholder='kota'>
</div>
<br>
</div>
</div>But as already pointed out, you can just include it using php
as it seems you are already
Answered By - mplungjan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.