AJAX post variables to current page via href onclick - Jquery Mobile/PHP - javascript

I am creating an application that utilizes JQuery Mobile and PHP, nothing crazy here. I am trying to update a $_POST[''] variable on the page I am currently viewing.
The user clicks on an "Issue_Title" to add "Issue_Txt" to that particular list. So I need a way to know which issue_title the user clicks on so I can add it to the right place. To solve that when I retrieve the issue_title from mySQL table I format like so (testTitle is just a placeholder for debugging...I want $row['issue_title'] there so I can distinguish which title was clicked):
echo "<li data-role='fieldcontain'>"."".$row['issue_title']."</li>";
So onclick it will run the below JS function:
function NewIssueTxt(issue_title)
{
var combined = {'issue_title' : issue_title};
combined = $('#HiddenIssueTxtForm').serialize() + '&' + $.param(combined);
$.ajax({type:'POST', url: 'NewRoundDetails.php', data: combined, success: function(response){ }});
return false;
};
I can see via Javascript Console that this is POSTing as expected when I click the listview link. This should give me a $_POST['issue_title'] that I can use to submit along with the issue_txt which is all captured in the below form...which is a popup form that also appears when the user clicks the Issue_Title href.
<div data-role="popup" id="popupNewIssueTxt" data-history='false' data-theme="a" class="ui-corner-all">
<form id="NewIssueTxtForm" action="/NewRoundDetails.php" onsubmit="return submit_popupNewIssueTxt();" method="post">
<div style="padding:10px 20px;">
<h3>Issue Text:</h3>
<label for="issue_txt" class="ui-hidden-accessible">Issue Text:</label>
<input type="text" name="issue_txt" id="issue_txt" value="" />
<label for="issue_title" class="ui-hidden-accessible">Issue Title</label>
<input type="hidden" name="issue_title" id="issue_title" value="<?php echo $_POST['issue_title']; ?>"/>
<label for="date" class="ui-hidden-accessible">Date:</label>
<input type="hidden" name="date" id="date" value="<?php echo $_POST['date']; ?>"/>
<label for="dept_name" class="ui-hidden-accessible">Department Name:</label>
<input type="hidden" name="dept_name" id="dept_name" value="<?php echo $_POST['dept_name']; ?>"/>
<label for="participants" class="ui-hidden-accessible">Participants:</label>
<input type="hidden" name="participants" id="participants" value="<?php echo $_POST['participants']; ?>"/>
<label for="issue_category" class="ui-hidden-accessible">Issue Category:</label>
<input type="hidden" name="issue_category" id="issue_category" value="Work Environment"/>
<button id="NewIssueTxtButton" form="NewIssueTxtForm" type="submit" data-theme="b">Add</button>
</div>
</form>
As mentioned I confirmed the JS function is working...except I still have no value for $_POST['issue_title']. What am I doing wrong? Is the JS function not submitted fast enough...so I click the Issue_title but my form is opened before the POST happens? If that's the case how else can I get the href clicked into a usable variable?
To reiterate: I'm populating a listview with data from a mySQL DB. I need a way of knowing which link or listview is clicked so I can POST it along with other form data.

Related

prevent result, show through AJAX, after reload browser

