First off, I have extensively researched this, and have been unable to successfully apply any of the answers I've found, at least in the way that I want. I think I'm close, but I may be way off...
A similar question was asked here: Submit form in div with ajax, return php in div without refresh
I am essentially working with 4 divs, div 1 offers a choice of adding, editing, or dropping users. div 2 is a new row in the container, When you select Add, the file loaded creates 2 columns inside the row (both separate divs), the first (div 3) with a drop-down menu asking how many users you want to add. The answer is sent to another PHP file which uses a FOR loop to create the right number of forms, and is supposed to then load them into div 4 (which is id'd as 'forms' at the end of the included code).
The PHP all works fine, and loading the initial drop-down into div 2 works, but every time I hit submit, it does nothing and erases the whole row (which includes the drop-down (div 3 with the drop-down, and div 4 for the forms). If I change the action on the 'num' form to the actual php file, it loads the forms on a new page, instead of in the target div...here's what I think is the relevant code.
controls.php
<?php
require_once 'header.php';
if ($loggedin == true && ($user->roles == 1 || $user->roles == 2)) {
echo <<<_END
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src='https://code.jquery.com/jquery.js'></script>
<script src='js/bootstrap.min.js'></script>
<script>
$(document).ready(function(){
$('#addUsr').click(function(){
$('#controls').load('add.php', function(){
});
});
$('#editUsr').click(function(){
$('#controls').load('edit.php', function(){
});
});
$('#updateUsr').click(function(){
$('#controls').load('update.php', function(){
});
});
});
</script>
<hr class='small-divider'></hr>
<div class='row'>
<div class='col-md-8'>
<h2>Welcome to the User Control Panel</h2>
<p>To use this feature, please choose from the options to the right, and the appropriate form will appear below.</p>
</div>
<div class='col-md-4' id='ctrlwho'>
<h4>What do you want to do?</h4>
<p><button class='btn btn-md btn-primary' id='addUsr' type='button'>Add new</button></p>
<p><button class='btn btn-md btn-primary' id='editUsr' type='button'>Edit current</button></p>
<p><button class='btn btn-md btn-primary' id='updateUser' type='button'>Update Oficers and Committee Heads</button></p>
</div>
</div>
<div class='row' id='controls'>
</div>
</div>
_END;
}
?>
add.php
<?php
echo <<<_END
<script>
$("#num").submit(function(){
$.ajax({
url: 'add.forms.php',
type: 'POST',
data: $("#num").serialize(),
success: function(data) {
$("#forms").empty();
$("#forms").append(data);
}
});
return false;
});
</script>
<div class='col-md-3' id='numForm'> // ineloquently called div-3 in my post
<p>How many users do you want to add?</p>
<p><form name='num' id='num' method='POST' action=''>
<select name='number' size='1' id='select-1'>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=10>10</option>
<option value=15>15</option>
<option value=20>20</option>
<option value=30>30</option>
<option value=50>50</option>
</select>
<input type='submit' value='This Many' />
</form>
</div>
<div class='col-md-9' id='forms'> </div> // ineloquently called div-4 above
_END;
?>
I imagine it's something relatively simple, but it seems ridiculous to keep struggling with it when there's such a great resource available here. Thanks in advance for your help!
Not sure if this is the problem, but:
You should get rid of the last parenthesis on this line:
$("#num").submit(function()({
It should just be:
$("#num").submit(function(){
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.