Member Avatar for Trabelsi

Hi,
I have a problem with some JavaScript code, i have three fields in my form scoreActuel, addedScore and NewScore, i used the onChange function because I want that every time the fields addedScore is updated , the field NewScore is updated as the sum of the values of the fields addedScore and scoreActuel, I hope I was clear
Below my source code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <link   href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>


<script >

function changeTest ( form ) { 

form.nv_scor.value = form.score.value + document.getElementById("sub_cat").value; }
</script>

</head>
<form class="form-horizontal" action="updateChauf2.php?id=<?php echo $id?>&amp; score= <?php echo $score?>" method="post">


      <div class="control-group">  
    <label>addedScore</label>
    <select name="sub_cat" id="sub_cat"></select>
    </div>

<!--score-->



                     <div class="control-group">  
                     <label for="score">scoreActuel</label>
                        <div >
                <?php
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT score FROM personnel WHERE id = {$id} ";
$q = $pdo->prepare($sql);
$q->execute();
$data = $q->fetchAll(PDO::FETCH_ASSOC);
Database::disconnect();
?>
<!--<select  size=1 name="score" id="score">
<option name="score" id="score" value="">--scoreActuel --</option>-->
<?php foreach($data as $value): ?>
<input readonly  name="score" id="score" onchange="changeTest(this.form)" type="text"   value="<?php echo $value['score'] ?>">
<?php endforeach; ?>
                        </div>
                         </div>

                                   <!--score-->



    <div class="control-group">  
    <label for="nv_scor">NewScore</label>
    <select name="nv_scor" id="nv_scor"></select>
    </div>




    <div class="form-actions">
                          <button type="submit" class="btn btn-success">update</button>
                          <a class="btn" href="chaufAffect.php">back</a>
                        </div>


</form>
</body>
</html>

My problem is that when the field addedScore is updated, the field NewScore is not updated, so the function changeTest does'nt work, i hope that someone could help me, thanks

  • 4 Contributors
  • 7 Replies
  • 373 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Trabelsi
Member Avatar for pritaeas

form.score.value

There is no input called score, you have it commented out.

Member Avatar for Trabelsi

the ID of the label scoreActuel is score

<label for="score">scoreActuel</label>
                        <div >
                <?php
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT score FROM personnel WHERE id = {$id} ";
$q = $pdo->prepare($sql);
$q->execute();
$data = $q->fetchAll(PDO::FETCH_ASSOC);
Database::disconnect();
?>
<!--<select  size=1 name="score" id="score">
<option name="score" id="score" value="">--scoreActuel --</option>-->
<?php foreach($data as $value): ?>
<input readonly  name="score" id="score" onchange="changeTest(this.form)" type="text"   value="<?php echo $value['score'] ?>">
<?php endforeach; ?>
                        </div>
                         </div>
Member Avatar for pixelsoul

First thing, you're missing an opening <body> tag.

Second, the values are strings, and you can't sum those. You'll need to add + infront of each value.

function changeTest(form) {
    form.nv_scor.value = +form.score.value + +document.getElementById("sub_cat").value;
}

Or you might be able to use the Number() function like

function changeTest(form) {
    form.nv_scor.value = Number(form.score.value) + Number(document.getElementById("sub_cat").value);
}

You're attempting to update the value of a select element, but that won't work.
The value of a select element is it's selected option, so you would need to dynamically add/update the options of the select element.

Member Avatar for Trabelsi

I think I hurt explained my problem , I changed many things but the problem remains the same , so I'll explain again the problem from the beginning.
I have two integer fields with value integers $ _POST [' sub_cat ' ], $ _ POST [' scoreAct '] , whose identifier is sub_cat select type and is related to another drop in the form ( joursemaine ), so it is dynamically updated in the form, and scoreAct fields , its value is read directly from the database from a select query , what I want to realize is that the value of the field scoreAct changes automatically whenever the sub_cat fields are updated , the new value of scoreAct fields must equal the sum of its current value + the new value of sub_cat fields , I heard about the onChange function JS and I tried with it but it did not work , whenever the sub_cat field is updated , the fields scoreAct does not change, I have this code but it does not work:
updateOP1Bis.php the script that contains the form

<?php 
    include('config.php'); 
