how do i get back textbox value after form submit - php

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>

Related

how do I make two phpmailer contact forms work on the same page

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.

how to send addtional form data in froala editor through ajax request?

I am using froala editor v2, and I need to save the form content through ajax request, so I am tried following way
HTML
<form enctype="multipart/form-data" id="composeForm" action="#" method="post">
<input type="file" name="compose_attachments[]" id="file-7" class="inputfile theme-inputfile" accept=".jpg,.jpeg,.png,.xls,.xlsx,.csv,.pdf,.ppt,.doc,.docx" multiple />
<input type="text" class="form-control inputES" placeholder="Email Subject" name="compose_subject">
<input class="autoTags" type="text" value="" data-role="tagsinput" placeholder="" name="compose_to">
<input class="autoTags" type="text" value="" data-role="tagsinput" placeholder="" name="compose_cc">
<input class="autoTags" type="text" value="" data-role="tagsinput" placeholder="" name="compose_bcc">
<textarea class="froala-editor-mail" id="composeEmailBody" name="compose_body"></textarea>
<button type="button" class="btn btn-green-bs p-lr-30 mr-10" id="SendComposedEmail">SEND</button>
</form>
JS
<script>
var editor_compose = new FroalaEditor('#composeEmailBody', {
// Set the save URL.
saveURL: `${ajaxUrl}?method=sendTestEmail`,
// HTTP request type.
saveMethod: 'POST',
saveParams: new FormData($("#composeForm")[0]),
events: {
'save.before': function () {
// Before save request is made.
showLoader(0);
},
'save.after': function () {
// After successfully save request.
showLoader(1);
},
'save.error': function () {
// Do something here.
alert("Save error;");
}
}
});
document.querySelector('#SendComposedEmail').addEventListener("click", function () {
editor_compose.save.save();
});
</script>
PHP
<?PHP
case 'sendTestEmail':
echo "<pre>";print_r($_POST);print_r($_FILES);exit;
break;
?>
OUTPUT
Array
(
)
$_POST & $_FILES are empty and only got by editor HTML value.
so, I am not able to get formData in ajax request. how to resolve it??

Multiple fileds : remember input values after submit

I have a multiple field input and I want to remember the input values after submitting it , how can I do that using php or maybe another language if it is possible?
I have this input:
<input type="text" name="passport[]" class="form-control" aria-describedby="basic-addon1"required/>
I have tried something like this :
value="<?php if(isset($_POST['passport'])) { echo $_POST['passport'][$i]; } ?>"
but nothing works.
You can use browser local storage to keep the value after form submission.
<form method="post" action="" onSubmit="return saveElement();">
<input type="text" name="passport[]" id="password"/>
<input type="submit" name="submit" value="save"/>
</form>
<script type="text/javascript">
document.getElementById("password").value = localStorage.getItem("password");
function saveElement() {
var passValue = document.getElementById("password").value;
if (passValue == "") {
alert("Please enter a password first!");
return false;
}
localStorage.setItem("password", passValue);
location.reload();
return false;
}
</script>

Trying to get value from textbox in AJAX and sending it to the new page

