Jump to content

Introduce script/form from another page

MartynLearnsPHP

By MartynLearnsPHP
in Javascript Help

 Share

Recommended Posts

MartynLearnsPHP Member

MartynLearnsPHP

Posted
Posted

I need to embed 61 forms on a page which only become visible when a certain image is clicked on. Having these all one one page means that the page is very cumbersome, so I thought that the best way to move forward would be to have javascript against each of the images and, if clicked on, would call up a form from a different page in a pop-up window.

 

I have historically used the following javascript to call up a form which is hidden in the page until required:

 

Javascript:

$(document).ready(function(){
	
	$(function() {
		$("#dialog1").dialog({
			autoOpen: false
		});
		$("#button1").on("click", function() {
			$("#dialog1").dialog("open");
		});
	});

	//validating Form Fields.....
	$("#submit1").click(function(e){

	var seat1 = $("#seat1").val();
	var name1 = $("#name1").val();
	if( seat1 ==='' || name1 ==='')
       {
		 alert("Please complete both fields");
		 e.preventDefault();
       }
    	 else 
	   {
         alert("Table formatted successfully");
	   }
	});
		
});

HTML Script:

<div id="dialog1" title="Table Format">
	<form action="" method="post">
		<label>Table Name:</label><br/>
		<input type="text" id="name1" name="name1"><br/>
		<label>Number of Seats:</label><br/>
		<select id="seat1" name='seat1'>
			<option value=''>---Please Select---</option>
			<option value='0'>0</option>
			<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='6'>6</option>
			<option value='7'>7</option>
			<option value='8'>8</option>
			<option value='9'>9</option>
			<option value='10'>10</option>
			<option value='11'>11</option>
			<option value='12'>12</option>
			<option value='13'>13</option>
			<option value='14'>14</option>
			<option value='15'>15</option>
			<option value='16'>16</option>
			<option value='17'>17</option>
			<option value='18'>18</option>
			<option value='19'>19</option>
			<option value='20'>20</option>
			<option value='21'>21</option>
			<option value='22'>22</option>
			<option value='23'>23</option>
			<option value='24'>24</option>
		</select><br/><br>
		<input type="hidden" name="id" value="<?php echo $tableid; ?>" >
		<input type="hidden" name="token" value="<?php if(isset($token)) {echo $token;  else {echo $token = Token::generate(); } ?>" >
		<input type="submit" id="submit1" value="Submit" name="assign1" />
	</form>

I want to use this a similar script on a new page, but because it works with 61 different form instructions, I want to have the forms in seperate .php pages.

 

So I have been trying to amend the Javascript to accomodate this. I have tried the following:

 

Javascript:

$(document).ready(function(){
	
	$(function() {
		$("table1allocate.php").assign({
			autoOpen: false
		});
		$("#button1").on("click", function() {
			$("table1allocate.php").assign("open");
		});
	});

});

where table1allocate.php is a page with the following form:

 

HTML:

