Jump to content

<FORM> elements in an <IFRAME>


ScrewLooseSalad
 Share

Recommended Posts

I want to make a form that will display different options on the second item, depending on the users input on the item before...

I understand this is usually accomplished in javascript/jquery, however with my limited knowledge of javascript and jquery I was considering using a selection of iframes loading in php content, this is clearly a really inefficient method of achieving my goal, however, is it even possible to put Form elements into an iFrame? Or should I seek out the jquery?

Edited by ScrewLooseSalad
Link to comment
Share on other sites

You should totally learn a bit of jQuery, using iFrames for basic form manipulation would be madness! This is because you would need the iframes (the pages within the iframes) to communicate with each other, and for that you would probably need an API, and to call the API you would need to learn Javascript anyway.

 

Trust me, it's worth the time it takes to learn jQuery, it's fantastic and you'll be surprised by how much you can do with just a few lines of code.

 

Good luck!

 

- W

Link to comment
Share on other sites

I'm beginning to see that, trying to get this to work...

are you able to point me in the right direction?

 

an example of what I am trying to achieve can be found on the Autotrader website:  http://www4.autotrader.co.uk/

the "Buy a car" form features a 'make' field that determines the contents of the 'model' field.

I'd need the second part of the form to retrieve its contents from a MySQL database depending on what the user selects on the first option...

Link to comment
Share on other sites

I put together a simple example, much like the car form you were talking about:

 

<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>form manipulation</title>
  
  <!-- Load jQuery -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  
  <script type="text/javascript">
  
 	var white_wines = new Array("Auxerrois", "Malvasia");
	var red_wines = new Array("Chianti", "Barbaresco", "Rioja");
	var type;
  
  	$('document').ready(function() {
		//Once the document is ready (loaded), let's populate the wine-list with red wines
		listWhiteWines();
		
		// When the changes option in the dropdown with ID 'type'
		$('#type').change(function() {
			type = $(this).children(":selected").attr("id");
			
			// Check if white or red was selected
			if(type == "red") {
				listRedWines();
			}
			else {
				listWhiteWines();
			}
		});
	});
	
	// Function to populate the list with red wines
	function listRedWines() {
		$('#wine-list').html('');
		
		for(var i=0; i<red_wines.length; i++) {
			$('#wine-list').append('<option>'+red_wines[i]+'</option>');
		}
	}
	
	// Function to populate the list with white wines
	function listWhiteWines() {
		$('#wine-list').html('');
		
		for(var i=0; i<white_wines.length; i++) {
			$('#wine-list').append('<option>'+white_wines[i]+'</option>');
		}
	}
  </script>
</head>
<body>

<form>
	<select id="type">
    	<option id="white">White wine</option>
        <option id="red">Red wine</option>
    </select>
    <br /><br />
    <select id="wine-list">
    </select>
</form>

</body>
</html>

 

- W

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

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

×
×
  • 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.