I need to make a section in my web application that has multiple forms, but only one form should be shown at a time. Those form are very similar (the difference is a select box instead of a radio button, etc.). The active form should be selected using a select box, or some kind of a tabbed menu on top. Forms are used for insert data with mysql and php. What is the most easiest way of doing this?
Give each form tag an id tag and then add an onchange listener to your dropdown select box. In the listener toggle the CSS display attribute of your forms.
<select name="..." id="change" onchange='OnChange(this.options[this.selectedIndex].value);'>
<option val="form_id_1">form 1</option>
</select>
Then the javascript would be:
<script language="text/javascript">
<!--
function OnChange(form_id)
{
document.getElementById("first_form_id").style.display = 'none';
document.getElementById("second_form_id").style.display = 'none';
document.getElementById("third_form_id").style.display = 'none';
document.getElementById("fourth_form_id").style.display = 'none';
document.getElementById(form_id).style.display = 'block';
return true;
}
//-->
</script>
This hides all the forms at first, then shows the one you wanted to select
Related
I am working on a contact form for someone and they want a drop down menu added that based off of what they choose on that menu, is where the form will go.
Example:
Drop down Menu options are:
General Inquiry goes to anyone#123.com
Press goes to bored#123.com
Booking goes to help#123.com
I have no idea how to set the PHP up for this.
better way would be using Javascript and adding an eventlistener on change of the drop down menu where it will take you to the link
<select id="select">
<option value="google.com">Google.com</option>
</select>
<script>
const select = document.querySelector('#select')
select.addEventListener('change', (e) => {
window.location.href = select.value;
}
</script>
something like this
I have a dropdown menu for sort by price: low to high etc
This menu is outside my closing form tag.
How can I add the select option to the form on submit?
So far I have:
<script>
$(document).ready(function(){
$('#sort_by').change(function(){
$("#search_form").submit();
});
});
</script>
So the above will submit the form on change but wont add the value of the select option. How can I add the select option to the form on submit?
Select Menu:
<select name="sort_by" id="sort_by">
<option value="Low to High">Low to High</option>
<option value="High to Low">High to Low</option>
</select>
You want the field to be part of the form on submit, so append the select to the form on submit of the form.
Added clone and hide to avoid a visual change.
$('#search_form').on('submit', function(){
$('#sort_by').clone().hide().appendTo(this);
});
Since you're posting the whole page (not ajax), it won't matter that you clone the select with the same ID and don't remove a duplicate clone beforehand.
EDIT
While the text in the question says that you want the select added to the form on submit, the code given says you want the form submitted on change:
$('#sort_by').on('change', function(){
$('#search_form').append($(this).clone().hide()).trigger('submit');
});
The first solution is to add an hidden input field inside the form like this:
<input type="hidden" name="sort_by" id="myInput">
$('#sort_by').change(function(){
$('#myInput').val($(this).val());
$("#search_form").submit();
});
remember to remove the name property from the select
if you re using the ajax function you can also build a FormData object and append all your data to it (docs https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects )
i'm creating a page which has an link with the external style sheet, now i created few more style sheets and added an drop-down menu in the page, now how to link these options with the external style sheets so that once the user selects an option from the drop-down menu, the style sheet of that page should totally get changed to the new style sheet...how can i do this?
<div style="float:right;padding:26px 0 0 0;color:#fff;"><select>
<option>please select your choice</option>
<option value="one">green</option>
<option value="two">red</option>
</select>
</div>
I have the drop-down as above..
try this :)
1. give a id to your select box say(giveAId)
2. then in jquery function pass this id and apply a change function('this will notice the the change made in your select box').
3. get it's value from option box
4. then pass it to the link href like in this example
<script type="text/javascript">
$(function() {
$("#giveAId").change(function(){ //2 step
var stylesheet = $(this).val(); // 3 step
$('link').attr('href',stylesheet+ '.css'); //4 step done here
});
});
</script>
<div style="float:right;padding:26px 0 0 0;color:#fff;">
<select id="giveAId"> // 1 step
<option>please select your choice</option>
<option value="one">green</option>
<option value="two">red</option>
</select>
</div>
You can give the user a cookie which remembers which style sheet they have chosen from the menu, and load the CSS for the page based on that cookie. Then just make it so the page refreshes on click, using AJAX if you want.
submit the form and use session/cookies to remember the selection
for example
$_SESSION['selected_stylesheet'] = $_POST['stylesheet'];
and then u should use the $_SESSION['selected_stylesheet'] when u calling the external css file
<link type="text/css" href="<? echo $_SESSION['selected_stylesheet'] ?>.css" rel="stylesheet" />
i think that will work
How do I hide a particular form field when a field is selected from a drop down in HTML?
You can't use php, as content has already been served to browser. So, a handy solution is to use javascript
<select name="foobar" onchange="checkAndHide(this.options[this.selectedIndex].value)">
<option value="right1">right1</option>
<option value="wrong">wrong</option>
<option value="right2">right2</option>
</select>
<input type="text" id="shouldHide" name="test">
<script type="text/javascript">
function checkAndHide(value){
if(value == 'wrong')
document.getElementById('shouldHide').style.display = 'none';
else
document.getElementById('shouldHide').style.display = 'block';
}
</script>
Yes you must use something that can communicate with the header which requires JavaScript or jquery, etc.
I don't have an example as I'm at work but I used jquery to load another page after a category is selected. This page generates the rest of the select fields (my sub categories) using a query and while statement ,inside the option tag once a category has been picked. There are many examples on google, just google jquery dynamic dropdown box
I have this webpage. It has a page called "services.php". I have several buttons (made of classes), that belong to different "package" prices i offer.
I want the links that say "Select" to autofill a form in another page, or alternativly in a popup form in the page..
I don't really know how to explain it, but as short as possible:
When link is pressed autofill form (in this or other page) with the type of package they chose. Only text autofill
What you seem to be asking is 'loading' a page pre-filled with specific information, you can do this a number of ways, either by utilizing javascript (like jQuery for instance). Or using your PHP, make links that pass variables (say a flag or a reference to pre-fill the fields -- if you want a popup or next page, etc).
Your url would like like the following for the button that a user presses (button would be a simple http link):
http://mywebsite.com/prefill.php?user=bob&package=2
This would have the values bob as the user that requests it (you can reference an id for user info here as well), and package=2 to designate your package options.
Then on the prefill.php page, you would have something that checks for:
$user = $_GET['user'];
$package = $_GET['package'];
Hope that helps
This will populate form fields with whatever you pass to the autoFill() function. This would be a same page example.
<html>
<body>
<form>
<input type="text" id="packageDescription">
<input type="text" id="packagePrice">
</form>
<script>
function autoFill(packageDescription, packagePrice) {
document.getElementById('packageDescription').value = packageDescription;
document.getElementById('packagePrice').value = packagePrice;
}
</script>
Premium Package<br>
Platinum Package
</body>
</html>
You could do something like this:
<select id="packages">
<option value="package1">Package 1</option>
<option value="package2">Package 2</option>
</select>
Submit
When the link is clicked, the following javascript will fire off:
function submitPackage()
{
var package = $("#package").val();
window.open("http://your-site.com/some-script.php?package=" + package);
}
The above will open a pop up window to a page such as this:
http://your-site.com/some-script.php?package=package1
In some-script.php you will do something like this:
You selected the package: <b><?php echo $_GET['package'];?></b>.
Or:
<?php
//Put the packages in an array:
$packages = array();
$packages['package1'] = 'Package 1';
$packages['package2'] = 'Package 2';
//...
?>
<select id="package">
<?php foreach ($packages as $name => $text):?>
<? $selected = ($name == $_GET['package']) ? 'selected' : '';?>
<option value="<? php echo $name;?>" <?php echo $selected;?>>
<?php echo $text;?>
</option>
<? endforeach;?>
</select>
The above will auto select the package they selected in a dropdown box.
if i understood your problem, you want to fill some input fields with information when the user clicks on some links
i can think of 2 ways of doing this : either have the links point to a page like services.php?req=package1 (or any other url you want) and on that page generate the input fields with the information you need (set the default values in the fields with the ones you want), or, use javascript to change the values of the forms without changing the actual page (either via ajax or predefined values)
for javascript you can use the jQuery framework, it has a pretty extensive community of enthusiasts and plenty of examples to get you started with it.
an example for your case would be
$('#btn1').bind('click', function() {
$('#input1').val("value");
$('#input2').val("value2");
});
replace btn1 with the id of the first button or link you have, input1 with the id of the first input in your form, and value with the value you want
I just did this myself. My solution was with jQuery. Just assign an id to your link. The first ID in the code is the link id and the second is the id for the input element you want to populate.
Here is the script:
<script>
$(document).ready(function() {
$('#link_id').click(function() {
$('#input_id').val( $(this).text() ).keyup();
return false;
});
});
</script>
Hope it works!
I've ran several time into the same issue, so I had to write my own script doing this. It's called Autofiller and its pretty simple but does great job.
Here is an example
http://example.com/?autofiller=1&af=1&pof=package&package=package1
So basically it takes several parameters to init the script:
autofiller=1 - init AutoFiller
af=1 - Autofill after page is loaded
pof=package - Find the parent form element of the select with name attribute package. Works also with input form elements.
package=package1 - Will set the select element's value to package1
Hope it helps you! :)