<?php
require 'core/memberinit.php';
$member = new Member();
$admin = $member->data() ->admin_username;
$adminid = $member->data() ->adminid;
if(isset($_GET['x'])) {
	$x= html_entity_decode($_GET['x']);

	echo	"<form action='allocatetables.php' method='post' title='Table Format'>";

	$table = DB::GetInstance()->query("SELECT * FROM guesttables WHERE adminid = '{$adminid}' && position1 != '0'");
	foreach ($table->results() as $tableresults);
	if ($tableresults->seat1 == '0') {
	echo "No guest numbers have been allocated to this table.";
	} else {
	if ($tableresults->seat1 >= '1') 
	{
		echo   "<label>Seat 1: &nbsp</label>
				<select name='guest1'>
				<option value='" . $tableresults->guest1 . "'>Please Select</option> 
				<option value=''>Leave Seat Empty</option> ";
		
		$seat1query = DB::getInstance()->query("SELECT firstname, lastname, id
			FROM guests
			WHERE NOT EXISTS
			(SELECT guest1, guest2, guest3, guest4, guest5, guest6, guest7, guest8, guest9, guest10, guest11, guest12, 
				guest13, guest14, guest15, guest16, guest17, guest18, guest19, guest20, guest21, guest22, guest23, guest24
			FROM tableplan
			WHERE guests.id = guest1 || guests.id = guest2 || guests.id = guest3 || guests.id = guest4 || guests.id = guest5
				|| guests.id = guest6 || guests.id = guest7 || guests.id = guest8 || guests.id = guest9 || guests.id = guest10
				|| guests.id = guest11 || guests.id = guest12 || guests.id = guest13 || guests.id = guest14 || guests.id = guest15
				|| guests.id = guest16 || guests.id = guest17 || guests.id = guest18 || guests.id = guest19 || guests.id = guest20
				|| guests.id = guest21 || guests.id = guest22 || guests.id = guest23 || guests.id = guest24) && adminid = '{$adminid}'
			ORDER BY lastname, firstname");				
			foreach ($seat1query->results() as $seat1row) {
				echo "<option value=" . $seat1row->id . ">" . $seat1row->firstname . " " . $seat1row->lastname . "</option>";
			}
		echo "</select><br><br>";
	} else {
		echo "<input type='hidden' name='guest1' value=''>";
	}
	
	if ($tableresults->seat2 >= '2') {
		echo "	<label>Seat 2:</label>
				<select name='guest2'>
				<option value='" . $tableresults->guest2 . "'>Please Select</option> 
				<option value=''>Leave Seat Empty</option> ";
		
		$seat2query = DB::getInstance()->query("SELECT firstname, lastname, id
			FROM guests
			WHERE NOT EXISTS
			(SELECT guest1, guest2, guest3, guest4, guest5, guest6, guest7, guest8, guest9, guest10, guest11, guest12, 
				guest13, guest14, guest15, guest16, guest17, guest18, guest19, guest20, guest21, guest22, guest23, guest24
			FROM tableplan
			WHERE guests.id = guest1 || guests.id = guest2 || guests.id = guest3 || guests.id = guest4 || guests.id = guest5
				|| guests.id = guest6 || guests.id = guest7 || guests.id = guest8 || guests.id = guest9 || guests.id = guest10
				|| guests.id = guest11 || guests.id = guest12 || guests.id = guest13 || guests.id = guest14 || guests.id = guest15
				|| guests.id = guest16 || guests.id = guest17 || guests.id = guest18 || guests.id = guest19 || guests.id = guest20
				|| guests.id = guest21 || guests.id = guest22 || guests.id = guest23 || guests.id = guest24) && adminid = '{$adminid}'
		ORDER BY lastname, firstname");				
		foreach ($seat2query->results() as $seat2row) {
				echo "<option value=" . $seat2row->id . ">" . $seat2row->firstname . " " . $seat2row->lastname . "</option>";
			}
		echo "</select><br><br>";
	} else {
		echo "<input type='hidden' name='guest2' value=''>";
	}
			
	if ($tableresults->seat3 >= '3') {
		echo "	<label>Seat 3: &nbsp</label>
				<select name='guest3'>
				<option value='" . $tableresults->guest3 . "'>Please Select</option> 
				<option value=''>Leave Seat Empty</option> ";
		
	$seat3query = DB::getInstance()->query("SELECT firstname, lastname, id
		FROM guests
			WHERE NOT EXISTS
			(SELECT guest1, guest2, guest3, guest4, guest5, guest6, guest7, guest8, guest9, guest10, guest11, guest12, 
				guest13, guest14, guest15, guest16, guest17, guest18, guest19, guest20, guest21, guest22, guest23, guest24
			FROM tableplan
			WHERE guests.id = guest1 || guests.id = guest2 || guests.id = guest3 || guests.id = guest4 || guests.id = guest5
				|| guests.id = guest6 || guests.id = guest7 || guests.id = guest8 || guests.id = guest9 || guests.id = guest10
				|| guests.id = guest11 || guests.id = guest12 || guests.id = guest13 || guests.id = guest14 || guests.id = guest15
				|| guests.id = guest16 || guests.id = guest17 || guests.id = guest18 || guests.id = guest19 || guests.id = guest20
				|| guests.id = guest21 || guests.id = guest22 || guests.id = guest23 || guests.id = guest24) && adminid = '{$adminid}'
		ORDER BY lastname, firstname");					
		foreach ($seat3query->results() as $seat3row) {
				echo "<option value=";
				echo $seat3row->id;
				echo ">";
				echo $seat3row->firstname;
				echo "&nbsp";
				echo $seat3row->lastname;
				echo "</option>";
			}
		echo "</select><br><br>";
	} else {
		echo "<input type='hidden' name='guest3' value=''>";
	}
			
	if ($tableresults->seat4 >= '4') {
		echo "	<label>Seat 4: &nbsp</label>
				<select name='guest4'>
				<option value='" . $tableresults->guest4 . "'>Please Select</option> 
				<option value=''>Leave Seat Empty</option> ";
		
	$seat4query = DB::getInstance()->query("SELECT firstname, lastname, id
		FROM guests
			WHERE NOT EXISTS
			(SELECT guest1, guest2, guest3, guest4, guest5, guest6, guest7, guest8, guest9, guest10, guest11, guest12, 
				guest13, guest14, guest15, guest16, guest17, guest18, guest19, guest20, guest21, guest22, guest23, guest24
			FROM tableplan
			WHERE guests.id = guest1 || guests.id = guest2 || guests.id = guest3 || guests.id = guest4 || guests.id = guest5
				|| guests.id = guest6 || guests.id = guest7 || guests.id = guest8 || guests.id = guest9 || guests.id = guest10
				|| guests.id = guest11 || guests.id = guest12 || guests.id = guest13 || guests.id = guest14 || guests.id = guest15
				|| guests.id = guest16 || guests.id = guest17 || guests.id = guest18 || guests.id = guest19 || guests.id = guest20
				|| guests.id = guest21 || guests.id = guest22 || guests.id = guest23 || guests.id = guest24) && adminid = '{$adminid}'
		ORDER BY lastname, firstname");					
		foreach ($seat4query->results() as $seat4row) {
				echo "<option value=";
				echo $seat4row->id;
				echo ">";
				echo $seat4row->firstname;
				echo "&nbsp";
				echo $seat4row->lastname;
				echo "</option>";
			}
		echo "</select><br><br>";
	} else {
		echo "<input type='hidden' name='guest4' value=''>";
	}
			
	if ($tableresults->seat5 >= '5') {
		echo "	<label>Seat 5: &nbsp</label>
				<select name='guest5'>
				<option value='" . $tableresults->guest5 . "'>Please Select</option> 
				<option value=''>Leave Seat Empty</option> ";
		
	$seat5query = DB::getInstance()->query("SELECT firstname, lastname, id
		FROM guests
			WHERE NOT EXISTS
			(SELECT guest1, guest2, guest3, guest4, guest5, guest6, guest7, guest8, guest9, guest10, guest11, guest12, 
				guest13, guest14, guest15, guest16, guest17, guest18, guest19, guest20, guest21, guest22, guest23, guest24
			FROM tableplan
			WHERE guests.id = guest1 || guests.id = guest2 || guests.id = guest3 || guests.id = guest4 || guests.id = guest5
				|| guests.id = guest6 || guests.id = guest7 || guests.id = guest8 || guests.id = guest9 || guests.id = guest10
				|| guests.id = guest11 || guests.id = guest12 || guests.id = guest13 || guests.id = guest14 || guests.id = guest15
				|| guests.id = guest16 || guests.id = guest17 || guests.id = guest18 || guests.id = guest19 || guests.id = guest20
				|| guests.id = guest21 || guests.id = guest22 || guests.id = guest23 || guests.id = guest24) && adminid = '{$adminid}'
		ORDER BY lastname, firstname");				
		foreach ($seat5query->results() as $seat5row) {
				echo "<option value=";
				echo $seat5row->id;
				echo ">";
				echo $seat5row->firstname;
				echo "&nbsp";
				echo $seat5row->lastname;
				echo "</option>";
			}
		echo "</select><br><br>";
	} else {
		echo "<input type='hidden' name='guest5' value=''>";
	}
			
	if ($tableresults->seat6 >= '6') {
		echo "	<label>Seat 6: &nbsp</label>
				<select name='guest6'>
				<option value='" . $tableresults->guest6 . "'>Please Select</option> 
				<option value=''>Leave Seat Empty</option> ";
		
	$seat6query = DB::getInstance()->query("SELECT firstname, lastname, id
		FROM guests
			WHERE NOT EXISTS
			(SELECT guest1, guest2, guest3, guest4, guest5, guest6, guest7, guest8, guest9, guest10, guest11, guest12, 
				guest13, guest14, guest15, guest16, guest17, guest18, guest19, guest20, guest21, guest22, guest23, guest24
			FROM tableplan
			WHERE guests.id = guest1 || guests.id = guest2 || guests.id = guest3 || guests.id = guest4 || guests.id = guest5
				|| guests.id = guest6 || guests.id = guest7 || guests.id = guest8 || guests.id = guest9 || guests.id = guest10
				|| guests.id = guest11 || guests.id = guest12 || guests.id = guest13 || guests.id = guest14 || guests.id = guest15
				|| guests.id = guest16 || guests.id = guest17 || guests.id = guest18 || guests.id = guest19 || guests.id = guest20
				|| guests.id = guest21 || guests.id = guest22 || guests.id = guest23 || guests.id = guest24) && adminid = '{$adminid}'
		ORDER BY lastname, firstname");					
		foreach ($seat6query->results() as $seat6row) {
				echo "<option value=";
				echo $seat6row->id;
				echo ">";
				echo $seat6row->firstname;
				echo "&nbsp";
				echo $seat6row->lastname;
				echo "</option>";
			}
		echo "</select><br><br>";
	} else {
		echo "<input type='hidden' name='guest6' value=''>";
	}
			
	if ($tableresults->seat7 >= '7') {
		echo "	<label>Seat 7: &nbsp</label>
				<select name='guest7'>
				<option value='" . $tableresults->guest7 . "'>Please Select</option> 
				<option value=''>Leave Seat Empty</option> ";
		
	$seat7query = DB::getInstance()->query("SELECT firstname, lastname, id
		FROM guests
			WHERE NOT EXISTS
			(SELECT guest1, guest2, guest3, guest4, guest5, guest6, guest7, guest8, guest9, guest10, guest11, guest12, 
				guest13, guest14, guest15, guest16, guest17, guest18, guest19, guest20, guest21, guest22, guest23, guest24
			FROM tableplan
			WHERE guests.id = guest1 || guests.id = guest2 || guests.id = guest3 || guests.id = guest4 || guests.id = guest5
				|| guests.id = guest6 || guests.id = guest7 || guests.id = guest8 || guests.id = guest9 || guests.id = guest10
				|| guests.id = guest11 || guests.id = guest12 || guests.id = guest13 || guests.id = guest14 || guests.id = guest15
				|| guests.id = guest16 || guests.id = guest17 || guests.id = guest18 || guests.id = guest19 || guests.id = guest20
				|| guests.id = guest21 || guests.id = guest22 || guests.id = guest23 || guests.id = guest24) && adminid = '{$adminid}'
		ORDER BY lastname, firstname");					
		foreach ($seat7query->results() as $seat7row) {
				echo "<option value=";
				echo $seat7row->id;
				echo ">";
				echo $seat7row->firstname;
				echo "&nbsp";
				echo $seat7row->lastname;
				echo "</option>";
			}
		echo "</select><br><br>";
	} else {
		echo "<input type='hidden' name='guest7' value=''>";
	}
			
	if ($tableresults->seat8 >= '8') {
		echo "	<label>Seat 8: &nbsp</label>
				<select name='guest8'>
				<option value='" . $tableresults->guest8 . "'>Please Select</option> 
				<option value=''>Leave Seat Empty</option> ";
		
	$seat8query = DB::getInstance()->query("SELECT firstname, lastname, id
		FROM guests
			WHERE NOT EXISTS
			(SELECT guest1, guest2, guest3, guest4, guest5, guest6, guest7, guest8, guest9, guest10, guest11, guest12, 
				guest13, guest14, guest15, guest16, guest17, guest18, guest19, guest20, guest21, guest22, guest23, guest24
			FROM tableplan
			WHERE guests.id = guest1 || guests.id = guest2 || guests.id = guest3 || guests.id = guest4 || guests.id = guest5
				|| guests.id = guest6 || guests.id = guest7 || guests.id = guest8 || guests.id = guest9 || guests.id = guest10
				|| guests.id = guest11 || guests.id = guest12 || guests.id = guest13 || guests.id = guest14 || guests.id = guest15
				|| guests.id = guest16 || guests.id = guest17 || guests.id = guest18 || guests.id = guest19 || guests.id = guest20
				|| guests.id = guest21 || guests.id = guest22 || guests.id = guest23 || guests.id = guest24) && adminid = '{$adminid}'
		ORDER BY lastname, firstname");					
		foreach ($seat8query->results() as $seat8row) {
				echo "<option value=";
				echo $seat8row->id;
				echo ">";
				echo $seat8row->firstname;
				echo "&nbsp";
				echo $seat8row->lastname;
				echo "</option>";
			}
		echo "</select><br><br>";
	} else {
		echo "<input type='hidden' name='guest8' value=''>";
	}
?>

But the pop up window isn't working and isn't bringing in the form from the other page.

 

Any suggestions on what javascript I should be looking at to make the form on the other page appear in a pop-up window?

Link to comment
https://forums.phpfreaks.com/topic/294953-introduce-scriptform-from-another-page/
Share on other sites
mac_gyver Prolific Member

mac_gyver

Posted
Posted
i'll address your first two pieces of code first, as this may suggest ways of solving your current problem.
 
even if you are dynamically producing the repeated sections of javascript/html, that only differ in the values/id's they operate on, this is not how to do this. you should use jquery class, element, and $(this) selector, so that one general purpose instance of the jquery/jquery ui code can operate on the form corresponding to any dialog reveal button. same for the form validation logic upon submission.
 
see the following example - 
$(document).ready(function(){
    
    jQuery(function($) {
      $('.mybutton').each(function() {  
        $.data(this, 'dialog', 
          $(this).next('.mydialog').dialog({
            autoOpen: false
          })
        );  
      }).click(function() {  
          $.data(this, 'dialog').dialog('open');  
          return false;  
      });  
    }); 
    
    //validating Form Fields.....
    $(".submit").click(function(e){
     var form = $(this).closest("form"); // the form that was submitted
     var nam=form.find("input[name='name']").val();
     var seat=form.find("select[name='seat']").val();
    if( seat ==='' || nam ==='')
       {
         alert("Please complete both fields");
         e.preventDefault();
       }
         else 
       {
         alert("Table formatted successfully");
       }
    });
});
<button class='mybutton'>Table 1</button>

<div class="mydialog" title="Table Format">
    <form action="" method="post">
        <label>Table Name:</label><br/>
        <input type="text" name="name"><br/>
        <label>Number of Seats:</label><br/>
        <select name='seat'>
            <option value=''>---Please Select---</option>
            <option value='0'>0</option>
            <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='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
            <option value='9'>9</option>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
            <option value='13'>13</option>
            <option value='14'>14</option>
            <option value='15'>15</option>
            <option value='16'>16</option>
            <option value='17'>17</option>
            <option value='18'>18</option>
            <option value='19'>19</option>
            <option value='20'>20</option>
            <option value='21'>21</option>
            <option value='22'>22</option>
            <option value='23'>23</option>
            <option value='24'>24</option>
        </select><br/><br>
        <input type="hidden" name="id" value="<?php echo $tableid; ?>" >
        <input type="hidden" name="token" value="<?php if(isset($token)) {echo $token;}  else {echo $token = Token::generate(); } ?>" >
        <input type="submit" class='submit' value="Submit" />
    </form>
    </div>

i also hope that in the sample code you posted, that you are dynamically generating that via php code inside of a loop, as apposed to hand coding all of that n number of times?

 

how does this apply to your current problem and the last code you posted? don't repeat code (DRY - Don't Repeat Yourself) when the only thing that's different between the instances of the same logic is the input data it operates on. your php code is a wall of repeated code, eight times at least, and i even suspect that you have, or plan to, repeat this in differently named/numbered files for each possible table? you should instead have one instance of the code (in a function or a class as needed) that you can reuse for any possible input values to retrieve and produce the output that you want. this is the whole point of having variables in programming languages, so that one instance of code can operate on dynamic inputs, as apposed to having static code that can only produce a fixed result.
 
lastly, your php code shows that you have a bad database design, that has each table row laid out like a spreadsheet, with multiple different types of data, and multiple numbered fields within each type, within one row. this is partly the cause of your verbose code. you should instead have the data normalized, with each row holding only one piece of data of the type of the database table it's in. your queries to find things (and insert/update) will be much simpler and your php code will be much simpler too.  if you find that you are altering or dynamically creating columns in tables as the number of data items change, it is a sign that your table(s) are not designed correctly.
mac_gyver Prolific Member

mac_gyver

Posted
Posted

^^^ because he's dealing with picking and assigning discrete things, the number of seats at each table (which could vary, but probably should have an input method that sets a default value to use that matches the majority of the tables at any event) and individual guests assigned to the seats at any table.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.