Can't Pass Values to Javascript Modal (Not Bootstrap) - javascript

I'm having issues with trying to pass a value to a non-bootstrap modal. The way my current php loop is written, I understand that I can only use my modal to edit the last row in my SQL table. However when my modal div was inside the loop, I would only able to alter the first row of the SQL table. How could I modify my scripts to accept the value from the button which loads my modal?
PHP:
<?php
while ($row=mysqli_fetch_array($select))
{
$idtemp=$row['id'];
<button id="edit_form<?php echo $idtemp;?>" data-target="#id02" data-id="<?php echo $idtemp;?>" onclick="document.getElementById('id02').style.display='block'">Edit</button>
<?php
}
?>
HTML:
<div id="id02" class="modal">
<span onclick="document.getElementById('id02').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" id="editForm" action="modify_records.php" method="post">
<div class="container">
<h3>Edit an Existing Project</h3>
<label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
<input type="text" name="Project_Name" id="Project_Name_Edit" placeholder="Project Name">
<br><br>
<label for="Partners" class="ui-hidden-accessible">Partners:</label>
<?php
echo $partnersmenu;
?>
<br><br>
<label for="blank" class="ui-hidden-accessible">. </label>
<br><br>
<br><br>
<input type="button" id="edit_button" class="edit_button" value="Submit" onclick="edit_row(<?php echo $idtemp;?>);">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
</div>
Javascript:
function edit_row(id){
initialize variables
send ajax data to modify_records.php
...
}

EDIT:Solution with hidden-field:
First give a class to your buttons in your loop
<?php
while ($row=mysqli_fetch_array($select))
{
$idtemp=$row['id'];
<button class="openModal" id="edit_form<?php echo $idtemp;?>" data-target="#id02" data-id="<?php echo $idtemp;?>" onclick="document.getElementById('id02').style.display='block'">Edit</button>
<?php
}
?>
Than put a hidden-field in your modal
<div id="id02" class="modal">
<span onclick="document.getElementById('id02').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" id="editForm" action="modify_records.php" method="post">
<div class="container">
<h3>Edit an Existing Project</h3>
<label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
<input type="text" name="Project_Name" id="Project_Name_Edit" placeholder="Project Name">
<br><br>
<label for="Partners" class="ui-hidden-accessible">Partners:</label>
<?php
echo $partnersmenu;
?>
<br><br>
<label for="blank" class="ui-hidden-accessible">. </label>
<br><br>
<br><br>
<input type="button" id="edit_button" class="edit_button" value="Submit" onclick="edit_row(<?php echo $idtemp;?>);">
<input type="hidden" id="hidden_temp_id">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
</div>
Than create in your js-file eventlistener to your buttons
var openModalButtons = document.getElementsByClassName("openModal");
for (var i = 0; i < openModalButtons.length; i++) {
openModalButtons[i].addEventListener('click', myFunction, false);
}
var myFunction = function() {
var idtemp = this.getAttribute("data-id");
document.getElementById('hidden_temp_id').value = idtemp;
};

Related

Redirect modal form (PHP-JS-HTML5)

I try to learn frontend and backend. I create a simple login form with bootstrap modal but i have this problem. When i submit the data the modal disappear and i see the message only if i click to the button of my modal. How can i prevenent this event? Sorry for my English.
This is the code
PHP MODAL
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-content" id="modalContent">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeForm"></button>
</div>
<div class="modal-body">
<div id="errori" >
<!-- controllo sui campi lasciati vuoi !-->
<?php
if(!empty($_SESSION['errore'])){ ?>
<div class="alert alert-danger"><?=$_SESSION['errore'] ?> </div>
<?php
$_SESSION['errore']='';
}
?>
<!-- fine controllo !-->
</div>
<form action="signup.php" method="POST" id="formLogin">
<div class="mb-3">
<label for="email" class="form-label">Indirizzo email</label>
<input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">Il tuo indirizzo email</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="mb-3 form-check">
<input value="1" type="checkbox" class="form-check-input" id="remember" name="remember">
<label class="form-check-label" for="exampleCheck1">Ricordami</label>
</div>
<div class="mb-3">
<p> Non sei ancora Registrato? <a data-bs-toggle="modal" href="#regModal" data-bs-target="#regModal" onclick="clickreg()"> Clicca qui</a> per registrarti </p>
</div>
<button type="submit" id="regBtn" class="btn btn-primary">Invia</button>
</form>
</div>
<div class="modal-footer">
<!--
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
!-->
</div>
</div>
</div>
</div>
<?php include 'regModal.php'; ?>
<script>
function clickreg(){
$('#loginModal').modal("hide");
$('#regModal').modal("show");
}
</script>
<script>
$('#formLogin').on('submit', function() {
$('#loginModal').addClass('modal fade show').css('display','block');
});
</script>
SIGNUP.PHP. This part of code check if the data insert in the form are blanck and save all in a session variable named "error"
<?php
if(!isset($_SESSION))
{
session_start();
}
$errore= '';
if(empty($_POST['email'])){
$errore .= 'Email richiesta <br>';
}
if(empty($_POST['password'])){
$errore .= 'Password richiesta';
}
if(!empty($errore)){
$_SESSION['errore'] = $errore;
}
That's exactly how it should behave. If you don't want the page to reload, then you should consider using ajax.
In case you're not willing to use ajax you can show the modal when an error is detected after the form is submitted like so.
<?php if(!empty($_SESSION['errore'])){ ?>
<script>
$('#regModal').modal("show");
</script>
<?php } ?>

