NOTE: Here is the fiddle, and since that looks awful, Here is the full screen result
Here is the fiddle after I do my changes on my computer and generate the html, and here is the full screen
Note on the fiddle: I added the entire code into the fiddle since it won't work unless it's the whole code.
Thanks to anyone who will give hints! My only problem here is the one in the title, nothing else. :)
=====
I'm working on an undergraduate project to create an interface that accesses a database (though I'm not a CS student). My code is behaving very strangely. I have code for one window that displays one large div encasing three divs side byside, which is structured this way:
<div id="container">
<div id="window1">
<form></form> //my buttons
</div>
<div id="window2">
<form></form> //my body
</div>
<div id="window3">
//I havent written anything here yet
</div>
</div>
But I realized it makes more sense for me to encase them all in just one form. Like this:
<div id="container">
<form>
<div id="tab1">
</div>
<div id="tab2">
</div>
<div id="tab3">
</div>
</form>
</div>
So in the first case, this is what my website looks like:
But after I change it:
What's weird is, if I put forms in my forms, it starts working again! So this works:
<div id="container">
<form>
<div id="tab1">
<form></form>
</div>
<div id="tab2">
<form></form>
</div>
<div id="tab3">
</div>
</form>
</div>
If you need to see my code, I actually am using PHP to generate the html since it's a lot, so (this is the method that doesn't work):
<div id="search_separator" class="upper_tab">
<form action="" method="post">
<div id="button_container">
<?php
$tbs_a = 1;
$tbs_name = 'table_selector';
$printRetain_button = '';
$fg = input::get($tbs_name);
echo '<label for="',$tbs_name,'"></label>';
foreach($table_arrays AS $ta => $table){
$tbs_val = "table".$tbs_a;
if($tbs_a==1){
echo '<div class="button"><input type="radio" class="tabl_selector" name="',$tbs_name,'" value="',$tbs_val,'" checked="default"/><div class="table_selector">',$ta,'</div></div>';
}else{
echo '<div class="button"><input type="radio" class="tabl_selector" name="',$tbs_name,'" value="',$tbs_val,'"';
if($tbs_val == $fg){
echo ' checked="checked"';
}//make a separate echo for table1 radio button with the default turned on.
echo '/><div class="table_selector">',$ta,'</div></div>';
}
$tbs_a++;
}
?>
<!--<input type="submit" name="submit" value="submit" />-->
</div>
<div id="search_container" class="content">
<?php
$a = 1;
$search = DB::getInstance();
foreach($table_arrays AS $t_a => $table){
$y = 1;
echo '<div id="table',$a,'_content" class="table_content">';
echo "<h2>",$t_a,'</h2><table align="center" id="actualhtmltable">';
foreach($table AS $t => $field){
$name = "table".$a."_field".$y;
$val_sticky = escape(input::get($name));
$val_find = $search->get($t_a, array($t, '=', input::get($name)));
//$val_find = $search->get('user_credentials', array('user_id', '=', 28))->results();
if(!empty($val_find)){
$val = array();
foreach($val_find[0] AS $vfz){
$val[] = $vfz;
}
} elseif(!empty($val_sticky)){
$valu = $val_sticky;
} else {
$valu = "";
}
echo '<tr><div><td>',$t,'</td><td><label for="',$name,'"><input type="text" class="entryfields" name="',$name,'" value="';
if(!empty($val[$y-1])){
echo $val[$y-1];
} else {
echo $valu;
}
echo '" /></label></td></div></tr>';
$y++;
}
echo '</table></div>';
$a++;
}
?>
<div class="Tableformbutton">
<div class="FindModeButtons">
<input type="Submit" name="find" value="Find" id="find" class="findupdateinsert" />
<input type="Submit" name="update" value="Update" id="update" class="findupdateinsert" />
</div>
<input type="Submit" name="insert" value="Insert" id="insert" class="findupdateinsert" />
</div>
</div>
<div id="other_container">
<!--find mode on and other functionalities-->
</div>
<div class="hassubmit" id="searchsubmit_container">
<input type="button" id="findmodetoggler" name="query_submit" value="Toggle Find Mode" class="top_buttons" />
<a href="#" class="tip"><input="button" name="Help" value="Help" class="top_buttons" id="help" />
<span> Click "Toggle Find Mode" to toggle between find/update and insert buttons.<br />
If find mode is on, you will be able to look for existing records and update them. Otherwise, you can only insert new entries.<br />
Find mode is off by default.</span>
<p>Need Help?</p>
</a>
</div>
</form>
</div>
As far as I can tell, it is supposed to work! I don't see anything in my HTML, and as for my CSS, I have styled nothing about forms in there, only divs and labels and input tags. What could be wrong?
Thanks to anyone who'll give hints or ideas!