html form doesn't work after Jquery load() - php

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.

Related

codeigniter get value after submit form

i have modal using form selection ajax with submit button
modal code
<div class="modal-body">
<div class="row" id="modal-body">
<div class="col-md-12">
<form class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="project-loa" class="col-sm-4 control-label">Select Project</label>
<div class="col-sm-8">
<select id="project-load-modal" class="form-control" name="proj_name" style="width: 100%">
</select>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Download</button>
</div>
my value selection option is fine
controller
public function generate(){
$proj_name = $this->input->get('proj_name');
echo $proj_name;
}
i want get value from my selection form using controller.
when the submit is click, i get nothing in my console. what i do wrong?
//give id to submit button button_id
$("#button_id").on('click', function () {
var proj_name = $("#project-load-modal").val();
$.post(base_url + 'generator_url'+proj_name, function (response) {
if (response.code == '1') {
//message if you want to show
} else {
//message if you want to show
}
});
}
//make route
$route['generator_url/(:any)']='ControllerName/generate/$1';
Add action and method attribute to form element
<form class="form-horizontal" action="<?php echo base_url().'C_MRCR_A/generate'; ?>" method="get">
Take submit button inside the form element.
<button type="submit" class="btn btn-primary">Download</button>
</form>

Div text replace in other div

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
}
?>

Passing data via Modal Bootstrap and getting php variable?

I'm trying to get an input value passed via jquery and setting into a php variable, but I don't know how to do that.
This button have the value that I want to send:
<button type='button' data-a='".$fila['idPlaza']."' href='#editarUsuario' class='modalEditarUsuario btn btn-warning btn-xs' data-toggle='modal' data-backdrop='static' data-keyboard='false' title='Editar usuario'><img src='../images/edit.png' width='20px' height='20px'></button>
Then I have this js code to send the value:
$(document).on("click", ".modalEditarUsuario", function (e) {
e.preventDefault();
var self = $(this);
$("#a").val(self.data('a'));
$(self.attr('href')).modal('show');
});
Finally I have this bootstrap modal
<!-- MODAL EDITAR-->
<div id="editarUsuario" class="modal fade modal" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Editar usuario</h2>
</div>
<form name="formularioModificaUsuario" method='post' action="usuarios.php">
<div class="modal-body">
<input type="text" class="form-control" name="idPlaza" id="a">
<?php
$valueA = ???
?>
</div>
<div class="modal-footer">
<button type="reset" id="cancelar" class="btn btn-danger" data-dismiss="modal" value="reset"><img src='../images/cancel.png' width='20px' height='20px'> Cancelar</button>
<button type="submit" name="submitModifica" id="submit" class="btn btn-primary" value="submit"><img src='../images/save_changes.png' width='20px' height='20px'> Guardar cambios</button>
</div>
</form>
</div>
</div>
</div>
</div>
My question is, how could I get the value of id='a' input into php variable $valueA to use after?
<button type='button' data-a="<?echo $fila['idPlaza'];?>" href='#editarUsuario' class='modalEditarUsuario btn btn-warning btn-xs' data-toggle='modal' data-backdrop='static' data-keyboard='false' title='Editar usuario'>
<img src='../images/edit.png' width='20px' height='20px'>
</button>
Put below code in footer before end of </body> tag.
<!-- MODAL EDITAR-->
<div id="editarUsuario" class="modal fade modal" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
</div>
</div>
</div>
</div>
Use Script like this.
<script>
$('.modalEditarUsuario').click(function(){
var ID=$(this).attr('data-a');
$.ajax({url:"NewPage.php?ID="+ID,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
Create NewPage.php, and paste the below code.
(Remember, this page name NewPage.php is used in script tag also. if you are planning to change the name of this page, change page name there in script tag too. Both are related.)
<?
$ID=$_GET['ID'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Editar usuario</h2>
</div>
<form name="formularioModificaUsuario" method='post' action="usuarios.php">
<div class="modal-body">
<input type="text" class="form-control" name="idPlaza" id="a">
<?php
$valueA = $ID;
?>
</div>
<div class="modal-footer">
<button type="reset" id="cancelar" class="btn btn-danger" data-dismiss="modal" value="reset">
<img src='../images/cancel.png' width='20px' height='20px'> Cancelar</button>
<button type="submit" name="submitModifica" id="submit" class="btn btn-primary" value="submit">
<img src='../images/save_changes.png' width='20px' height='20px'> Guardar cambios</button>
</div>
</form>
Php loads before anything on your page, so you cannot set a php variable using jQuery or javascript, but the opposite can be done.
If you have the value of the text field initially when loading then you can set it via php on load, otherwise you will need to submit your form to use the value of the input in php.
The following code is valid, php setting javascript
<?php
$valueA = "I am value A";
?>
<script language="javascript">
var jsValueA = "<?php echo $valueA; ?>";
alert(jsValueA); // alerts I am value A
</script>
The following code is invalid, javascript setting php
<input type="text" class="form-control" name="idPlaza" id="a">
<?php
$valueA = $("#a").val();
?>
This is wrong because when PHP executed the input field would not have been created yet, besides jQuery cannot be executed within PHP scope. javascript and jQuery are used at browser level to manage user interaction and DOM objects and events while PHP is used at server level and not browser.
So if you want to set a php variable, you can only set it when the server script loads, i.e php gets executed, which comes before anything else in the page. Or you can grab a value from a posted form $_POST or URI query string $_GET

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'];
}

Why can't I POST data from a Modal to PHP?

Using the following code, a modal within a form with method="POST" but in the php-part the submitted value is not read. Can anyone tell me how to accomplish this?
<?php
if ($error) {
echo '<div class="alert alert-danger">'.$error.'</div>';
}
if ($message) {
echo '<div class="alert alert-success">'.$message.'</div>';
}
?>
<div class="container">
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<form method="post">
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">You will receive an Access Code at your new email-address</h4>
</div>
<div class="modal-body">
<label for="text">Fill in your Access Code right here</label>
<input type="text" name="AccessCode" class="form-control"/>
</div>
<div class="modal-footer">
<input type="submit" name="submit" value="Confirm" data-dismiss="modal" class="btn btn-success btn-lg marginTop" />
</div>
</div>
</div>
</div>
</form>
</div>
The php part looks like this:
<?php
if ($_POST['submit']=='Confirm') {
print_r($_POST);
$error="No errors";
$message="Approved!";
} else {
$error="Error!";
$message="Nothing received";
}
?>
Form needs an action ..
<form method="post">
Has no idea where it is supposed to post the information to.
<form method="post" action="phpPageToSendTo.php">
will work..
To test, at the top of your page in the php section add in
$testValue = "";
if(isset($_POST["AccessCode"]))
{
$testValue = $_POST["AccessCode"] ;
echo "<h1> BIG LETTERS WITH THE ACCESS CODE :" . $testValue . "</h1>";
}
?>
Now in your form HTML item use the action="" Run the page and test the form.
Resolution :
And it seems you cannot have another event attached to your submit.. data-dismiss="modal".

Categories