Having issues pulling the values put in a textbox with ajax and posting them to another .php file. Ive done this once before with a checkbox but wasn't able to duplicate my results. Here is the code for the text boxes in questions.
<div align = "right">
<div class = ='text'>
<span style="float:right;"><strong> Status Report Date</strong>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<div id="dates"></div>
These are my date picker boxes since I attached a datepicker script to them but figured they act as normal text-boxes.
Here is the script for grabbing values from the textboxes
$(document).ready(function(){
$('input[type="text"]').click(function(){
var from = $(this).val();
$.ajax({
url:"sortByDates.php",
method:"POST",
data:{text:text},
success:function(data){
$('#dates').html(data);
}
});
});
});
</script>
Here is the .php file I am trying to send the values to.
<?php
if (isset($_GET['pageSubmit'])) {
$firstDate= $_POST['from'];
$lastDate= $_POST['to'];
echo $firstDate;
echo $lastDate;
}
I think you lost your focus... Check this code out
<div alight = "right">
<div class='text'>
<span ><strong> Status Report Date</strong>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<div id="dates"></div>
<button id="submit">click</button>
Jquery
<script>
$(document).ready(function(){
$('#submit').click(function(){
var from = $('#from').val();
var to = $('#to').val();
ps = "submit";
$.ajax({
url:"sortByDates.php",
method:"POST",
data:{pageSubmit: ps,from:from, to: to},
success:function(data){
$('#dates').html(data);
}
});
});
});
php script
<?php
if (isset($_POST['pageSubmit'])) {
$firstDate= $_POST['from'];
$lastDate= $_POST['to'];
echo $firstDate;
echo $lastDate;
}
?>
Firstly add value="" in the inputs
Then in your js code, you are sending "text" variable which is undefined as your variable is "from".
So try adding : data:{text:from}
You have not passed the values from,to and pagesubmit in ajax.Try this code hope it helps
In ajax
$(document).ready(function(){
$('input[type="text"]').click(function(){
var from = $("#from").val();
var to = $("#to").val();
$.ajax({
url:"sortByDates.php",
method:"POST",
data:{from:from,to:to,pageSubmit:1},
success:function(data){
$('#dates').html(data);
}
});
});
});
In PHP
<?php
if (isset($_GET['pageSubmit'])) {
$firstDate= $_POST['from'];
$lastDate= $_POST['to'];
echo $firstDate;
echo $lastDate;
}
?>
The variable "text" you use in the section
{text:text}
is undefined. So therefore no data will be sent.
Other than that there are other problems here, do you want both values to be sent? Your code doesn't look like it supports that. Are you sure you want this to occur when the user clicks the textbox?.

select box outside my form code

I have a select box outside my form, When the users selects an option, the right form is being shown. But I want to send the value of the selected option together with the form.
<select id="selection" onchange="showForm()">
<option value="iphone">iPhone</option>
<option value="Android">Android</option>
</select>
<form action="iphone.php" method="post" id="form1">
<input type="text name="username" required>
</form>
<form action="android.php" method="post" id="form2">
<input type="text name="username" required>
</form>
Please note: This is a simple example, I want to know how you can send the value of the selectbox outside the form.
Add to each form a hidden input element:
<input type="hidden" name="selection" class="hiddenselection" />
Use javascript to copy the value on change. In jquery something like this:
$('#selection').on('change',function(){
$('.hiddenselection').val($('#selection').val());
})
function showForm(value) {
$.ajax({
type: "POST",
success: function(value){
if(value =='iphone'){
$("#form2").hide();
}else{
$("#form1").hide();
}
}
});
}
Keep the selected value in hidden field form1 and form2
<select id="selection" onchange="showForm(this)">
<option value="iphone">iPhone</option>
<option value="Android">Android</option>
</select>
<form action="iphone.php" method="post" id="form1">
<input type="text" name="username" required />
<input type="hidden" name="selection" id="iphone_selection" />
</form>
<form action="android.php" method="post" id="form2">
<input type="text" name="username" required />
<input type="hidden" name="selection" id="android_selection" />
</form>
<script>
function showForm(THIS){
var thisVal = $(THIS).val();
if(thisVal == 'iphone'){
$('#form2').hide();
$('#form1').show();
$('#iphone_selection').val(thisVal);
//$("#form1").submit();
}
if(thisVal == 'Android'){
$('#form1').hide();
$('#form2').show();
$('#android_selection').val(thisVal);
//$("#form2").submit();
}
}
</script>
<style>
#form1{
display:none;
}
#form2{
display:none;
}
</style>
https://jsfiddle.net/9tms99p5/
Try to include this script on your code.
<script type="text/javascript">
window.onload = function(){
document.getElementById("selection").onchange();
};
function showForm(){
if(document.getElementById("selection").value == "iphone"){
document.getElementById("form1").style.display = "block";
document.getElementById("form2").style.display = "none";
}else if(document.getElementById("selection").value == "Android"){
document.getElementById("form1").style.display = "none";
document.getElementById("form2").style.display = "block";
}
}
</script>

Categories