I am trying to call the autocomplete function on all textboxes with class='matricula' so that when they lose focus, the boxes to their right will be populated with data coming from the same record (the query that I use to do this is found in the php files buscaralumno.php and alumno.php).
The thing is, the way it is right now when the cursor leaves the first textbox in the first row, it populates ALL the remaining textboxes - not only the first row.
So the bottom line would be: when I enter at least 2 letters in the first textbox in each row, a list suggesting possible values should pop up (which is what it does right now) and when I press the tab key to change focus to the next textbox, the remaining textboxes should be populated with the values of the remaining fields. In other words, one row of textboxes corresponds to a record from the database.
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link href="css/jqueryui.css" type="text/css" rel="stylesheet"/>
<script>
$(document).ready(function(){
$( ".matricula" ).autocomplete({
source: "buscaralumno.php",
position: { my: "right bottom", at: "right top", collision: "flip" },
messages: { noResults: '', results: '' },
minLength: 2
});
$(".matricula").focusout(function(){
$.ajax({
url:'alumno.php',
type:'POST',
dataType:'json',
data:{ matricula:$('.matricula').val()}
}).done(function(respuesta){
$(".nombre").val(respuesta.nombre);
$(".paterno").val(respuesta.paterno);
$(".materno").val(respuesta.materno);
});
});
});
</script>
</head>
<form>
<label for="matricula">Matricula:</label>
<input type="text" class="matricula" name="matricula" value=""/>
<label for="nombre">Nombre:</label>
<input type="text" class="nombre" name="nombre" value=""/>
<label for="paterno">Paterno:</label>
<input type="text" class="paterno" name="paterno" value=""/>
<label for="materno">Materno:</label>
<input type="text" class="materno" name="materno" value=""/><br>
<label for="matricula">Matricula:</label>
<input type="text" class="matricula" name="matricula" value=""/>
<label for="nombre">Nombre:</label>
<input type="text" class="nombre" name="nombre" value=""/>
<label for="paterno">Paterno:</label>
<input type="text" class="paterno" name="paterno" value=""/>
<label for="materno">Materno:</label>
<input type="text" class="materno" name="materno" value=""/><br>
</form>
Any hints will be more than appreciated. I apologize if this question is poorly phrased. I am fairly new to jQuery and English is not my first language.
Try
$(".matricula").focusout(function(){
var $row = $(this), inputs = $row.nextUntil('.matricula', 'input');
$.ajax({
url:'alumno.php',
type:'POST',
dataType:'json',
data:{ matricula:$('.matricula').val()}
}).done(function(respuesta){
inputs.filter(".nombre").val(respuesta.nombre);
inputs.filter(".paterno").val(respuesta.paterno);
inputs.filter(".materno").val(respuesta.materno);
});
});
Related
using code from here
https://www.codingsnow.com/2021/01/create-php-send-email-contact-form.html
<h4 class="sent-notification"></h4>
<form id="myForm">
<h2>Send an Email</h2>
<label>Name</label>
<input id="name" type="text" placeholder="Enter Name">
<br><br>
<label>Email</label>
<input id="email" type="text" placeholder="Enter Email">
<br><br>
<label>Subject</label>
<input id="subject" type="text" placeholder=" Enter Subject">
<br><br>
<p>Message</p>
<textarea id="body" rows="5" placeholder="Type Message"></textarea><!--textarea tag should be closed (In this coding UI textarea close tag cannot be used)-->
<br><br>
<button type="button" onclick="sendEmail()" value="Send An Email">Submit</button>
</form>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function sendEmail() {
var name = $("#name");
var email = $("#email");
var subject = $("#subject");
var body = $("#body");
if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body)) {
$.ajax({
url: 'sendEmail.php',
method: 'POST',
dataType: 'json',
data: {
name: name.val(),
email: email.val(),
subject: subject.val(),
body: body.val()
}, success: function (response) {
$('#myForm')[0].reset();
$('.sent-notification').text("Message Sent Successfully.");
}
});
}
}
function isNotEmpty(caller) {
if (caller.val() == "") {
caller.css('border', '1px solid red');
return false;
} else
caller.css('border', '');
return true;
}
</script>
what do i need to change in both the files for it to work
right now when i put two contact forms on one page, both top working even though individually both of them are working..I have tried changes variable names and function names but cant figure out the error. in the network tab it says "failed, something went wrong"
I'll explain it with an example. Let's say you have a function to add up two numbers:
function add() {
return 3 + 5;
}
If you ever need to add a different set of numbers, this function is useless. However, if you pass variable information as function argument you have a multiple purpose function:
function add(a, b) {
return a + b;
}
As about assigning IDs in HTML, it adds more burden than benefits. Compare these two snippets and figure out which one is easier to use and extend:
jQuery(function ($) {
$("#input1, #input2, #input3").each(function (index, input) {
console.log(input.value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input id="input1" value="One">
<input id="input2" value="Two">
<input id="input3" value="Three">
</form>
jQuery(function ($) {
$("input").each(function (index, input) {
console.log(input.value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input value="One">
<input value="Two">
<input value="Three">
</form>
This is just an example to illustrate the point. The usual way to handle a form element is to assign it a name rather than an ID.
Given is:
<input type='text' name='firstname' id='firstname'>
<input type='text' name='lastname' id='lastname'>
<input type='text' name='username' id='username'>
<input id='pw' name='pw' type='password'>
I try to submit the data with an ajax-post-request like this:
var myData = "firstname="+ $('#firstname').val() + "&lastname="+ $('#lastname').val() + "&username="+ $('#username').val() + "&pw="+ $('#pw').val();
$.ajax({
type: "POST",
url: "php/register.php",
dataType:"text",
data:myData, //Form variables
success:function(response){
$("#responds").append(response);
}
How to submit this data in a kind of this way correctly tho the php-file which corresponds to the database? Is a <form> needed for submitting with a button?
There are many solutions to this problem as many have mentioned. Easiest from my point of view is to wrap the fields in a form.
Bind a submit event which fires a callback when your form is submitted.
Serialize the form using .serialize() creating a text string in standard URL-encoded notation of all valid input fields and their values (so you don't have to build this query string yourself)
Post your data using $.post and handle the response using the success callback
Below is a fully functional snippet. You can see the data sent to PostBin here.
// PostBin CORS
$.ajaxSetup({crossDomain:true})
// Submit handler
$('form').on('submit', function(event) {
event.preventDefault();
var $form = $(this)
$.post(
'http://postb.in/ADC3a3Vm',// replace with php/register.php
$(this).serialize(),
function(response){
$("#response").append(response);
$form[0].reset()
}
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="firstname" placeholder="First Name">
<input type="text" name="lastname" placeholder="Last Name">
<input type="text" name="username" placeholder="Username">
<input type="password" name="pw" placeholder="Password">
<button type="submit">Submit</button>
</form>
<div id="response"></div>
you can use serialize() jQuery function
var myData = $("form").serialize();
in this case <form> is required
Read here
<input id="myID" name="inputName" type="text" placeholder="Placeholder" maxlength="16">
<h3><?php echo $_POST['MCusername']; ?><h3>
What I was really looking for is to display whatever is typed into the input tag, instantly got put into the h3 tag.
Sorry, I'm still new to PHP .
The below example uses JQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(function() {
$( "#myID" ).keyup(function() {
$("#typedID").html( $(this).val() );
});
});
</script>
<input id="myID" name="inputName" type="text" placeholder="Placeholder" maxlength="16">
<h3 id="typedID"><h3>
You need JavaScript for this. Your PHP would have to be something like this (crudely):
<input id="myID" name="inputName" type="text" placeholder="Placeholder" maxlength="16" onchange="updateh3()" onkeyup="updateh3()">
<h3 id="myh3"><h3>
<script type="text/javascript">
var h3 = document.getElementById('myh3');
function updateh3(ev) {
h3.innerHTML = ev.target.value;
}
</script>
I'm making HTML, PHP and Ajax based site for my university class and having some problems that I can't figure out. Can I post my HTML based Registration Form using Ajax post method to my main PHP site? My code looks like this:
index.php
<form id="loginForm" action="login.php" method="POST">
Username: <input type="text" name="username" id="username"/><br/>
Password: <input type="password" name="password" id="password"/><br/>
<button id="submit">Login</button>
<button id="regButton">Register</button>
</form>
<div id="ack"></div>
<div id="regAjax"></div>
<script type="text/javascript" src="Script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Script/scriptAjax.js"></script>
register.html
<html>
<head><title>Registration Form</title></head>
<body>
<form id="regForm" action="process.php" method="POST">
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
First Name: <input type="text" name="fname"/><br/>
Last Name: <input type="text" name="lname"/><br/>
E-mail: <input type="text" name="email"/><br/>
<button id="register">Register</button>
</form>
<div id="rck"></div>
<script type="text/javascript" src="Script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Script/scriptAjax.js"></script>
</body>
</html>
scriptAjax.js
$("#regButton").click( function() {
$.post ???
$("#regButton").submit( function() {
return false;
});
});
So the main purpose of this to make the smoother page and that registration form would appear in <div id="regAjax"></div> place when Register button is clicked, that user could register not being redirected to another page. Is there a way to do that or I'm taking the wrong path now?
The general Idea is that you have to send the form data to a PHP script that will evaluate it and send a response.
$.post( "validate.php", function( data ) {
$( "#regAjax" ).html( data );
});
I recommend you study this page
$.ajax({
method: 'POST',
url: 'validate.php',
data: data,
success: function(result){
$( "#regAjax" ).html( result );
}
});
I have multiple autocomplete textbox paired with multiple hidden fields. How do I do that? Ex. textbox1:name = hiddenfield1: Id, textbox2:name = hiddenfield2: Id.
I was already able to make 1-autocomplete and 1-hiddenfield work.
Here is the code for my script:
<script type="text/javascript">
$(document).ready(function() {
$('.auto').autocomplete({
source: "search.php",
focus: function(event, ui) {
$(idField).val(ui.item.value);
$(this).val(ui.item.label);
return false;
},
select: function(event, ui) {
$(this).val(ui.item.label);
$("#hidden").val(ui.item.value);
return false;
}
//minLength: 3
});
});
</script>
<p>Type the name of a band: <input type="text" class="auto" /></p>
<p>Type the name of a band: <input type="text" class="auto" /></p>
<input name="hidden" id="hidden" type="hidden" />
<input name="hidden" id="hidden" type="hidden" />
Sir/Ma'am your answers would be of great help and very much appreciated.
Firstly, you'd need unique identifiers for all of your input fields, hidden or not. Then assigning values to them would be a lot easier. You're really close, and I'd only change a few things to get it working, mostly to do with the IDs of the elements you're using:
<script type="text/javascript">
$(document).ready(function() {
$('.auto').autocomplete({
source: "search.php",
...
select: function(event, ui) {
// figure out which auto we're using and get it's
// associated hidden field...
var element_id = $(this).attr('id');
var hidden_element_id = element_id + "_hidden";
// set the appropriate fields' values...
$(this).val(ui.item.label);
$("#"+hidden_element_id).val(ui.item.value);
return false;
}
...
});
});
</script>
<p>Type the name of a band: <input type="text" class="auto" id="auto1" /></p>
<p>Type the name of a band: <input type="text" class="auto" id="auto2" /></p>
<input name="hidden" id="auto1_hidden" type="hidden" />
<input name="hidden" id="auto2_hidden" type="hidden" />
One of the easier ways to associate hidden fields with visible counterparts...you get the ID of the element that's currently being autofilled, then grab its hidden field counterpart by just appending '_hidden' onto its ID attribute...make sense?
Don't forget to change the ID attributes of the fields! Hope this helps!