require 'database.php';
    mysql_query("set NAMES utf8");
$query_parent = mysql_query("SELECT * FROM joursemaine") or die("Query failed: ".mysql_error());

    $id = null;
    if ( !empty($_GET['id'])) {
        $id = $_REQUEST['id'];
    }

    if ( null==$id ) {
        header("Location: chaufAffect.php");
    }


?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <link   href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>

<title>Dependent DropDown List</title>
<script type="text/javascript" src="jsBis/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $("#parent_cat").change(function() {
        $(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
        $.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
            $("#sub_cat").html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    });

});
</script>
</head>

<body>

<form name="forme" class="form-horizontal" action="updateOP1Bis.php?id=<?php echo $id?>" method="post">



      <div class="control-group">
    <label for="category">joursemaine:</label>
    <select name="parent_cat" id="parent_cat" onchange="myFunction()">
        <?php while($row = mysql_fetch_array($query_parent)): ?>

        <option value="<?php echo $row['id_joursemaine']; ?>"><?php echo $row['joursemaine']; ?></option>
        <?php endwhile; ?>
    </select>
    <br/><br/>
  </div>

    <!--score-->
   <div class="control-group">  
                     <label for="scoreAct" >scoreAct</label>
                        <div >
                <?php
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT score FROM personnel WHERE id = {$id} ";
$q = $pdo->prepare($sql);
$q->execute();
$data = $q->fetchAll(PDO::FETCH_ASSOC);
Database::disconnect();
?>
<!--<select  size=1 name="score" id="score">
<option name="score" id="score" value="">--الرصيد الحالي --</option>-->
<?php foreach($data as $value): ?>
<input readonly  name="scoreAct" id="scoreAct"  type="text"   value="<?php echo $value['score'] ?>">
<?php endforeach; ?>
                        </div>
                         </div>

                                   <!--score-->

      <div class="control-group">  
    <label for="sub_cat">sub_cat</label>
    <select  id="sub_cat" onchange="changeTest()" name="sub_cat"></select>
    </div>





    <div class="form-actions">
                          <button type="submit" class="btn btn-success">update</button>
                          <a class="btn" href="chaufAffect.php">back</a>
                        </div>


</form>

<script>
function changeTest (  ) { 
var x = document.getElementById("sub_cat").value;
var xBis = document.getElementById("scoreAct").value;
forme.scoreAct.value = x + xBis; 
alert(xS);
}
</script>

</body>
</html>

loadsubcatBis.php the script responsible for updating the fields sub_cat

<?php 
include('config.php'); 
//require 'database.php';

 $parent_cat = $_GET['parent_cat'];

//$pdo = Database::connect();
//$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$query = mysql_query("SELECT * FROM scorejour WHERE id_joursemaine = {$parent_cat}");
while($row = mysql_fetch_array($query)) {
    echo "<option value='$row[id_score]'>$row[score]</option>";
    $sub_cat = $row['score'];
}
?>

i hope i was clear on my explication and i am sorry for my english,
is that someone can help me solve the problem or to find a more efficient solution I am ready thank you in advance

Member Avatar for diafol 
function changeTest (  ) { 
    var sc = document.getElementById("sub_cat");
    var sa = document.getElementById("scoreAct");
    sa.value = parseInt(sa.value) + parseInt(sc.value); 
    alert(sa.value);
}

I am assuming that these values are integers?

Member Avatar for Trabelsi

yes this values are integers

Member Avatar for Trabelsi

I did as you told me , but it did not work , I did as you told me , but it did not work , I think because the initial value of scoreAct fields is read directly from the data base

<label for="scoreAct" >scoreAct</label>
                        <div >
                <?php
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT score FROM personnel WHERE id = {$id} ";
$q = $pdo->prepare($sql);
$q->execute();

, so I thought of creating a new field called NewsCore whose value is the sum of the two fields and sub_cat scorAct and I do like that,

<script>
function changeTest (  ) { 
    var sc = document.getElementById("sub_cat");
    var sa = document.getElementById("scoreAct");
    var sb = document.getElementById("nv_scor");
    sb.value = parseInt(sa.value) + parseInt(sc.value); 
    alert(sb.value);
}
</script>

but still the same problem, I do not know if I thought correctly , and I hope you can help me because it is part of my final project study

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.