I have a insert query through ajax. It is working correctly. But when I reload browser then result disappears from div section and if I insert form through ajax again then result is showing.
I have a file first.php (in which, form is present), a AJAX code and a firstcall.php where query will be execute.
My first.php (html form) is:
<form class="reservation-form mb-0" action="" method="post" autocomplete="off">
<input name="name1" id="name1" class="form-control" type="text" placeholder="Enter Name" required aria-required="true">
<input name="age" id="age" class="form-control" required type="number" placeholder="Enter Age" aria-required="true">
<input type="checkbox" id="checkbox" class="checkbox1" name="namec[]" value="<?php echo $value['id']; ?>" >
<input type="button" class="pull-right btn btn-warning" value="Submit" id="submit">
</form>
Here data should be display:
<div class="col-md-5">
<div class="panel panel-primary" id="showdata">
<!-- Here is the results, but when reload browser then result disapper-->
</div>
</div>
AJAX is:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name1 = $("#name1").val();
var age = $("#age").val();
var chkArray=[];
$('.checkbox1:checked').each( function() {
chkArray.push($(this).val());
} );
var selected;
selected = chkArray.join(',') ;
if(selected.length > 1){
$.ajax( {
url:'firstcall.php',
type:'POST',
data:{name1: name1,age: age,namec: chkArray},
}).done(function(data){
$("#showdata").html(data);
});
}
else{
alert("Please at least one of the checkbox");
}
});
});
</script>
firstcall.php is:
<div class="panel panel-primary" id="showdata">
<?php
foreach($_POST['namec'] as $selected){
echo $selected;
$_SESSION['name1']=$_POST["name1"];
$_SESSION['age']=$_POST["age"];
echo $name1=$_SESSION['name1'];
echo $age=$_SESSION['age'];
$query=mysql_query("insert into patient_details (p_name,p_age,g_number) values ('$name1','$age','$selected')") or die(mysql_error());
}
?>
First of all fix your query to use MySQLi, instead of MySQL, check this or the PHP manual
Also don't ever add direct $_POST or $_GET variables into your mysql query, filter them first using mysqli_real_escape.
$name1 = mysqli_real_escape($link, $_POST["name1"]);
$age = mysqli_real_escape($link, $_POST["age"]);
After that, to show the data when the page reloads, you need to load the data with the page, easiest way to do that is just add in your HTML PHP tags with an echo command inside, adding your variables.
If I understand your question correctly, you want the Ajax result to also show on page load?
Right now you only execute the JS after a click (so on page load/relaod you will just see the html), you might want to execute it after page load aswell (so execute the script without the .click)
You could create a function once, and call it when the page is ready and on click.

Best way to upload files using Ajax and before submitting

