I am using this form:
<form class="" method="post" action="">
<input type="hidden" class="old_name" name="old_name" value="<?php echo $dir . '/' . $file; ?>" />
<input type="text" class="new_name form-control" name="new_name" value="" />
<input type="submit" class="submitmodal rename btn " value="Rename" />
</form>
This is my ajax:
// RENAME
$(document).on("click", ".rename", function() {
var old_name = $(this).val(); //getting value of old name
var new_name = $(".new_name").val(); //getting value of new name
$.ajax({
url:"actions.php",
method:"POST",
data:{ old_name:old_name, new_name:new_name },
success:function(data) {
$('.echo').html(data);
}
});
});
And this the php part actions.php to check if he gets the values:
if( isset($_POST['new_name']) ){
echo $_POST['old_name'] . '<br />' . $_POST['new_name'];
I do not get an echo at all in the <div class="echo"></div>. What is wrong with the code?
This is a tested solution. If not working please specify the problem (share error messages)
PHP
if( isset($_POST['new_name']) ){
echo $_POST['old_name'] . ' / ' . $_POST['new_name'];
}
HTML
<form class="" method="post" action="">
<input type="hidden" class="old_name" name="old_name" value="This is the Old Name" />
<input type="text" class="new_name form-control" name="new_name" value="This is the New Name" />
<button type="submit" class="rename btn" value="Rename">Submit Form</button>
</form>
JQuery
$(function(){ // this configuration will occur after full html is loaded
$("form").submit(function(e){
e.preventDefault(); // prevent form default submit action
var old_name = $(".old_name").val(); //<--use class .old_name
var new_name = $(".new_name").val();
$.ajax({
url:"php/#principal.php",
method:"POST",
data:{ old_name:old_name, new_name:new_name },
success:function(data) {
console.log(data);
}
});
});
});
Note the result will be displayed in your browser console console.log(data)
There are a few problems with your example
The form has no action. It will post back to itself.
Your submit handler does not call e.preventDefault()
You shouldn't class selectors for the form fields and button. Use ids and id selectors. They are meant to be unique.
Here's a fully working example:
<?php
$dir = '/somedir/';
$file = 'somefile.txt';
if (isset($_POST['old_name']) && isset($_POST['new_name']) ) {
echo $_POST['old_name'] . '<br />' . $_POST['new_name'];
exit();
}
?>
<!doctype html>
<html lang="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="renameForm" method="POST" action="ajax.php">
<input type="hidden" class="old_name" id="old_name" name="old_name" value="<?php echo $dir . '/' . $file; ?>" />
<input type="text" class="new_name form-control" id="new_name" name="new_name" value="" />
<input type="submit" class="submitmodal rename btn " value="Rename" />
</form>
<div id="echo">
</div>
<script>
$("#renameForm").submit(function(e) {
e.preventDefault();
var old_name = $("#old_name").val(); //getting value of old name
var new_name = $("#new_name").val(); //getting value of new name
$.ajax({
url: $(this).attr("action"),
method: $(this).attr("method"),
data: {
old_name: old_name,
new_name: new_name
}
}).done(function(response){ //
$("#echo").html(response);
});
});
</script>
</body>
</html>
Related
I have currently this html:
<td>
<input type="hidden" class="old_name" name="old_name" value="folder1/image.jpg" />
<input type="text" class="new_name" name="new_name" value="" />
<button type="submit" class="rename">Rename</button>
</td>
<td>
<input type="hidden" class="old_name" name="old_name" value="folder2/image.jpg" />
<input type="text" class="new_name" name="new_name" value="" />
<button type="submit" class="rename">Rename</button>
</td>
<td>
<input type="hidden" class="old_name" name="old_name" value="folder3/image.jpg" />
<input type="text" class="new_name" name="new_name" value="" />
<button type="submit" class="rename">Rename</button>
</td>
My jquery ajax looks like this:
// AJAX for rename files
$(document).on('click' , '.rename' , function() {
var old_name = $(".old_name").val(); // getting old value from input
var new_name = $(".new_name").val(); //getting new value from input
$.ajax({
url:"",
method:"POST",
data:{
old_name:old_name ,
new_name:new_name
},
success:function(data){
// here comes echo
}
});
});
My php:
if( isset($_POST["old_name"]) && isset($_POST["new_name"]) ) {
echo $_POST["old_name"];
echo $_POST["new_name"];
First problem: when click on Rename second button, it echos the old_name from first button. So how can i catch the second value old_name when click on second Rename button?
Second problem: php does not echo the $_POST["new_name"]
How can i achieve this without using a form?
First problem solution
use different name (in your specific case different class name ) for different input
<td>
<input type="hidden" class="old_name1" name="old_name" value="folder1/image.jpg" />
<input type="text" class="new_name1" name="new_name" value="" />
<button type="submit" class="rename1">Rename</button>
</td>
<td>
<input type="hidden" class="old_name2" name="old_name" value="folder2/image.jpg" />
<input type="text" class="new_name2" name="new_name" value="" />
<button type="submit" class="rename2">Rename</button>
</td>
<td>
<input type="hidden" class="old_name3" name="old_name" value="folder3/image.jpg" />
<input type="text" class="new_name3" name="new_name" value="" />
<button type="submit" class="rename3">Rename</button>
</td>
new js function will be
$(document).on('click' , '.rename1' , function() {
var old_name = $(".old_name1").val(); // getting old value from input
var new_name = $(".new_name1").val(); //getting new value from input
$.ajax({
url:"",
method:"POST",
data:{
old_name:old_name ,
new_name:new_name
},
success:function(data){
// here comes echo
}
});
});
$(document).on('click' , '.rename2' , function() {
var old_name = $(".old_name2").val(); // getting old value from input
var new_name = $(".new_name2").val(); //getting new value from input
$.ajax({
url:"",
method:"POST",
data:{
old_name:old_name ,
new_name:new_name
},
success:function(data){
// here comes echo
}
});
});
$(document).on('click' , '.rename3' , function() {
var old_name = $(".old_name3").val(); // getting old value from input
var new_name = $(".new_name3").val(); //getting new value from input
$.ajax({
url:"",
method:"POST",
data:{
old_name:old_name ,
new_name:new_name
},
success:function(data){
// here comes echo
}
});
});
Second problem solution
you probably leave the field empty
I have a php function:
<?php
function send_message($userid, $projectid, $message) {
//some code
}
$userid = '1';
$projectid = '2';
$message = 'hello';
?>
<form id="myform" method="post" action="">
<textarea name="message" id="project-message"></textarea>
<input type="submit" name="send" value="send message">
</form>
I want the submit button to do jQuery Ajax so my page won't refresh:
js:
$('#myform').on('submit',function(e) {
e.preventDefault();
$.ajax({
url: //my valid url,
type: 'post',
dataType : 'json',
data: {
action: 'send_message', //this is the PHP function
projectid: projectid //how do I write this?,
userid: userid //how do I write this?,
message: message//how do I write this?'
},
})
.done(function(data) { console.dir(data);; })
.fail(function(jqXHR) { alert('You are fail. ' + jqXHR); });
});
On my error.log, I get NULL for the 3 parameters because I'm not sure how to access them from my PHP. How do you access the PHP variables from jQuery?
Put your PHP variables into hidden inputs so they'll be automatically sent when it is submitted.
For example : <input type="hidden" name="userid" value="1">
Serialize the form data : var formData = $(form).serialize();
On submit attach your form data :
$.ajax({
url: admin_ajax.ajax_url,
type: 'POST',
data: formData
})
Access it from PHP with a classic way : $_POST['userid']
<form id="insert_form">
<textarea name="message" id="project-message"></textarea>
<input type="submit" name="send" id="send" value="send message">
<input type="hidden" name="userid" id="userid" value="<?php echo $userid= '1'; ?>">
<input type="hidden" name="projectid" id="projectid" value="<?php echo $projectid='2'; ?>">
<input type="hidden" name="message" id="message" value="<?php echo $message=
'hello'; ?>">
</form>
var project-message=document.getElementById('project-message').value;
var send=document.getElementById('send').value;
var userid=document.getElementById('userid').value;
var projectid=document.getElementById('projectid').value;
var message=document.getElementById('message').value;
$.ajax({
url:"your_url.php",
type:"POST",
data:$('#insert_form').serialize(),
success:function(data)
{
}
})
You can get all the values of the form, and submit it.
Also you can set other the values in the form as hidden.
<form id="myform" method="post" action="" id='form1'>
<textarea name="projectMessage" id="project-message"></textarea>
<input type="submit" name="send" value="send message">
<?php print "<input type='hidden' value='$userid' > "; name='userid' ?>
<?php print "<input type='hidden' value='$projectid' > "; name='projectid' ?>
<?php print "<input type='hidden' value='$message' > "; name='message' ?>
</form>
$('#myform').on('submit',function(e) {
e.preventDefault();
$.ajax({
url: admin_ajax.ajax_url,
type: 'post',
dataType:'json',
data: $("#form1").serialize(),
})
.done(function(data) { console.dir(data);; })
.fail(function(jqXHR) { alert('You are fail. ' + jqXHR); });
});
I like this approach because I can reuse the ajax multiple times or even create a generic function to submit the form on the background with ajax. Also I can fill the form using a for each loop in php, having all the values in an array (like a database result)
ex.
<?php
foreach($values as $k=>$v}{
print "<input name='$key' value='$v'>\n";
}
?>
I have two page one customform.php and another is preview.php.
I want to send some data which are values of some text-fields on customform.php using jquery post method. But I dont want the page to load. So I have used some JQuery code for this work. But now working for me.
the html code on customform.php is:
<form action="#" method="post">
<input type="text" value="" id="text1">
<input type="text" value="" id="text2">
<input type="button" value="preview" id="preview">
</form>
The jQuery code on customform.php is:
$('#previewph').click( function() {
var v1 = $.('#text1').val();
var v2 = $.('#text2').val();
alert("Mail: " + v1 + " Message: " + v2);
$.post( "http://www.lexiconofsustainability.com/lex_tmp2/preview/" ,{ name : v1 , title :v2 });
window.open("http://www.lexiconofsustainability.com/lex_tmp2/preview/", '_blank');
});
And on the preview.php I want to retrieve value form post method and echo them.
<?php
echo $authorname = $_POST['name'];
echo $posttitle = $_POST['title'];
?>
Simply Try this
<form action="#" method="post" >
<input type="text" value="" id="text1">
<input type="text" value="" id="text2">
<input type="submit" value="preview" id="preview" onclick="senddata()" >
</form>
<div id="message"></div>
function senddata() {
var v1 = $.('#text1').val();
var v2 = $.('#text2').val();
$.post("http://www.lexiconofsustainability.com/lex_tmp2/preview/", { name : v1 , title :v2 },
function(data) {
document.getElementById("message").innerHTML = data;
});
}
You can use AJAX for this..
The jQuery code on customform.php should be:
$('#previewph').click( function() {
var v1 = $('#text1').val();
var v2 = $('#text2').val();
$.post("preview.php", {name:v1, title:v2}, function(data)
{
alert(data);
});
});
preview.php
<?php
if(isset($_POST['name'])&&($_POST['title']))
{
echo $authorname = $_POST['name'];
echo $posttitle = $_POST['title'];
}
?>
Hi would you like to help me. im a php newbie. I want to insert employment information in my database and hide da div where the form placed.
HTML:
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<form name="empform" method="post" action="profile.php" autofocus>
<input name="employ" type="text" id="employ" pattern="[A-Za-z ]{3,20}"
placeholder="Who is your employer?">
<input name="position" type="text" id="position" pattern="[A-Za-z ]{3,20}"
placeholder="What is your job description?">
<input name="empadd" type="text" id="empadd" pattern="[A-Za-z0-9##$% ]{5,30}"
placeholder="Where is your work address?">
<input name="empcont" type="text" id="empcont" pattern="[0-9]{11}" title="11-digit number"
placeholder="Contact number">
<input name="btncancel" type="button" class="btncancel" value="Cancel"
style="width:60px; border-radius:3px; float:right">
<input name="btndone" type="submit" class="btndone" value="Done" style="width:60px; border-radius:3px; float:right">
</form>
</div>
</div>
PHP:
if (isset($_POST['btndone'])) {
$employ = $_POST['employ'];
$position = $_POST['position'];
$empadd = $_POST['empadd'];
$empcont = $_POST['empcont'];
$empdate = $_POST['empdate'];
$empID = $alumniID;
$obj - > addEmployment($employ, $position, $empadd, $empcont, $empdate, $empID);
}
JS:
<script>
$(function () {
function runEffect() {
var selectedEffect = "highlight";
$(".toggler").show(selectedEffect);
};
function runDisplay() {
var selectedDisplay = "highlight";
$("#empdisplay").show(selectedDisplay);
};
$(".btncancel").click(function () {
$(".toggler").hide();
return false;
});
$(".btndone").click(function () {
runDisplay();
$(".toggler").hide();
return false;
});
}
</script>
Hi this is what I'll do
var request = $.ajax({
url: "profile.php",
type: "POST",
data: $('#form').serialize()
});
request.done(function(msg) {
$('#form').hide();
});
request.fail(function(jqXHR, textStatus) {
alert( "Form failed" );
});
If you have some doubts with Jquery's Ajax visit this link
If you don't understand what jqXHR is, I suggest you visit this link http://www.jquery4u.com/javascript/jqxhr-object/
Execute on click
$('#form').submit(function(){
var request = $.ajax({
url: "profile.php",
type: "POST",
data: $('#form').serialize()
});
request.done(function(msg) {
$('#form').hide();
});
request.fail(function(jqXHR, textStatus) {
alert( "Form failed" );
});
});
Try This
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<form id="empform" name="empform" method="post" action="profile.php" autofocus>
<input name="employ" type="text" id="employ" pattern="[A-Za-z ]{3,20}"
placeholder="Who is your employer?">
<input name="position" type="text" id="position" pattern="[A-Za-z ]{3,20}"
placeholder="What is your job description?">
<input name="empadd" type="text" id="empadd" pattern="[A-Za-z0-9##$% ]{5,30}"
placeholder="Where is your work address?">
<input name="empcont" type="text" id="empcont" pattern="[0-9]{11}" title="11-digit number"
placeholder="Contact number">
<input name="btncancel" type="button" class="btncancel" value="Cancel"
style="width:60px; border-radius:3px; float:right">
<input id="submit"name="btndone" type="submit" class="btndone" value="Done" style="width:60px; border-radius:3px; float:right">
</form>
</div>
</div>
<script>
$(document).ready(function() {
//$("#form").prev
$('#submit').click(function(event) {
//alert (dataString);return false;
event.preventDefault();
$.ajax({
type: "POST",
url: 'profile.php',
dataType:"html",
data: $("#empform").serialize(),
success: function(msg) {
alert("Form Submitted: " + msg);
//alert($('#form').serialize());
$('div.toggler').hide();
}
});
});
});
</script>
</html>
PHP
profile.php
<?php
if (isset($_POST)) {
$employ = $_POST['employ'];
$position = $_POST['position'];
$empadd = $_POST['empadd'];
$empcont = $_POST['empcont'];
$empdate = $_POST['empdate'];
$empID = $alumniID;
$obj - > addEmployment($employ, $position, $empadd, $empcont, $empdate, $empID);
}
?>
Iam not sure about your fields
echo $empdate = $_POST['empdate'];
$empID = $alumniID;
they are not in form but works!...
You should do an ajax call to save your data and then hide the div, someting like this :
$('form[name="empform"]').submit(function(e) {
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize(), function(data) {
$('div.toggler').hide();
});
});
i am using the following code to auto-submit a form
<script type="text/javascript">
$(function () {
$('#submit').click();
});
</script>
<div style="display:none">
<form method="post" action="http://mydomain/texting/register.php?list_id=15">
<input type="hidden" name="name" value="<?php echo $_SESSION['name2']; ?>" />
<input type="hidden" name="email" value="<?php echo $_SESSION['email2']; ?>" />
<input type="hidden" name="ok" value="1" />
<input type="submit" id="submit" value="Sign Up" style="visibility:hidden;" />
</form>
</div>
i want to submit the same data to two urls ...
http://mydomain/texting/register.php?list_id=15
http://mydomain.com/texting/register.php?list_id=<?php echo $_SESSION['city2']; ?>
how can edit my code to submit same form data automatically?
i tried this code
<script type="text/javascript">
function submitTwice(f){
f.action = 'http://mydomain.com/texting/register.php?list_id=<?php echo $_SESSION['city2']; ?>';
f.target='ifr1';
f.submit();
f.action = 'http://mydomain.com/texting/register.php?list_id=15';
f.target='ifr2';
f.submit();
}
</script>
*/
<script type="text/javascript">
$(function () {
$('submitTwice(f)').click();
});
</script>
<div style="display:none">
<iframe name="ifr1" width="20" height="20">
<form method="post" action="http://mydomain.com/texting/register.php?list_id=<?php echo $_SESSION['city2']; ?>">
<input type="hidden" name="name" value="<?php echo $_SESSION['name2']; ?>" />
<input type="hidden" name="email" value="<?php echo $_SESSION['email2']; ?>" />
<input type="hidden" name="ok" value="1" />
<input type="submit" id="submit" value="Sign Up" style="visibility:hidden;" />
</form></iframe>
</div>
<div style="display:none"><iframe name="ifr2" width="20" height="20">
<form method="post" action="http://mydomain.com/texting/register.php?list_id=15">
<input type="hidden" name="name" value="<?php echo $_SESSION['name2']; ?>" />
<input type="hidden" name="email" value="<?php echo $_SESSION['email2']; ?>" />
<input type="hidden" name="ok" value="1" />
<input type="submit" id="submit" value="Sign Up" style="visibility:hidden;" />
</form></iframe>
</div>
but it is not working, any suggestion to make it happen, the same data is to be sent to both the urls automatically using javascript
You can use jQuerys ajax and send the data with post, to both the urls.
first save all data you want to send in an valid data array. if you want it automated, you can do something like this:
var sendData = {};
$("#formId").find("input").each(function(i, item){
sendData[item.name] = item.value;
});
or as a simple string:
var sendData = "name=value&email=value";
then send the form data to both urls with ajax, as post type:
$.ajax({ url: "http://url1/", type: "POST", data: sendData,
success: function(response){
alert(response);
}
});
$.ajax({ url: "http://url2/", type: "POST", data: sendData,
success: function(response){
alert(response);
}
});
Note: make sure to return false to the button or sending form, you can do that something like:
$("formId").submit(function(){
// do ajax send data
return false;
}
EDIT: added unchecked code for this, with comments
$(document).ready(function(){
// grab the form and bind the submit event
$("#formId").submit(function(){
// collect all the data you want to post
var sendData = {};
this.find("input").each(function(i, item){
sendData[item.name] = item.value;
});
// send the request to both urls with ajax
$.ajax({ url: "url1", type: "POST", data: sendData,
success: function(response){
// handle response from url1
alert(response);
}
});
$.ajax({ url: "url2", type: "POST", data: sendData,
success: function(response){
// handle response from url2
alert(response);
}
});
// return false, to disable default submit event
return false;
});
});
just send name and email to the server script in a regular form,
then do two requests from within your register.php with something like HttpRequest or the like...
some freehand code:
client:
<form id="autoSubmitForm" method="post" action="/register.php?list_id=15">
<input type="hidden" name="name" value="<?php data['name2']; ?>" />
<input type="hidden" name="email" value="<?php data['email2']; ?>" />
<input type="submit" name="submit" value="Sign Up" style="visibility:hidden;" />
</form>
<script>
$(document).ready(function(){
$('#autoSubmitForm').submit();
});
</script>
server:
<?php
$name = $_POST["name2"];
$email = $_POST["email2"];
$url1 = 'http://lala'; //or relative to server root: '/lala'
$url2 = 'http://other';
sendRequest($url1, $name, $email);
sendRequest($url2, $name, $email);
?>
The implementation of sendRequest is worth another question (or reading the documentation of HttpRequest mentioned above)
Good luck, I see your duplicate question got closed...