Develop Reference

Automatically submit form with first option (PHP)

I have a project in which I must do something like this:
when a user's page loads, he gets a personalized select box (with some options generated by PHP for him) and then, when he changes the option, I must change the rest of the content (on the same page).
for example, let the select box for a kind of user be:
Main content
Tools
Now, my idea was to have a
<form action="processing.php">
<select name="choice" onChange="submit();"> etc. which should pass the user's choice to processing.php. The problem is, I want the first option to be automatically selected and the content for that option to appear when the page loads - somehow like the first option to be automatically submitted.
Also, different kind of users should get different options, and I thought I can use a single page to process these requests. Is this achievable?
Can you please help me with an idea on how to submit that form automatically with the first generated option? Thank you.

You can use the onChange Event of the selection. In the handler you can then do the redirect
let sel = document.getElementById('yourselect');
let form = document.getElementById('yourform');
sel.onchange = function() {
form.submit()
}

You can easily bind the select change with Javascript. Here is the example with jQuery:
$('#mySelect').on('change', function(){
// Do your staff
$('#myForm').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<select id="mySelect" method="post" action="processing.php" name="select_name">
<option value="">Select One</option>
<option value="http://google.com">Google</option>
</select>
</form>

Javascript OnChange Script - Stop Form Submission

I have a project im working on, that needs a javascript OnChange Script for a dropdown box on media upload page.
I have a drop-down box with 2 options -'Yes' and 'No'. If the user selects 'No' i don't want the form to submit and possibly display a message saying why.
Is anyone able to provide a script to do this? I have to enter this on the attribute itself (eah attribute has the ability to have a OnChange script), i can change the attribute references to the specific ones needed. More of a general 'formula' for the script is needed.
Maybe i'm too vague and its not possible to make on the information i have given you.
Thanks in advance,
T.

first, write javascript code like this
<script>
function output()
{
var input = document.getElementById('input').value;
if(input==0){
alert("WHY???");
document.getElementById("out").value="why?";
}else{
document.getElementById("out").value="Ok";
}
}
</script>
and for the html code
<form>
<select name="input" id="input" onchange="output()">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="out" name="out">
</form>
note: javascript not java

Hide a form based on the selected option in drop down menu

I am having some trouble with the following scenario:
What I need is a way to hide a form if a option is selected in a drop down menu. The goal is to have the user select how they want to pay, either by credit card or thru PayPal. If they select Credit Card, then the Credit Card form is displayed (which is the default method of payment). If they select PayPal, then the PayPal form will show and the Credit Card from will be hidden. Here is my HTML so far: (it would be nice if this could be done with jQuery)
<select id="payment_type" name="payment_type">
<option value="Credit">Credit/Debit Card</option>
<option value="PayPal">PayPal Account</option>
</select>
<div id="credit_card_payment">
<h2>Enter Credit/Debit Card Details:</h2>
....
<form id="paypal_payment" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="clearfix">
....

You need something like this (jQuery):
$('#payment_type').change(function(){
if($(this).val() == "PayPal") {
$('#credit_card_payment').hide();
$('#paypal_payment').show();
} else {
$('#credit_card_payment').show();
$('#paypal_payment').hide();
}
});

Here's a working example: http://jsfiddle.net/CYzsY/
You want your forms hidden before a value is selected. The way to do this would be to set the CSS on your forms to display: none by default. This will hide the forms and take up no screen space. In the example above, we do this with: .hidden { display: none }.
To show a form when a particular value is selected, you simply need to show/hide depending on the input selection.
I would also suggest a stylistic change to your HTML/CSS. Instead of underscores, you should consider using dashes. So id="payment_type" would be id="payment-type". This has the benefit of being easier to type, and shares similar syntax with CSS properties such as border-width.

$("#payment_type").change(function (){
//add an if else on $(this).val(), use $("#...").hide() or show()
})

How to ensure a <select> form field is submitted when it is disabled?

I have a select form field that I want to mark as "readonly", as in the user cannot modify the value, but the value is still submitted with the form. Using the disabled attribute prevents the user from changing the value, but does not submit the value with the form.
The readonly attribute is only available for input and textarea fields, but that's basically what I want. Is there any way to get that working?
Two possibilities I'm considering include:
Instead of disabling the select, disable all of the options and use CSS to gray out the select so it looks like its disabled.
Add a click event handler to the submit button so that it enables all of the disabled dropdown menus before submitting the form.

Disable the fields and then enable them before the form is submitted:
jQuery code:
jQuery(function ($) {
$('form').bind('submit', function () {
$(this).find(':input').prop('disabled', false);
});
});

<select disabled="disabled">
....
</select>
<input type="hidden" name="select_name" value="selected value" />
Where select_name is the name that you would normally give the <select>.
Another option.
<select name="myselect" disabled="disabled">
<option value="myselectedvalue" selected="selected">My Value</option>
....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />
Now with this one, I have noticed that depending on what webserver you are using, you may have to put the hidden input either before, or after the <select>.
If my memory serves me correctly, with IIS, you put it before, with Apache you put it after. As always, testing is key.

I`ve been looking for a solution for this, and since i didnt find a solution in this thread i did my own.
// With jQuery
$('#selectbox').focus(function(e) {
$(this).blur();
});
Simple, you just blur the field when you focus on it, something like disabling it, but you actually send its data.

I faced a slightly different scenario, in which I only wanted to not allow the user to change the selected value based on an earlier selectbox. What I ended up doing was just disabling all the other non-selected options in the selectbox using
$('#toSelect').find(':not(:selected)').prop('disabled',true);

it dows not work with the :input selector for select fields, use this:
jQuery(function() {
jQuery('form').bind('submit', function() {
jQuery(this).find(':disabled').removeAttr('disabled');
});
});

Same solution suggested by Tres without using jQuery
<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">
<select id="mysel" disabled="disabled">....</select>
<input name="submit" id="submit" type="submit" value="SEND FORM">
</form>
This might help someone understand more, but obviously is less flexible than the jQuery one.

The easiest way i found was to create a tiny javascript function tied to your form :
function enablePath() {
document.getElementById('select_name').disabled= "";
}
and you call it in your form here :
<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">
Or you can call it in the function you use to check your form :)

I use next code for disable options in selections
<select class="sel big" id="form_code" name="code" readonly="readonly">
<option value="user_played_game" selected="true">1 Game</option>
<option value="coins" disabled="">2 Object</option>
<option value="event" disabled="">3 Object</option>
<option value="level" disabled="">4 Object</option>
<option value="game" disabled="">5 Object</option>
</select>
// Disable selection for options
$('select option:not(:selected)').each(function(){
$(this).attr('disabled', 'disabled');
});

Just add a line before submit.
$("#XYZ").removeAttr("disabled");

Or use some JavaScript to change the name of the select and set it to disabled. This way the select is still submitted, but using a name you aren't checking.

I whipped up a quick (Jquery only) plugin, that saves the value in a data field while an input is disabled.
This just means as long as the field is being disabled programmaticly through jquery using .prop() or .attr()... then accessing the value by .val(), .serialize() or .serializeArra() will always return the value even if disabled :)
Shameless plug: https://github.com/Jezternz/jq-disabled-inputs

Based on the solution of the Jordan, I created a function that automatically creates a hidden input with the same name and same value of the select you want to become invalid. The first parameter can be an id or a jquery element; the second is a Boolean optional parameter where "true" disables and "false" enables the input. If omitted, the second parameter switches the select between "enabled" and "disabled".
function changeSelectUserManipulation(obj, disable){
var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
disable = disable? !!disable : !$obj.is(':disabled');
if(disable){
$obj.prop('disabled', true)
.after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
}else{
$obj.prop('disabled', false)
.next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
}
}
changeSelectUserManipulation("select_id");

I found a workable solution: remove all the elements except the selected one. You can then change the style to something that looks disabled as well.
Using jQuery:
jQuery(function($) {
$('form').submit(function(){
$('select option:not(:selected)', this).remove();
});
});

<select id="example">
<option value="">please select</option>
<option value="0" >one</option>
<option value="1">two</option>
</select>
if (condition){
//you can't select
$("#example").find("option").css("display","none");
}else{
//you can select
$("#example").find("option").css("display","block");
}

Another option is to use the readonly attribute.
<select readonly="readonly">
....
</select>
With readonly the value is still submitted, the input field is grayed out and the user cannot edit it.
Edit:
Quoted from http://www.w3.org/TR/html401/interact/forms.html#adef-readonly:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements may be successful.
When it says the element may be succesful, it means it may be submitted, as stated here: http://www.w3.org/TR/html401/interact/forms.html#successful-controls

Show Additional Content Based on Selection

Is this also the Risk Address:
<select name="InsuredSALicense2" id="InsuredSALicense2">
<option>Please Select</option>
<option>Yes</option>
<option>No</option>
</select>
If the answer here is "No" then a hidden drop down must be created.
If No, Please give details:
<textarea name="InsuredOther License2"
id="InsuredOther License2"
cols="30" rows="4"></textarea>
<form id="form4" name="form4" method="post" action="">
Say that on the form I want to create a drop down (example: "Do you...", please select yes/no): if the answer is "Yes" then drop down a section if no then don't drop down section.
This form was done in dreamweaver cs4.

You could do this relatively easy. Using the javascript framework jQuery, you could do something like the following:
/* Attach an event to your dropdown menu containing Yes/No */
$("#InsuredSALicense2").change(function(){
/* Check Value After Change */
if (this.val() == "Yes") {
/* Show the dropdown field */
$("#hiddenDIV").show();
} else {
/* Hide the dropdown field */
$("#hiddenDIV").hide();
}
});
This example assumes your "hidden" dropdown is within a called "hiddenDIV":
<div id="hiddenDIV">
<p>Hidden drop down stuff here</p>
</div>
To use this code-sample, you need to reference the jQuery library from your tag.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>

are you wrokin in ASP.net??
If you are workin in ASP.net..you can create a hidden dropdown list on the event of Dropdownlist text change...first you can check what is the value of selected dropdown list...
let me know if you have any questions

I think the a good solution would be doing it client-side: so generate both the textarea and the dropdown menu. Hide the one that is not the default (style="visibility: hidden" for example). Then create an onchange event on the InsuredSALicense2 listbox, which hides the not important field and shows the important one.