I have a form with multiple fields but also a file upload. I am able to upload multiple files.
I also know that it is possible to upload files with AJAX.
So I would like to upload my files using ajax while i'm filling in every other field. But how would I link the already uploaded images then? And also prevent the images to be uploaded again?
This is the form:
<form id="form_validation" method="POST" action="{{route('storeexpense')}}" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group form-float">
<div class="form-line">
<input type="text" class="form-control" name="description" required>
<label class="form-label">Omschrijving</label>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="number" class="form-control" name="amount" required>
<label class="form-label">Bedrag</label>
</div>
</div>
<div class="form-group form-float">
#foreach ($types as $type)
#if ($type->id === 1)
<input name="transactiontype" type="radio" id="rdio{{$type->id}}" value="{{$type->id}}" checked />
<label for="rdio{{$type->id}}">{{$type->description}}</label>
#else
<input name="transactiontype" type="radio" id="rdio{{$type->id}}" value="{{$type->id}}" />
<label for="rdio{{$type->id}}">{{$type->description}}</label>
#endif
#endforeach
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="text" class="datepicker form-control" name="date" placeholder="Please choose a date..." required>
<!-- <label class="form-label">Datum</label> -->
</div>
</div>
<div class="form-group demo-tagsinput-area">
<div class="form-line">
<input type="text" class="form-control" id="tagsinput" data-role="tagsinput" placeholder="Labels" name="tags" required>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
#if (count($errors) > 0)
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
#endif
<input type="file" name="attachments[]" multiple class="custom-file-control"/>
</div>
</div>
<button class="btn btn-primary waves-effect" type="submit">SAVE</button>
</form>
This is the PHP code that saves the information from the form:
public function store(UploadRequest $request)
{
// Save new transaction in database
$transaction = new Transaction;
$transaction->description = $request->description;
$transaction->amount = $request->amount;
$input = $request->date;
$format = 'd/m/Y';
$date = Carbon::createFromFormat($format, $input);
$transaction->date = $date;
$transaction->transactiontype_id = $request->transactiontype;
$transaction->user_id = Auth::id();
$transaction->save();
// Put tags in array
$inputtags = explode(",", $request->tags);
// Loop through every tag exists
// EXISTS: get ID
// NOT EXISTS: Create and get ID
foreach ($inputtags as $inputtag)
{
$tag = Tag::firstOrCreate(['description' => $inputtag]);
$transaction->tags()->attach($tag->id); //Put the 2 ID's in intermediate table ('tag_transaction')
}
//Check if there are files
if (!is_null($request->attachments))
{
//Loop through every file and upload it
foreach ($request->attachments as $attachment) {
$filename = $attachment->store('attachments');
// Store the filename in the database with link to the transaction
Attachment::create([
'transaction_id' => $transaction->id,
'path' => $filename
]);
}
}
Thanks,
Bart
It sounds like you want to make a fancy form that starts uploading the file as soon as you choose it and meanwhile the user can continue filling the rest of the form. If so, I'd do it like this:
Implement your main text/data form, eg.
<form method="POST" action="/save-data-endpoint.php">
<input name="email" type="text" />
<button type="submit>Submit</button>
</form>
Next to it, a form for the images. eg.
<form method="POST" class="file-upload-form" action="/save-file.php">
<input name="my-file" type="file" />
<!-- note that we wont show a submit button -->
</form>
For the user, it all looks like the same form but clicking the submit button will send only the data to the save-data-endpoint.php. Now we need some js to control this madness (I'll use jQuery for brevity). But you can use FileReader api in js, ajax progress tracking to make it even fancier. See https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications for more.
$(function(){ // run when document is ready
// listen when the input changes (when a file is selected)
$('.file-upload-form').on('change', function(e){
// file has been selected, submit it via ajax
// show some kind of uploading indication, eg. a spinner
$.ajax({
type:'POST',
url: $(this).attr('action'),
data: new FormData(this),
cache:false,
contentType: false,
processData: false,
success:function(data){
// the save-file.php endpoint returns an id and/or a url to the saved/resized/sanitized image
console.log(data.id, data.url);
// we then inject this id/url, into the main data form
var $hiddenInput = $('<input type="hidden" name="uploads[]" value="'+data.id+'">');
$('.main-form').append($hiddenInput);
// show a thumbnail maybe?
var $thumbnail = $('<img src="'+data.url+'" width="20" height="20" />');
$('.main-form').append($thumbnail);
// hide spinner
// reactivate file upload form to choose another file
$('.file-upload-form').find('input').val('');
},
error: function(){
console.log("error");
}
});
});
});
Your backend will get the images as they are selected, one by one. You then save them and return an id and/or a url to the image to be used in the success handler in js. After adding some images your main form should look something like this:
<form method="POST" action="/save-data-endpoint.php">
<input name="email" type="text" />
<button type="submit>Submit</button>
<input type="hidden" name="uploads[]" value="x">
<img src="...x.jpg" width="20" height="20" />
<input type="hidden" name="uploads[]" value="y">
<img src="...y.jpg" width="20" height="20" />
</form>
Now when the user fills the remaining fields and clicks submit, your server will get all the data along with an array called uploads which contains all the image ids/paths you have already saved. You can now store this data and relate it to the files.
I wont go deeper on the backend side as it can be implemented on any language. In summary the basic flow would be:
send files one at a time to a save file endpoint that returns a file identifier (can be an id, hash, full path to image, etc)
js injects those ids into the main form
the main form is submitted to a save data endpoint that returns a success or error message and stores + relates all the data in your preferred method of storage.
Hope it helps!

I want to use onclick function to get data from HTML Form inside php loop to use it in Ajax

I'm developing discussion board and I want to make a reply system on each comment using jquery.
I created certain div inside a loop with different values in each iteration.
Now I'm working on submitting the reply form and I have a problem. It works only on the first comment. When I reply to the first comment only It works but when replying to any other comment It doesn't work and give me my error message the textbox is empty Then I realized that it reads data from the first form only through the loop.
Here is the code.
<div class="comment_form">
<textarea class="span10" id="replyC" name="replyC" placeholder="Reply comment" rows="6">
</textarea><br>
<input id="commentId" name="commentId" type="hidden" value="<?php echo $CommentID;?>">
<input id="userId" name="userId" type="hidden" value="<?php echo $uId;?>">
<input id="articleId" name="articleId" type="hidden" value="<?php echo $ArticleID; ?>">
<input class="btn btn-lg btn-default replyForm" id="<?php echo $CommentID; ?>" name="replyForm" type="submit" value="Reply">
</div>
The button with class name "replyForm" I get it by
$(".replyForm").click(function()
and here is the javascript and Ajax code.
$(".replyForm").click(function(){
//$(this).parents().next('.replyForm').click(function(){
var user_reply = $("#replyC").val();
var userId = $("#userId").val();
var comment_id = $("#commentId").val();
var articleId = $("#articleId").val();
$.ajax({
url:'articleReply.php',
data:{replyC:user_reply,userId:userId,commentId:comment_id,articleId:articleId},
type:'POST',
success:function(data){
$("#resultReply").html(data);
$('#replyC').val('');
}
});
});
The problem Now .. It doesn't work on all comments retrieved from the loop but works only on the first comment while trying reply on other comments I get my empty message appears under the first comment.
So it get data from the first comment only not from the rest.
Any help ??
Here it works:
Here is the problem:

auto fill current page url to html form input

I have html form using to send feedback by php email.
In one input I want to save url of current page. Where user hit feedback button.
I want to track from which web page user is sending feedback.
Here is my code.
I found php code but its not working
Please help.
<input class="inputst" name="s_link" type="text" value="<?php $dataUrl = "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>" name="productlink"><br>
<input type="submit" class="inputbtn" name="submit" style="margin-top:30px; float:right; margin-right: 15px;" value="Submit">
Instead of:
<input class="inputst" name="s_link" type="text" value="<?php $dataUrl = "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>" name="productlink">
Try:
<input class="inputst" name="s_link" type="text" value="<?php echo 'http://'.$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>" name="productlink">
Hope this helps!
try
<?php echo "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>
you are assigning a variable instead of echoing it..

Submit form using one button, one to emailmeform using html script and another to my internal database

Im sorry for my bad english.
Im begineer with PHP and all coding method.
I've been searching this for a days and still cannot find what I need lack to my understanding especially with php, java or ajax.
I have an emailmeform form and I have my own form on 1 php file which I want when client submit the send button, it will save the data entered previously by client to my internal database and send it to emailmeform in the same time but I cannot make this happen.
The solution I think will work is maybe ajax or javascript, but since lack of my knowledge with those codes I cannot solve this issue by my self.
Here's my code (all in 1 php script page):
<?php
session_start();
include "connection/database.php";
$sql = mysql_query("SELECT * from tb_config");
$config = mysql_fetch_array($sql);
if (isset($_POST['send'])) {
$username = $_POST['element_1'];
$password = $_POST['element_2'];
$referral = $_POST['referral'];
$a = mysql_num_rows(mysql_query("SELECT * from tb_member where username='$username'"));
if (empty($username) || empty($password)) {
echo "<script> alert('Please fill all the required form!!'); </script>";
} else if (strlen($_POST['element_2']) < 6) {
echo "<script> alert('Password at least 6 digit!!!'); </script>";
} else {
$save = mysql_query("insert into tb_member(username,password) values ('$username','$password')");
exit;
}
}
?>
<!-- this is emailmeform scipt -->
<form id="emf-form" target="_parent" class="leftLabel" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/emf/to/ref">
<div id="emf-form-description"><h2>Form Register</h2></div>
</div>
<ul>
<li id="emf-li-0" class="emf-li-field emf-field-text data_container ">
<label class="emf-label-desc" for="element_0">Your Name</label>
<div class="emf-div-field"><input id="element_0" name="element_0" value="" size="30" type="text"
class="validate[optional]"/><div class="emf-div-instruction">Please fill your name</div></div>
<div class="emf-clear"></div>
</li><li id="emf-li-1" class="emf-li-field emf-field-text data_container ">
<label class="emf-label-desc" for="element_1">Username <span>*</span></label>
<div class="emf-div-field"><input id="username" name="element_1" value="<?php if (isset($_POST['element_1'])) { echo $_POST['element_1']; } ?>" size="30" type="text"
class="validate[required,length[6,15]]"/><div class="emf-div-instruction">At least 6 characters</div></div>
<div class="emf-clear"></div>
</li><li id="emf-li-2" class="emf-li-field emf-field-text data_container ">
<label class="emf-label-desc" for="element_2">Password <span>*</span></label>
<div class="emf-div-field"><input id="element_2" name="element_2" value="" size="30" type="text"
emf_mask_input="true"
class="validate[required,length[6,]]"/><div class="emf-div-instruction">At least 6 characters</div></div>
<li id="emf-li-post-button" class="middle">
<input value="Send" type="submit" name="send" onmouseover="return true;"/>
</li>
</ul>
<input name="element_counts" value="14" type="hidden" />
<input name="embed" value="forms" type="hidden" />
</form>
This script works and send to emailmeform, but wont submit any data to my internal database, BUT IF I change the action button to
<form method="post" action="">, this will submit to my internal database but not send to emailmeform. I want this work together, submit to my database and send it also to emailmeform.
I have struggling with this and still not found the answer.
Kindly please help.
Any help will be appreciated
Thanks
Refer this, it will demostrate how to insert data in database

Categories

Resources