Post from one form to another jquery

abrahamgarcia27 · August 22, 2011

I am totally new to coding and i came across a problem that i havent figured out how to do it.

I have a basic registration form with the following fields (Full Name, People Attending, Table Number, Waiter) The 'Table Number' Field calls a variable from another form so when i click on table Number a pop out window with jquery pops out with a Restaurant Table like Diagram. Each button which symbolizes a table has a numerical value. What i want to do is post the value selected from the table form into the Table field in my main form. I have gotten this far, but the problem is that when select a table it refreshes my original page. I was wondering if anyone had an idea how i could attack this problem.

Fadion · August 23, 2011

Two different pages can't easily communicate with each other in real time. It would need a lot of work and in the end, would be totally pointless.

Instead of opening a new page, open the table diagram inside the main page with jQuery. It can be a modal window, a lightbox-like one, or whatever, as long as it's in the same page it's fine. It will be easy after that to modify with jQuery the table number based on the choice in the table diagram. You'll just need to set up an event handler for the table diagram click and write the choice in the input of the table number.

Hope you get what I mean.

abrahamgarcia27 · August 24, 2011

This is the code that worked for me no i just have another question on how to close the modal dialog box when i select a button


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>Local Store Reservation Form</title>
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
  <script src="src/facebox.js" type="text/javascript"></script>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loadingImage : 'src/loading.gif',
        closeImage  : 'src/closelabel.png'
      })
    })
  </script>

<!-- jQuery & jQuery UI + theme (required) -->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.15.custom.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<!-- keyboard widget css & script (required) -->
<link rel="stylesheet" href="css/keyboard.css">
<script src="js/jquery.keyboard.js"></script>

<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<!--
<script src="js/jquery.keyboard.extension-typing.js"></script>
<script src="js/jquery.keyboard.extension-autocomplete.js"></script>
-->

<!-- initialize keyboard (required) -->
<script>
$(function(){
$('#keyboard').keyboard();
});
</script>
    <script>
$(function(){
$('#keyboard2').keyboard();
});
</script>
    <script>
$(function(){
$('#keyboard3').keyboard();
});
</script>
<script>
$(function(){
$('#keyboard4').keyboard();
});
</script>




</head>
<body>
<form name="registerreservation" method="post" action="localregister.php">
<table width="600px" align="center">

<tr>
<td valign="middle">
<label for ="fname">Full Name: </label>
</td>
<td valign="middle">
<input id="keyboard" type="text" name="fname" maxlength="50" height="30"size="30" />
</td>
</tr>


<tr>
<td valign="middle">
<label for="n_people">People Attending:</label>
</td>
<td valign="middle">
<input id="keyboard2" type="text" name="n_people"  maxlength="50" height="30" size="30"  />
</td>
</tr>


<tr>
<td valign="middle">
<label for="t_number">Table Number: </label>
</td>
<td valign="middle">
<a href="#info" rel="facebox"><input type="text" name="t_number" value="Select a Table..."  height="30" maxlength="50" size="30" /></a>

   
</tr>


<tr>
<td valign="middle">
<label for="waiter"> Waiter: </label>
</td>
<td valign="middle">
<?php
$con=mysql_connect("localhost","root","")
or die("couldn't connect to mysql");
$db=mysql_select_db("ac_res",$con)
or die("database not found");
$result=mysql_query("SELECT fname FROM waiter")
or die("query error");
echo "<select name=waiter>";
while($r=mysql_fetch_array($result))
{
//echo $r['name'];
echo "<option value='".$r['fname']."'>".$r['fname']."</option>";
}
echo "</select>";
?>

</td>
</tr>

<tr>
<td colspan="2" style="text-align:center">
<input type="submit" name="reserve" value="Reserve"/>
</td>
</tr>

</table>
</form>

<div id="info" style="display:none;">
<code>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    </code>
  <script>
    $("button").click(function () {
      var text = $(this).text();
      $('input[name*="t_number"]').val(text);
    });
</script> 
   
 
  </div>
</body>
</html>

Edited March 19, 2016 by requinix
removing password by request

Sign In

Post from one form to another jquery

Recommended Posts

abrahamgarcia27

Link to comment

Share on other sites

Fadion

Link to comment

Share on other sites

abrahamgarcia27

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information