Prevent Bootstrap Model from Closing after Submit Button

I want to prevent my Modal window to close after I push submit Form button.
I tried a different kind of ways jquery/credform/javascript etc and nothing gave me the result I want.
Inside my Modal, as you can see I have a Form with different things. All fields are requested by my PHP server.
Please help me out with this. I want it after I push submit to remain open so the user that completes the form get's a message inside a box that I made there
$('#myModal').on('hidden.bs.modal', function() {
this.modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comanda prin Email</h4>
</div>
<div class="modal-body">
<?php include('forms.php'); ?>
<div class="container">
<form id="contact" action="<?= htmlspecialchars($_SERVER["PHP_SELF"]) ?>" method="post">
<div class=""><p style="text-align: center;">Dupa plasarea comenzi in maximum 24 ore ve-ti fi contactat Telefonic pentru confirmarea acesteia!!!</p></div>
<fieldset>
<sup>*</sup>
<input placeholder="Nume Produs" type="text" name="numeprodus" value="<?= $numeprodus ?>" tabindex="1" autofocus>
<span class="error"><?= $numeprodus_error ?></span>
</fieldset>
<fieldset>
<sup>*</sup>
<input placeholder="Marimea" type="text" name="marime" value="<?= $marime_produs ?>" tabindex="2" autofocus>
<span class="error"><?= $marime_error ?></span>
</fieldset>
<fieldset>
<sup>*</sup>
<input placeholder="Numele" type="text" name="nume" value="<?= $nume ?>" tabindex="3" autofocus>
<span class="error"><?= $nume_error ?></span>
</fieldset>
<fieldset>
<sup>*</sup>
<input placeholder="Prenumele" type="text" name="prenume" value="<?= $prenume ?>" tabindex="4" autofocus>
<span class="error"><?= $prenume_error ?></span>
</fieldset>
<fieldset>
<sup>*</sup>
<input placeholder="Adresa" type="text" name="adresa" value="<?= $adresa ?>" tabindex="5" autofocus>
<span class="error"><?= $adresa_error ?></span>
</fieldset>
<fieldset>
<sup>*</sup>
<input placeholder="Oras" type="text" name="oras" value="<?= $oras ?>" tabindex="6" autofocus>
<span class="error"><?= $oras_error ?></span>
</fieldset>
<fieldset>
<sup>*</sup>
<input placeholder="Cod Postal" type="text" name="codpostal" value="<?= $codpostal ?>" tabindex="7" autofocus>
<span class="error"><?= $codpostal_error ?></span>
</fieldset>
<fieldset>
<sup>*</sup>
<input placeholder="Email" type="text" name="email" value="<?= $email ?>" tabindex="8">
<span class="error"><?= $email_error ?></span>
</fieldset>
<fieldset>
<sup>*</sup>
<input placeholder="Numar Telefon" type="text" name="telefon" value="<?= $telefon ?>" tabindex="9">
<span class="error"><?= $telefon_error ?></span>
</fieldset>
<fieldset>
<textarea value="<?= $message ?>" name="message" tabindex="10">
</textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
<div class="success"><?= $success ?></div>
</form>
</div>
</div>
<div class="dv-atentionare"><p class="dv-att-p1">Atentie!</p><p class="dv-att-p2">Aveti la dispozitie 48 ore de la plasarea comenzi pentru a o putea anula!</p></div>
<div class="modal-footer">
<input class="btn btn-default">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Thank you in advance!
Ok, so there are two solutions for this.
Use JQuery AJAX to submit form, and prevent default form behaviour. Link
Reopen the Modal, when form is returned from server. I might not be able to give you any PHP code for this but I have done this in Asp.Net MVC.
When you post your data to PHP, return some flag from there. Then you can use that flag to turn following script on/off.
// PHP if($some_flag == true)
<script>
$(document).ready(function(){
$('#myModal').modal('show');
})
</script>
// PHP endif
According to the docs data-dismiss="modal" is to dismiss the modal when the button is clicked.
Removing this attribute should stop the modal from closing when the button is clicked.

populate field with data from DB in Modal Bootstrap 3 using Codeigniter and jquery

im using bootstrap 3 framework and codeigniter 3, i want to edit a row from table but i want to display row in thier field in modal
Code Html of table
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Nom et prénom</th>
<th>Age</th>
<th>Sexe</th>
<th>Assurance</th>
<th>Téléphone</th>
<th>E-mail</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
foreach ($query->result() as $row)
{
?>
<tr>
<td><?php echo $row->no_dossier_pt; ?></td>
<td><?php echo $row->nom_pt .' '. $row->prenom_pt ?></td>
<?php
$date = new DateTime($row->datenaissance_pt);
$now = new DateTime();
$interval = $now->diff($date);
?>
<td><?php echo $interval->y .' ans'; ?></td>
<td><?php echo $row->sexe_pt; ?></td>
<td><?php echo $row->assurance_pt; ?></td>
<td><?php echo $row->telephone_pt; ?></td>
<td><?php echo $row->email_pt; ?></td>
<td>
<a type="button" href="<?php echo base_url() ?>patient/patient_delete/<?php echo $row->id; ?>" class="btn btn-danger">Supprimer</a>
<a type="button" data-toggle="modal" href="#editpatient" data-id="<?php echo $row->id; ?>" class="btn btn-warning" >Editer</a>
<?php $this->load->view('template/patient_update'); ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php
$this->load->view('template/footer');
?>
but i can't understand how can i pass 'id' of this row to the controller and return the specific data row from controller to thier field in Modal form,
this is code of button
<a type="button" data-toggle="modal" href="#editpatient" data-id="<?php echo $row->id; ?>" class="btn btn-warning" >Editer</a>
and my Modal form Code
<!-- Modal -->
<div class="modal fade" id="editpatient" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> Information patient 2</h4>
</div>
<!-- formulaire -->
<?php echo form_open('patient/patient_update'); // action to the controller?>
<div class="modal-body">
<!-- hidden input montinned with class sr-only -->
<label class="sr-only" =""></label>
<input type="text" name="no_dossier_pt" class="sr-only" >
<div class="form-group">
<input type="text" class="form-control" id="nom_pt" name="nom_pt" id="nom_pt" placeholder="Nom ...">
</div>
<div class="form-group">
<input type="text" class="form-control" id="prenom_pt" name="prenom_pt" id="prenom_pt" placeholder="Prénom ....">
</div>
<div class="form-group">
<label for="exampleInputFile">Sexe : </label>
<input type="radio" name="sexe_pt" id="radio-choice-1" value="homme" checked="checked" />
<label for="radio-choice-1"> Homme </label>
<input type="radio" name="sexe_pt" id="radio-choice-2" value="femme" />
<label for="femme"> Femme </label>
<input type="radio" name="sexe_pt" id="radio-choice-3" value="enfant" />
<label for="enfant">Enfant</label>
</div>
<div class="form-group ">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date" placeholder="Date de naissance" type="text"/>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">Assurance : </label>
<input type="radio" name="assurance_pt" id="radio-choice-1" value="oui" checked="checked" />
<label for="radio-choice-1"> Oui </label>
<input type="radio" name="assurance_pt" id="radio-choice-2" value="non" />
<label for="femme"> Non </label>
</div>
<div class="form-group">
<input type="text" class="form-control" name ="telephone_pt" placeholder="Téléphone ...">
</div>
<div class="form-group">
<input type="text" class="form-control" name ="email_pt" placeholder="Email ...">
</div>
<div class="form-group">
<textarea class="form-control" cols="40" name="note_pt" rows="3" placeholder="Note sur ce patient ..."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary">Enregistrer</button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
<!-- Modal -->
Controller Methode to display
public function patient_selectbyid()
{
$data = array();
$id = $this->input->post('pt_id');
$this->load->model('patient_model');
$data = $this->studentModel->getStudent($id);
echo $data;
}
Code jquery
$(document).ready(function() {
var id_edit = $(this).data('id');
var base_url = <? php echo base_url('patient/patient_selectbyid'); ?> ;
$('.editStudent').click(function() {
$.ajax({
url: base_url,
type: 'POST',
data: {
'pt_id': id_edit
},
dataType: 'JSON';
success: function(result) {
$('.modal-body #nom_pt').val(result[0].nom_pt);
$('.modal-body #prenom_pt').val(result[0].prenom_pt);
}
});
});
});
I hope someone can help me coding this, thanks you
thanks brother for your recommandations , i had resolve the problem by using event listner as you say, i just sent data DB using data attribute in the button like this:
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#editPatient" data-id="<?php echo $row->id ?>" data-nom="<?php echo $row->nom_pt ?>" data-prenom="<?php echo $row->prenom_pt ?>" data-nod="<?php echo $row->no_dossier_pt ?>" data-sexe="<?php echo $row->sexe_pt; ?>" data-dn="<?php echo $row->datenaissance_pt; ?>" data-assur="<?php echo $row->assurance_pt; ?>" data-tele="<?php echo $row->telephone_pt; ?>" data-email="<?php echo $row->email_pt; ?>" data-note="<?php echo $row->note_pt; ?>" >
Modifier
the modal like this
<!-- Modal -->
<div class="modal fade" id="editPatient" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> Information patient </h4>
</div>
<div class="modal-body">
<!-- formulaire -->
<?php echo form_open('patient/patient_update'); ?>
<label class="sr-only" =""></label>
<input type="text" name="id" class="sr-only" id="id_hidd" >
<div class="form-group">
<input type="text" class="form-control" id="nom_pt" name="nom_pt" placeholder="Nom ...">
</div>
<div class="form-group">
<input type="text" class="form-control" id="prenom_pt" name="prenom_pt" placeholder="Prénom ....">
</div>
<div class="form-group">
<label for="exampleInputFile">Sexe : </label>
<input type="radio" name="sexe" id="homme" value="homme" checked="checked" />
<label for="homme"> Homme </label>
<input type="radio" name="sexe" id="femme" value="femme" />
<label for="femme"> Femme </label>
<input type="radio" name="sexe" id="enfant" value="enfant" />
<label for="enfant">Enfant</label>
</div>
<div class="form-group ">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date" placeholder="Date de naissance" type="text"/>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">Assurance : </label>
<input type="radio" name="assurance" id="assur" value="oui" checked="checked" />
<label for="radio-choice-1"> Oui </label>
<input type="radio" name="assurance" id="nonassur" value="non" />
<label for="femme"> Non </label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="telephone_pt" name ="telephone_pt" placeholder="Téléphone ...">
</div>
<div class="form-group">
<input type="text" class="form-control" id ="email_pt" name ="email_pt" placeholder="Email ...">
</div>
<div class="form-group">
<textarea class="form-control" cols="40" id="note_pt" name="note_pt" rows="3" placeholder="Note sur ce patient ..."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary">Enregistrer</button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
script that recive data and displayed on Modal form like this:
<script type="text/javascript">
$('#editPatient').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var id = button.data('id')
var prenom = button.data('prenom')
var nom = button.data('nom')
var nod = button.data('nod')
var sexe = button.data('sexe')
var dn = button.data('dn')
var tele = button.data('tele')
var email = button.data('email')
var note = button.data('note')
if (sexe == 'femme'){
var id_sexe = "femme"
document.getElementById(id_sexe).setAttribute("checked", "checked")
}
if (sexe == 'homme'){
var id_sexe = "homme"
document.getElementById(id_sexe).checked = true
}
if (sexe == 'enfant'){
var id_sexe = "enfant"
document.getElementById(id_sexe).checked = true
}
if (assur == 'oui'){
var id_assur = "assur"
document.getElementById(id_assur).checked = true
}
if (assur == 'non'){
var id_assur = "nonassur"
document.getElementById(id_assur).checked = true
}
var modal = $(this)
modal.find('.modal-title').text('Modifier patient ('+nod+')')
modal.find('.modal-body #id_hidd').val(id)
modal.find('.modal-body #nom_pt').val(nom)
modal.find('.modal-body #prenom_pt').val(prenom)
modal.find('.modal-body #date').val(dn)
modal.find('.modal-body #telephone_pt').val(tele)
modal.find('.modal-body #email_pt').val(email)
modal.find('.modal-body #note_pt').val(note)
})
</script>
thanks for your help if you have any other suggestion or question i'll be gratfull

echo text on twitter bootstrap modal based on data-id

I am passing data-id to twitter bootstrap model and I can assign that to a hidden field just fine however based on what data-id has, I am trying to echo a text and I am stuck
This is how I am calling the modal, you will notice the first link is passing goal_holidays in data-id and the second one is passing goal_house in data-id
<a class="open-GoalDialog" data-toggle="modal" href="#editGoals" data-id="goal_holidays">Edit</a>
<a class="open-GoalDialog" data-toggle="modal" href="#editGoals" data-id="goal_house">Edit</a>
What I need to do
On the modal i need to put a check like this. Please note that this is not the actual code i am using, this is the dummy code i wrote to explain what i need to do
if(data-id = goal_holidays){
echo "holiday";
}else if (data-id = goal_house){
echo "house";
}
This is what my modal looks like
<div id="editGoals" class="modal hide fade" data-keyboard="false" data-backdrop="static">
<div class="modal-header">
<a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a>
<h3 style="font-size: 18px;" id="myModalLabel"><img src="assets/img/logo_icon.png">Goal Tracker</h3>
</div>
<div class="modal-body">
<div id="message2"></div>
<form action="dashboard-goals-ajax.php" method="post" name="goaldataform" id="goaldataform"
class="form-horizontal goaldataform">
<div class="control-group">
<label class="control-label goal_label_text"><?php _e('Goal Target'); ?>
</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span><input type="text" class="input-medium" name="goal_target"
id="goal_target" value="">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label goal_label_text"><?php _e('How much have you saved towards your goal?'); ?>
</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span><input type="text" class="input-medium" name="goal_progress"
id="goal_progress" value="">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label goal_label_text"><?php _e('Goal deadline'); ?>
</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on"></span><input class="input-medium datex" type="text" id="goalDeadline"
name="goalDeadline">
</div>
</div>
</div>
<input type="hidden" name="goal_type" id="goal_type" value=""/>
<input type="hidden" name="goal_target_submitted">
</form>
</div>
<div class="modal-footer">
<button data-complete-text="Close" class="dt-btn btn-yellow dt-btn-1 pull-right"
id="goaldatasubmit" name="goaldatasubmit"><?php _e('Submit'); ?></button>
<div class="gap-10"></div>
</div>
</div>
and this is the JS I am using the assign the data-id to hidden field goal_type
$(document).on("click", ".open-GoalDialog", function () {
var myGoal = $(this).data('id');
$(".modal-body #goal_type").val(myGoal);
I will really appreciate if anyone can help me in how to echo a text based on the goal_type data.
There is an error in your comparisonpart.
if(data-id = goal_holidays){
echo "holiday";
}else if (data-id = goal_house){
echo "house";
}
goal_holidays and goal_house are strings, not variables.
So, you have to replace the code like that;
if(data-id == "goal_holidays"){
echo "holiday";
}else if (data-id == "goal_house"){
echo "house";
}

Change values of elements inside Div using JavaScript.

I have the following div
<div class="modal hide" id="changeProject">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3><?php echo __('Change Project') ?></h3>
</div>
<div class="modal-body">
<form id="frmChangeProject">
<fieldset>
<ol>
<?php echo $changeProjectForm->render(); ?>
</ol>
</fieldset>
</form>
</div>
<div class="modal-footer">
<input type="button" id="dialogChange" class="btn" value="<?php echo __('Edit'); ?>" />
<input type="button" id="dialogCancel" name="dialogCancel" class="btn reset" data-dismiss="modal" value="<?php echo __('Cancel'); ?>" />
</div>
</div>
Using JS I want to change the value of <h3></h3> element. also I want to use that magic function for the purpose of localization.
Using jquery, you can call this after an event:
$(".modal-header h3").html("your new header");
It will look for the h3 element inside of the .modal-header class and change it.

Categories

Resources