CODEWITHSUNDEEP
phpjavascript
user1578456
user1578456

Reputation:

javascript code is not being executed

I am working on this project in which I am trying to get a returned value so I can autofill my input boxes according to what the client selects.

This code however is not executing and I do not know why. When I remove the src="jquery area" $(#dropdown).on is an undefined method; not to sure what to do. 

<script  type="text/javascript"  src="http://code.jquery.com/jquery-latest.min.js">
//$.post(url, [data], [callback], [callback type])

    ("#dropdown").on('change', function() {//when you select something from the dropdown function run and will switch the data
        $.post("backgroundScript.php", {
                uid: $(this).val()
            },
             function(data) {
                 $("#first").val(data.first);
               $("#last").val(data.last);
               // etc.;
            }, 'json'
        );

    });
</script>

Here's my full code

try {  
  # MySQL with PDO_MYSQL  
  $DBH = new PDO("mysql:host=$hostname;dbname=$database", $username, $password);  
  $DBH->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

  //$DBH->prepare('SELECT first FROM contacts');
}  
catch(PDOException $e) { 
    echo "I'm sorry, I'm afraid I can't do that.";  
    file_put_contents('PDOErrors.txt', $e->getMessage(), FILE_APPEND);   
}  
//get query
$FNresult=$DBH->query('SELECT first FROM contacts'); 
//set fetch mode
$FNresult->setFetchMode(PDO::FETCH_ASSOC);

$dropdown = "<select name='contacts' id='contacts' >";

while($row =$FNresult->fetch()) {

  $dropdown .= "\r\n<option value='{$row['first']}'>{$row['first']}</option>";
 // echo getLN();

}

$dropdown .= "\r\n</select>";

echo $dropdown;

//}
/*
//                  Get last name

function getLN(){
    $query = "SELECT last FROM contacts";
    $LNresult=mysql_query($query);

    $last;
    while($row = mysql_fetch_assoc($LNresult)) {

        $last = "{$row['last']}";

    }
    echo $last;
}//end getLN
*/

$DBH = null; 
?>
<!-- javascript on client-side -->
<script  type="text/javascript"  src="http://code.jquery.com/jquery-latest.min.js">
//$.post(url, [data], [callback], [callback type])

    ("#dropdown").on('change', function() {//when you select something from the dropdown function run and will switch the data
        $.post("backgroundScript.php", {
                uid: $(this).val()
            },
             function(data) {
                 $("#first").val(data.first);
               $("#last").val(data.last);
               // etc.;
            }, 'json'
        );

    });
</script>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

/*("#dropdown").on('connection', function (stream) {
  console.log('Ah, we have our first user!');
});*/</script>

<form action="insert.php" method="post">
First Name: <input type="text" id="first" name="first"><br>
Last Name: <input type="text" id="last"><br>
Phone: <input type="text" id="phone"><br>
Mobile: <input type="text" id="mobile"><br>
Fax: <input type="text" id="fax"><br>
E-mail: <input type="text" id="email"><br>
Web: <input type="text" id="web"><br>
<input type="Submit">
</form>

here is my new edited script on output page = 

<script type="text/javascript"
     src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>    

//$("#dropdown-parent").on('change','#dropdown', function() { // replace dropdown-parent
    $("#contacts").on('change','#dropdown', function() {

        $.post("backgroundScript.php", { 
                uid: $(this).val() 
            }, 
             function(data) { 
                 $("#first").val(data.first); 
                 $("#last").val(data.last); 
                 // etc.; 
            }, 'json' 
        ); 
    }); 
</script>

here is the php file for backgroundScript.php = 

<?

// background script

// retrieve data based on $_POST variable, set to $returnArray

$returnArray = $_POST[array(
         'first' => firstName,
         'last' => lastName,
)];

/****************************
 * the structure of returnArray should look something like
     array(
         'first' => firstName,
         'last' => lastName,

     )*/
echo json_encode($returnArray);
?>

this file will send in info so the javascript will then replace form fields with what ever is held in the areas appointed

Upvotes: 1

Views: 540

Answers (4)

Valjas
Valjas

Reputation: 5004

You need to include your jQuery prior to using it:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
  // Your Code Here
</script>

Better yet would be to use external JS:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/site.js"></script>

And if you're using HTML5 the type="text/javascript" isn't even needed so:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/site.js"></script>

Even better still would be to use a jQuery CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/site.js"></script>

Also, as others have noted, be sure to use $ at the beginning of your jQuery factories. i.e. $('#dropdown')

-- Update --

Further clarification on project tree, most basic project trees look like this:

root/
 |--css/
 |--images/
 |--js/
    |--site.js
 |--index.html

-- Update 2 --

Example of a $.post

$.post({
    'somescript.php', // Script your posting to
    { 
        someParam1: someData1, // $_POST['someParam1']
        someParam2: someData2
        // etc etc
    },
    function(response){
        // Do something with JSON response upon successful post
        alert(response);
    },
    'json' // Tells the script that JSON will be returned
});

-- Update 3 --

Okay so basically you want to do is...

Javascript:

var dropdown = $('#dropdown');

dropdown.bind('change', function(){
    $post.(
        'backgroundScript.php', 
        { 
            first: dropdown.val() 
        },
        function(response) {
            $('#first').val(response.first);
            $('#last').val(response.last);
            // Repeat for all of your form fields
        },
        'json'
    );
});

Receive POST param:

$firstName = $_POST['first'];

MySQL query would be something like the following:

$sth = $dbh->prepare('SELECT *
    FROM contacts
    WHERE first = :first');
$sth->bindParam(':first', $first, PDO::PARAM_STR);
$sth->execute();

Then add all of your MySQL fields into associative array array(key => value) and then json_encode and return array.

Upvotes: 1

tsukimi
tsukimi

Reputation: 1645

Shouldn't 

("#dropdown").on('change', function() {

be

$("#contacts").on('change', function() {

Upvotes: 0

Marc B
Marc B

Reputation: 360572

It would appear that your PHP script is returning some formatted html, which you then try to insert into the dom via .val(). That method is used to set the values of form fields, not insert entire chunks of html. Try using .append() or .html() instead, plus do what Phil suggested above - split your script into multiple blocks.

Upvotes: 2

Mihai Matei
Mihai Matei

Reputation: 24276

<script  type="text/javascript"  src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>    
    $("#dropdown-parent").on('change','#dropdown', function() { // replace dropdown-parent
        $.post("backgroundScript.php", { 
                uid: $(this).val() 
            }, 
             function(data) { 
                 $("#first").val(data.first); 
                 $("#last").val(data.last); 
                 // etc.; 
            }, 'json' 
        ); 

    }); 
<script>

In your PHP you should have something like this

echo json_encode(array('first' => $some_value, 'last' => "Other value"));

Upvotes: 1

Related Questions