CODEWITHSUNDEEP
phpjavascriptmysqlajaxcodeigniter
Ricky Mason
Ricky Mason

Reputation: 1828

using ajax jquery to run php script

Using Codeigniter, I am trying to get a php script to run after a user clicks on a submit button. I have followed quite a few tutorials and have come up with the following code:

If it would help to see the actual page you can visit it here: http://rickymason.net/townbuilder guest/guest to login (currently required)

In my view (structures.php), I have : 

<div id="structures">
<h1>Build</h1>
<form name="buildForm" id="buildForm" method="POST">
    <select name="buildID" class="buildClass">
    <option value="0" selected="selected" data-skip="1">Build a Structure</option>
<?php foreach ($structures as $structure_info): ?>
<option name='<?php echo $structure_info['str_name'] ?>' value='<?php echo $structure_info['str_id'] ?>' data-icon='<?php echo $structure_info['str_imageloc'] ?>' data-html-text='<?php echo $structure_info['str_name'] ?><i>
    <?php echo $structure_info['timebuildmins'] ?> minutes<br><?php echo $structure_info['buy_gold'] ?> gold</i>'><?php echo $structure_info['str_name'] ?></option>
<?php endforeach ?>
    </select>
    <div id="buildSubmit">
        <input class="button" type="submit" value="Submit"/>
    </div>
</form>
</div>
<div id="output"> Result here</div>

This creates my select form and creates it in html. I then created a .js file to run the ajax: 

$("#submit").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: '../php/build.php',        
data: "",
dataType: 'json',                     
success: function(data)          
{
  alert("success!");
} 
});
});

I tried to keep it as simple as I could, just for testing purposes. Javascript is new to me, and I find it extremely confusing for some reason. From what I can gather, this script should activate after the submit button is pressed. It then runs the build.php script, then if it returns an echo through json, it alerts success. right?

my build.php script is below:

<?php
    $query = "INSERT INTO user_structure (str_id, user_id) VALUES ('7', '7')";
    mysql_query($query) or die ('Error updating database');      
    echo "success";
?>

Again, very simple...

Unfortunately, when I click submit, the page seems to "refresh" but nothing happens. I don't expect anything to happen on the page, but the database doesn't receive any values either.

I do not have the build.php or build.js files in a controller or model, they are outside the application directory and are accessed outside the CI uri/url structure.

As of right now, I am simply trying to successfully run a php script by clicking submit. My final goal is to take the str_id value that is created for the form, then pass that variable and the user_id into the build.php file, create the db entry, then refresh the page to display the updated DB info.

Obviously, it is not working! Any help would be greatly appreciated.

Upvotes: 0

Views: 3187

Answers (3)

Joshua
Joshua

Reputation: 866

Your jquery code targets an element with the id of 'submit' however, your form has an id of 'buildForm' hence the code does not target the form and when you click submit it just goes on with its normal behaviour, which causes the screen to refresh, To fix this, change the selector in your jquery code

$("#buildForm").submit(function(e){
    // the rest of the code here remains
});

This should fix it

Upvotes: 0

user2953222
user2953222

Reputation:

Add an action attribute for your form:

<form action="build.php" name="buildForm" id="buildForm" method="POST">`

OR:

<form action="<?php /* Script code here */ ?>" name="buildForm" id="buildForm" method="POST">`

Upvotes: 0

Shyju
Shyju

Reputation: 218962

That script works with an element having id "submit" (because you use "#submit" as the selector)

Use the click event instead of submit

Either you can give an id to your submit like this

and use like this

$("#btnSubmit").click(function(e){
   // your rest of code
});

or use the class name

$(".button").click(function(e){
   // your rest of code
});

But It is always better to use the id becaues there will be only one ( and should be) element with an id. More than one element can have the same class.

Upvotes: 1

Related Questions