<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>
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.
My current working situation looks something like this:
<!-- collect user info -->
<form method="GET">
<input name="param1" type="text" />
<input name="param2" type="text" />
<input type="submit" />
</form>
<!-- display image based on user info -->
<img src="color.php?param1=<?php echo $_GET['param1']; ?>param2=<?php echo $_GET['param2']; ?>" alt="" />
This is working perfectly. Now I would like only the image being updated by ajax, while the rest of the HTML remains unchanged. I tried this:
<form method="GET" id="formId">
<input name="param1" type="text" />
<input name="param2" type="text" />
<input type="submit" />
</form>
<div id="result"></div>
<script type="text/javascript">
var frm = $('#formId');
frm.submit(function(){
$.ajax({
type: 'GET',
success: function () {
$('#result').html('<img src="color.php?' + frm.serialize() + '" />');
}
});
return false;
});
</script>
In fact this solution works more or less. However, I have some issues here:
Is this good jquery / ajax code or is it silly (yes, I am new to jquery)?
The field "result" does update only if one of the fields changes. Can I make it update whenever the submit button is being klicked?
I would like to display a spinning load.gif while the color.php calculates the picture. I tried it this way, without success:
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
$('#result').html(ajax_load).html('<img src="color.php?' + frm.serialize() + '" />');
Thank you!
To the jQuery ajax call add the parameter cache : false, to force to refresh the image. To use the loader, just play with the attributo src. Copy / paste the code:
<form method="GET" id="formId">
<input name="param1" type="text" />
<input name="param2" type="text" />
<input type="submit" />
</form>
<div id="result">
<img id="preview" src="img/load.gif" />
</div>
<script type="text/javascript">
var frm = $('#formId');
frm.submit(function(){
$('#preview').attr('src', 'img/load.gif' );
$('#preview').attr('src', 'color.php?' + frm.serialize() + '&_' + new Date().getTime() );
return false;
});
</script>
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);
});
});
i want to get back or post back textbox value after form has been submit it is necessary because of user's must be see what values he or her typed in the textbox?
function getComboA(sel) {
var cname=document.getElementById("cname");
var input_val = document.getElementById("cname").value;
name.action = "searchreceivable.php?cname="+input_val+"";
name.submit();
}
<form name="name" id="name"><input class="input_field" type="text"
name="cname" id="cname" onchange="getComboA();"></form>
Now Problem is Solved This Is My Final Code So It Will Retain Textbox Value Once Form Submitted
function getComboA(sel) {
var cname=document.getElementById("cname");
var input_val = document.getElementById("cname").value;
name.action = "searchreceivable.php?cname="+input_val+"";
name.submit();
}
<form name="name" id="name"><input class="input_field" type="text"
name="cname" id="cname" onchange="getComboA();"
value="<?php echo $txtVal=$_GET['cname']; ?>"></form>
Do you really need it to store via javascript? Maybe you can just do something like:
<input class="input_field" type="text"
name="cname" id="cname" onchange="getComboA();" value="<?php echo $_GET['name']; ?>">
function getComboA(sel) {
var cname=document.getElementById("cname");
var input_val = document.getElementById("cname").value;
form.action = "searchreceivable.php?cname="+input_val;
form.submit();
}
The code is to be done on searchreceivable.php-
<?php
$txtVal=$_GET['cname'];
?>
Since you mark this question jQuery and you want to send data to the server onchange, then I suggest
$(function() {
$("#cname").on("change",function() {
$.get("searchreceivable.php?cname="+$(this).val(),function(data) {
$("#result").html(data);
});
});
});
using
<form>
<input id="cname" class="input_field" type="text" value=""/>
</form>
<div id="result"></div>
before ajax call I write the code for date picker is:
<script type="text/javascript">
$(function() {
$("#birthdate").focus(function() {
$(this).datepicker().datepicker( "show" )
});
});
$(function() {
$("#joindate").focus(function() {
$(this).datepicker().datepicker( "show" )
});
});
</script>
this function called after onfocus event:
<tr>
<td align="left">
<input type="text" id="birthdate" name="birthdate" onfocus="$('#birthdate').datepicker({changeMonth: true,changeYear: true,dateFormat: 'dd/mm/yy',defaultDate: '-20y -1m -247d',yearRange: '-50:+0'});" tabindex="14" style="width:300px; " value="<? if($get_emp!='0')echo $employee_birth; ?>" /><span style="color:#F00;">*</span></td>
<td>
<input type="text" name="joindate" id="joindate" onfocus="$('#joindate').datepicker({changeMonth: true,changeYear: true,dateFormat: 'dd/mm/yy',defaultDate: '-3y -1m -247d',yearRange: '-50:+0'});" tabindex="15" style="width:300px; " value="<? if($get_emp!='0')echo $employee_join; ?>"/><span style="color:#F00;">*</span>
</td>
</tr>
after ajax call I call the same code but it not opens on first click , however it opens on second click?
please help me to sort out this problem..........................
Use this javascript. You only need to initialize the datepicker() once
$(function() {
$('#birthdate').datepicker({changeMonth: true,changeYear: true,dateFormat: 'dd/mm/yy',defaultDate: '-20y -1m -247d',yearRange: '-50:+0'});
$("#joindate").datepicker({changeMonth: true,changeYear: true,dateFormat: 'dd/mm/yy',defaultDate: '-3y -1m -247d',yearRange: '-50:+0'});
$("#birthdate, #joindate").focus(function() {
$(this).datepicker( "show" )
});
});
I removed the focus attribute from the input tags:
<input type="text" id="birthdate" name="birthdate" tabindex="14" style="width:300px; " value="<? if($get_emp!='0')echo $employee_birth; ?>" /><span style="color:#F00;">*</span></td>
<input type="text" name="joindate" id="joindate" " tabindex="15" style="width:300px; " value="<? if($get_emp!='0')echo $employee_join; ?>"/><span style="color:#F00;">*</span>
Try something like this instead:
$(document).ready(function(){
$("#joindate").datepicker({
// Options and methods here
});
$("#joindate").focus(function(){
$("#joindate").datepicker("show");
});
$("#joindate").focus();
});
You can also do a $.post() on the "onSelect" event, should you want to post the date on the actual click event of the date, instead of having to tie it to a form submit.