Div text replace in other div - php

I want class="hotelname" echo text in class="a" and class="hotelname" is hide. is that possible? I used jQuery code but its not working.
<form id="" class="" method="GET" action="http://localhost/blue_bucket/county/" enctype="multipart/form-data">
<h2 class="a"></h2>
<?php
foreach ($query as $row)
{
?>
<h3 class="hotelname"><?php echo $hotelnames = $row->hotel; ?></h3>
<div class="book-it-btn">
<button type="submit" name="submit" class="btn btn-default">Apply</button>
</div>
</form>
<?php
}
?>
Jquery:
jQuery(".a").append(jQuery(".hotelname").html());

As per my understanding you want .hotelname class value to put in .a class then you want to hide .hotelname class element ?
Check the working snippet below
var hotelName = $(".hotelname").text();
$(".a").text(hotelName);
$(document).ready(function() {
var hotelName = $(".hotelname").text();
$(".a").text(hotelName)
$(".hotelname").hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="" class="" method="GET" action="http://localhost/blue_bucket/county/" enctype="multipart/form-data">
<h2 class="a"></h2>
<?php
foreach ($query as $row)
{
?>
<h3 class="hotelname">My hotel</h3>
<div class="book-it-btn">
<button type="submit" name="submit" class="btn btn-default">Apply</button>
</div>
</form>
<?php
}
?>

Related

Why does the value of the hidden input filed gives me the same result alwayes?

First I'm beginner in php, second I'm trying to trace the value of the hidden input which is " the ID of the image in table products ", but whenever I click the delete button of any image, it always gives me the last id of the last image in my products table , and when I changed the input into text it prints the correct id but if I used it with POST it will not work .
Here is the codes :
<?php
if(isset($_POST['delete'])){
$dataBase = mysql_connect("localhost","root","");
mysql_select_db('HouseOfCake');
$PID = $_POST['PID'];
echo $PID ;
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<form method="POST" action="Delete.php">
<div class="container">
<?php
$dataBase = mysqli_connect("localhost","root","" , "HouseOfCake");
?>
<div class="row text-center">
<?php
$r=mysqli_query($dataBase,"SELECT*FROM Products");
while($Products=mysqli_fetch_array($r, MYSQLI_ASSOC)){
?>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card" name= <?php $Products['CakeID']; ?>>
<image src = <?php echo
'data:image/jpg;base64,'.base64_encode($Products['Image']).'' ; ?> />
<div class="card-body">
<h4 class="card-title"> <?php echo $Products['Price']; ?> SR. </h4>
<p class="card-text"> Details.</p>
</div>
<div class="card-footer">
<input type="text" value= "<?php echo $Products['CakeID'] ?>" name="PID" >
<input type = "submit" name="delete" value=" Delete Item."
style="width:250px" >
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</form>
</body>
</html>
To clean up what you are doing, so its easier to understand, you have this in a nutshell:
<form>
while {
<inputs>
}
</form>
What this will do is submit ALL those inputs to PHP. And since each one of the inputs in the while have the same name, PHP will only use the 'last one received'.
You want to have your flow like this:
while {
<form>
<inputs>
</form>
}
That way each form only submits the inputs defined inside of it (not all of them on the page).
So to recap with your code, you would want to have multiple forms on the page as such:
<?php while($Products=mysqli_fetch_array($r, MYSQLI_ASSOC)){ ?>
<form method="POST" action="Delete.php">
<input type="text" value="<?php echo $Products['CakeID'];?>" name="PID">
<input type="submit" name="delete" value="Delete Item." style="width:250px">
</form>
<?php }?>

html form doesn't work after Jquery load()

I have a problem with jQuery load() and html forms.
After loading a div from a php. file into a div, the form doesn't work anymore:
jquery:
<script>
$(document).ready(function (){
$("#buttest").click(function (){
$("#ajax").load("Vokabeltrainer_sec.php?Lektion=<?php echo $lection ?> #area");
});
});
</script>
HTML-Form:
<?php
echo '<form action="Ergebnis.php" method="post">';
generateRadio($translation, $firstWord, $i, $index, $lection);
echo '<form>';
?>
The .php function is generating radio buttons.
Before reloading the div evrything works fine! Of course there is also a submit-botton:
<button type="submit" name="submit" value="Submit" id="subbut" class="btn btn-default">weiter</button>
Sorry for my bad english!
EDIT:
<div id="ajax">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Übersetzung auswählen</h3>
</div>
<div class="panel-body">
<?php
echo '<form action="Ergebnis.php" method="post">';
generateRadio($translation, $firstWord, $i, $index, $lection);
echo '<form>';
?>
</div>
</div>
<br>
<button type="submit" name="submit" value="Submit" id="subbut" class="btn btn-default">weiter</button>
<div id="test">
<button type="button" id="buttest">TEST</button>
</div>
</div>
</div>
The div with id="ajax" should be reloaded whith nearly the same div but with a different php function.

How to get input hidden value from multiple forms?

I am having unlimited multiple dynamic forms containing only single input hidden field having submit button and trying to get the value of that form whose button is clicked. I don't know why this is not happening.
I've read these How to get the Specific Form Field value using JQuery and Submit a specific form with JQuery Ajax but still no result.
controller
public function order()
{
$data['fruits'] = $this->catering_model->getrecess('Recess Fruits','Category Recess');
$this->load->view('ChoiceLaunch/order',$data);
}
order.php
<?php $i=0;
if(!empty($fruits)){
?>
<div class="col-sm-12"><h3 align="center"><?php echo $fruits[0]->catsubname; ?></h3><br>
<!-- while($res_item=mysqli_fetch_array($cat_item_sql)){ -->
<?php $i=0;
foreach($fruits as $lrd1){
$i++;
?>
<form method="post" action="">
<div class="col-sm-4 col-md-3">
<div class="thumbnail">
<img style="height: 177px;width: 200px;" src="<?php echo 'http://localhost:8080/catering/uploads/'.$lrd1->picturename;?>" alt="...">
<div class="caption protitle">
<p style="height: 12px;width: 200px;margin-top: 9px;margin-bottom:29px;"><?php echo $lrd1->itemname; ?></p><br>
<input type="hidden" name="quantity" id="quantity<?php echo $i;?>" value="<?php echo $lrd1->itemname; ?>" size="2">
<button type="submit" id="send" class="btn btn-info">Add To Order</button><br>
<?php echo '$'.$lrd1->price; ?>
</div>
</div>
</div>
<?php
}}
?>
</form>
</div>
<script>
$('#send').click(function(){
//var selection= $(this).attr('id');
// $( "[id='quantity']" ) .each(function(){
// alert($(this).val());
// }); //running bt showing all at once
$( "form:input[type=hidden]" ) .each(function(){
alert($(this).val());
})
});
</script>
I am using CodeIgniter.
1st: Id must be unique so use class instead
<button type="submit" class="btn btn-info send">Add To Order</button><br>
and in js
<script>
$('form').on('submit',function(e){
e.preventDefault();
var hiddenVal = $(this).find('input[type="hidden"]').val();
alert(hiddenVal);
});
</script>
and in php I think you closed the </form> in a wrong place
<?php $i=0;
foreach($fruits as $lrd1){
$i++;
?>
<form method="post" action="">
<div class="col-sm-4 col-md-3">
<div class="thumbnail">
<img style="height: 177px;width: 200px;" src="<?php echo 'http://localhost:8080/catering/uploads/'.$lrd1->picturename;?>" alt="...">
<div class="caption protitle">
<p style="height: 12px;width: 200px;margin-top: 9px;margin-bottom:29px;"><?php echo $lrd1->itemname; ?></p><br>
<input type="hidden" name="quantity" id="quantity<?php echo $i;?>" value="<?php echo $lrd1->itemname; ?>" size="2">
<button type="submit" class="btn btn-info send">Add To Order</button><br>
<?php echo '$'.$lrd1->price; ?>
</div>
</div>
</div>
</form>
<?php
}
?>
if you have more then one hidden field you need to use .each()
<script>
$('form').on('submit',function(e){
e.preventDefault();
$(this).find('input[type="hidden"]').each(function(){
alert($(this).val());
});
});
</script>
Your id never be quantity because you included a number in the final of each quantity word
Change de hidden input to this:
<input type="hidden" name="quantity" id="quantity<?php echo $i;?>" value="<?php echo $lrd1->itemname; ?>" class="quantity" size="2">
And change the each jquery to this:
$( ".quantity" ).each(function(){
alert($(this).val());
}); //running bt showing all at once
I would personally use a data-* attribute instead of hidden elements. This will allow you to avoid further lookups since they will be on the element you are handling the event for.
<button type="submit" class="btn btn-info send" data-quantity="45">Add To Order</button>
Then the logic would be like
$('.send').on('click', function(){
var $this = $(this);
console.log($this.data('quantity'));
});

submit php form with different input type using javascript/ajax

I have to submit a form with some fields, like multiple checkboxes selection and some hidden input fields via ajax and replace html content with response. finally i go with javascript/ajax...but where i was wrong?
<?php include( 'session.php');
$userid=$_SESSION[ 'Userid'];
include( 'connection.php');
?>
<head>
<script>
function myFunction() {
var soi = document.getElementById("sweaterownerid").value;
var osp = document.getElementById("osweaterpic").value;
var osi = document.getElementById("osweaterid").value;
var value = [];
$("input[name*='" + sweater+ "']").each(function () {
// Get all checked checboxes in an array
if (jQuery(this).is(":checked")) {
value.push($(this).val());
}
});
var dataString = 'soi1=' + soi + '&osp1=' + osp + '&osi1=' + osi + '&value1=' + value;
if (soi1 == '' || osp1 == '' || osi1 == '' || value1 == '') {
alert("Please Fill All Fields");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "Usercloset1.php",
data: dataString,
cache: false,
success: function(response) {
$('#mydiv').replaceWith(response);
}
});
}
return false;
}
</script>
</head>
<div id="mydiv">
<div class="padding-top">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<div class="shop_item" style="width:100%;">
<form id="myForm">
<?php
$sweaterid=$_GET['d'];
$sownerid=$_GET['e'];
$opic=$_GET['f'];
$query1="select * from `usersweater` where `Sweaterid`='$sweaterid'";
$result1=mysql_query($query1);
$row1=mysql_fetch_assoc($result1);
$sweaternikname=$row1['SNickname'];
?>
<div>
<ul class="sweaters">
<li> <h4><?php echo $sweaternikname; ?></h4> <img src="upload/<?php echo $opic; ?>"> </li>
</ul>
<ul class="sweater1">
<?php
$query="select * from `usersweater` where `Userid`='$userid' && `Swap`='0' ";
$result = mysql_query($query);
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)){
$sid = $line[Sweaterid];
$img = $line[Sweaterpic];
$nikname = $line[SNickname];
$size = $line[Size];
?>
<li> <h4><?php echo $nikname; ?><input type="checkbox" name="sweater[]" value="<?php echo $sid; ?>" /></h4> <img src="upload/<?php echo $img; ?>"> </li>
<?php } ?>
</ul>
</div>
<input type="hidden" name="sweaterownerid" value="<?php echo $sownerid; ?>">
<input type="hidden" name="osweaterpic" value="<?php echo $opic; ?>">
<input type="hidden" name="osweaterid" value="<?php echo $sweaterid; ?>">
<input type="submit" name="next" onclick="myFunction()" value="NEXT" class="btn woo_btn btn-primary" style="margin-left: 30px;">
<input type="button" name="cancel" value="CANCEL" class="btn woo_btn btn-primary">
</form>
</div>
</div>
<div class="clearfix"></div>
<hr>
</div>
</div>
I want to pass the selected option to another page, which I do now using form action. But I want it dynamically without reloading page. I am new to ajax/javascript.
Second thing is, how can I handle the response, where submitting this form I want to replace first page content with the reponse that we get using ajax. This means replace all html content with other page's html content. I atteched the file which I want in response after submit.
<div class="padding-top">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<div class="shop_item" style="width:100%;">
<div style="text-align:center;">
<h4>Are you sure you want to swap?</h4>
</div>
<form action="Usercloset2.php" method="post">
<?php
include('session.php');
include('connection.php');
foreach ($_POST['value1'] as $sid){
$query1="select * from `usersweater` where `Sweaterid`='$sid'";
$result1=mysql_query($query1);
$row1=mysql_fetch_assoc($result1);
$sweaternikname=$row1['SNickname'];
$sweaterpic=$row1['Sweaterpic'];
?>
<div style=" ">
<ul class="sweaters">
<li> <h4><?php echo $sweaternikname; ?></h4> <img src="upload/<?php echo $sweaterpic; ?>"> </li>
</ul>
</div>
<!-------requester's own sweater details--------------->
<input type="hidden" name="sid[]" value="<?php echo $sid;?>">
<input type="hidden" name="snikname[]" value="<?php echo $sweaternikname;?>">
<input type="hidden" name="spic[]" value="<?php echo $sweaterpic;?>">
<?php } ?>
<!-------requester's show intrest that sweater details--------------->
<?php
$sownerid=$_POST['soi1'];
$opic=$_POST['osp1'];
$sweaterid=$_POST['osi1'];
?>
<input type="hidden" name="sweaterownerid" value="<?php echo $sownerid;?>">
<input type="hidden" name="osweaterpic" value="<?php echo $opic;?>">
<input type="hidden" name="osweaterid" value="<?php echo $sweaterid;?>">
<div style="float:right; margin-right:10px;">
<input type="submit" name="next" value="NEXT" class="btn woo_btn btn-primary">
<input type="button" name="cancel" value="CANCEL" class="btn woo_btn btn-primary">
</div>
</form>
</div>
</div>
<div class="clearfix"></div>
<hr>
</div>
you can use in your Ajax like this:
var form = $('#your_form_id');
var formAction = $('#your_form_id').attr('action');
/* Get input values from form */
values = form.serializeArray();
/* Because serializeArray() ignores unset checkboxes and radio buttons: */
values = values.concat(
$('#your_form_id input[type=checkbox]:not(:checked)').map(
function() {
return {
"name": this.name,
"value": this.value
}
}).get()
);
$.ajax({
'ajax code here'
});
or you can check https://api.jquery.com/serialize/
You can achive it though this.
jQuery(document).ready(function($){
$("#your_button_id").on('click', function(e){
e.preventDefault();
$("#your_form_id") .submit();
})
})
Ajax
$("#your_form_id").on('submit', function(e) {
e.preventDefault();
$.post('URL_HERE', $(this).serialize(), function(response) {
console.log(response)
});
});

How to identify which button is pressed and send that to server?

In the while loop I have doctor name, specialist and payment from my database. Each doctor has an <input type="button"> named "did". I want that when I press a button to contact a specific doctor, the value of $row3['did'] will sent to my contact.php page. But I cannot understand where to put it in the <input type="button"> so that I can identify which button is pressed and send its value to contact.php.
while($row3 = mysql_fetch_array($result3))
{
?>
<div class="col_1_of_4 span_1_of_4">
<div class="title-img">
<div class="title"><img src="images/Crystal_Clear_user.gif" alt=""></div>
<!--<div class="title-desc"><p>FACILITY 1</p></div>-->
<div class="clear"></div>
</div>
<h4 class=head>Doctor name: <?php echo $row3['dName'];?></h4>
<p>Specialist: <?php echo $row3['specialist'];?></p>
<p>Payment: <?php echo $row3['payment'];?></p>
<hr>
<div id='contact-form'>
more
<!--<button id="findHelp" class="btn btn-primary"><a href="?did=<?php// echo $row3['did'];?>" >Find help</a></button>-->
<!--<a href="data/contact.php?did=<?php //echo $row3['did'];?>" ></a>-->
<!--<input type='button' name='contact' id='contact' value="Message" class='contact demo btn btn-primary'/>-->
<form method='post' action='contact.php'>
<input type='button' name='did' id='did' value="Message" class='contact demo btn btn-primary'/>
</form>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='images/loading.gif' alt='' />
</div>
</div>
<?php
}
?>
There is no need to add the form..simply send the id with link when button is clicked and get that id on contact .php page..
OR use as following
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.contact').click(function(){
var this_rel=$(this).attr('rel');
location.href="contact.php?id="+this_rel;
});
});
</script>
<input type='button' name='did' id='did' value="Message" class='contact demo btn btn-primary' rel="<?php echo $row3['did'];?>"/>
try if(isset($_POST['button_name']) && $_POST['button_name'] === 'button_value')
Use a hidden value inside the form, and assign the doctor details there
<form method="post" action="contact.php">
<input type="hidden" name="thedoctor" value="<?php echo $row3['did'];?>"/>
<input type="button" name="did" id="did" value="Message" class="contact demo btn btn-primary"/>
</form>
And then find the selected button by $button_clicked = $_POST['thedoctor']
This will be your PHP code
<?php
while($row3 = mysql_fetch_array($result3))
{
?>
<div class="col_1_of_4 span_1_of_4">
<div class="title-img">
<div class="title"><img src="images/Crystal_Clear_user.gif" alt=""></div>
<!--<div class="title-desc"><p>FACILITY 1</p></div>-->
<div class="clear"></div>
</div>
<h4 class=head>Doctor name: <?php echo $row3['dName'];?></h4>
<p>Specialist: <?php echo $row3['specialist'];?></p>
<p>Payment: <?php echo $row3['payment'];?></p>
<hr>
<div id='contact-form'>
more
<input type='button' name='did' id='did' value="Message" class='contact demo btn btn-primary' rel="<?php echo $row3['did'];?>"/>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='images/loading.gif' alt='' />
</div>
</div>
<?php
}
?>
and above that put some jquery code
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.contact').click(function(){
var this_rel=$(this).attr('rel');
location.href="contact.php?id="+this_rel;
});
});
</script>
Dont forget to write query of database, because that was not in your example, thats why i did not mention that. Also add jquery.js to its appropriate place so jquery code can run. Please do this trick and let me know..
Just use buttons :
HTML
<form method="POST">
<button type="submit" name="btn_action_1" value="abc">Message</button>
<button type="submit" name="btn_action_1" value="def">Message</button>
<button type="submit" name="btn_action_1" value="ghi">Message</button>
<button type="submit" name="btn_action_1" value="jkl">Message</button>
<button type="submit" name="btn_action_2" value="123">Message</button>
<button type="submit" name="btn_action_3" value="456">Message</button>
</form>
PHP
<?php
if(isset($_POST['btn_action_1'])) {
echo 'btn_action_1 was pressed with value: '. $_POST['btn_action_1'];
}
if(isset($_POST['btn_action_2'])) {
echo 'btn_action_2 was pressed with value: '. $_POST['btn_action_2'];
}

Categories