I'm designing a registration form in PHP using html. The form collects personal info from users some fields include the marital status, name of spouse, and the number of children. How can I code it such that whenever a user selects "Single" for his/her marital status, the textboxes for the name of spouse and number of children will be automatically disabled? All of this must be done without refreshing the page. Thanks!
Assuming you are using drop down for marital status, use the onchange event to capture the change in the drop down status
function maritalStatusChange()
{
var dropdown = document.getElementById("maritalstatus").value;
if(dropdown == 'Single')
{
document.getElementById("spousefld").readOnly = "readonly";
}
}
You can use JS for your purpose.
Try this code : (Assuming "single" is your radio button)
if (document.geElementById('maritalStatus').checked){
//disable resp textboxes
document.geElementById('spouce').disabled = true;
document.geElementById('children').disabled = true;
}
for more details see this
you can achieve this using the javascript function.
if you have used combobox for marrital status
<select id="a" onchange="if( this.options[this.selectedIndex].value=='s')
{document.getElementById('spouce').readOnly = true;}
">
<option value='s'>single</option>
<option value='m'>married</option>
</select>
<input type='text' id='spouce'/>
see the jsfiddle
Related
I have 2 selectboxes
<h3>Results</h3>
<select id="register_form" name="sport" />
<option value="Rugby">Rugby</option>
<option value="Cricket">Cricket</option>
<option value="Football">Football</option>
</select>
<?php
echo'<select name="match">';
echo'<option value="'.$row['event_id'].'">'.$row['team1'].' VS '.$row['team2'].'</option>';
echo'</select>';
?>
<input id="register_form" type="submit" value="Display" name="submit" />
User searches for a result by:
selecting sport type in 1st selectbox and then in 2nd selectbox option values are populated based on sport type.
Is it possible to do this in PHP without the user having to first press submit to get the $_POST value of sport type?
What is my best option here?
PHP always need to reload the page to refresh your informations, so, as anant kumar singh said, you need to use AJAX for that. And as yak613 said, jQuery will help you to use AJAX easily
1.Ajax is the only option what you asked for that(without page refresh)
When you use php it's only possible with page refresh. but with ajax without page refresh it's possible.
helping links are:-
Use jQuery to change a second select list based on the first select list option
https://www.daniweb.com/web-development/php/threads/372228/php-and-ajax-auto-populate-select-box
https://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax
You can use this Multiple Select Dropdawn lists: http://coursesweb.net/ajax/multiple-select-dropdown-list-ajax_t , it can be used for multiple sets of Select lists.
I've faced with the same problem in my project. But the needed functionality was higher - not two dependent selectboxes and bigger number. I've written a simple function to load my selectboxes:
//formId - form where selectbox is
//name - attribute "name" of selectbox
//dataSourceUrl - url to PHP-file
//affectingField - string with value that filters the selecbox's data
function loadSelectbox( formId, name, dataSourceUrl, affectingField ){
//console.log('Loading data to selectbox name="'+name+'":');
var selectbox = $('#'+formId+' select[name="'+name+'"]');
if(selectbox){
//console.log("Selecbox found");
if(affectingField != null){
var affectingValue = $('#'+formId+' [name="'+affectingField+'"]').val();
dataSourceUrl += '?affectingValue='+affectingValue;
}
var options = selectbox.find('option');
var jqxhr = $.ajax({
url: dataSourceUrl,
dataType: 'text'
})
.done(function(data) {
//console.log(data);
if(data != ""){
var optionsObject = JSON.parse(data);
var i = 0;
console.log(optionsObject);
var options = [];
$(optionsObject).each(
function(){
options[i] = '<option value="'+$(this)[0]['val']+'">'+$(this)[0]['text']+'</option>';
i++;
}
);
selectbox.html(options);
if(urlParamsSet[name] == false){
setParamFromUrl(name);
}
}
else{
selectbox.html('<option value="">Все</option>');
}
})
.fail(function() {
alert("Problems with server answer");
})
selectbox.prop("disabled", false);
}
else{
console.log("No selectbox with such name");
}
}
Not saying that this code is perfect, but it works. PHP-file must return the values to selecbox in JSON format (convert from with structure: array(index, value, text) ).
I am creating a drop-down menu in which the second drop-down is dependent upon the first; the first drop down is a list of table, and depending on what table you select, the columns of that table will be able to be selected.
<form id = "table_column" action = "file_name.php">
<select id = "tables" name = "tables" onclick = "script();">
<option name = "table_option_one" value = "people">people</option>
<option>...</option>
</select>
<select id = "columns" name = "columns" onclick = "other_script();">
<option name = "column_option_one" value = "name">name</option>
<option>...</option>
</select>
<input type = "submit"></input>
</form>
I have tried the code below to no success.
$table_name = $_POST["tables"];
$column_name = $_POST["columns"];
How do I access the values selected in each drop-down menu in PHP?
I am only having a problem with the retrieval of the selected values. The menus depending on another and switching work fine
Okay, with your new clarification (you are populating the drop-downs fine), here is what you can do.
Give the input tag an ID as such:
<input type="submit" name="submit" id="submit" value="Submit"> <!--form submit button-->
and in your PHP do a conditional as such:
if (isset($_POST['submit'])) {
$table_name = $_POST["tables"];
$column_name = $_POST["columns"];
}
make sure your form also has the method="post" attribute as well:
<form id = "table_column" action="file_name.php" method="post">
That way when the submit button is hit, your values will be retrieved.
Use AJAX to get the data for the second menu by passing the value of the first menu to a PHP script.
Use the AJAX success function to populate the second menu.
On submission of the form, use PHP to get the values as normal, i.e. $_POST['tables'] and $_POST['columns']
This is more a job for Javascript than PHP. The simplest solution (not involving AJAX) would be to code all possible second dropdown lists, make them invisible (using CSS), then make the appropriate one appear upon a change in the first dropdown.
I want to customize joomla registration form.
I ve added 2 text fields (company name, vat_number) and i ve created a radio button customerType with 2 options(business user, normal user).
Now all the fields are visible in the form. What i want is, when the user selects business user to enable the 2 text fields and when he selects normal user to disable them on the fly.
I guess i need to add javascript to the form. Can anyone help?
Thank you!
I have done this in here
# Script to show hide div
<script type="text/javascript">
function show(obj) {
if(obj == 'farmer')
{
document.getElementById('SkiDiv1').style.display = 'block';
document.getElementById('SkiDiv2').style.display = 'none';
}
if(obj == 'landowner')
{
document.getElementById('SkiDiv2').style.display = 'block';
document.getElementById('SkiDiv1').style.display = 'none';
}
if(obj == 0)
{
document.getElementById('SkiDiv2').style.display = 'none';
document.getElementById('SkiDiv1').style.display = 'none';
}
}
</script>
# Selct from dropdown
<select name="siteusertype" class="inputbox1 required" onchange="show(this.value)">
<option id="selectuser" value="0">Select User</option>
<option value="farmer">Are you a Farmer ?</option>
<option value="landowner">Are you a Landowner ?</option>
</select>
# Both div with different IDs
<div id="SkiDiv1"> User 1 field </div>
<div id="SkiDiv2"> User 2 field </div>
1- Make a function on javascript and reference in onClick event of each radio.
2- Inside javascript function use getElementById function of javascript to set visible or invisible any html element of form according user selection.
function hideElement()
{
if (user select you want)
document.getElementById("element-to-hide").style.visibility="hidden";
else
//if you want display element
document.getElementById("element-to-display").style.visibility="visible";
}
see example:
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
http://www.w3schools.com/jsref/prop_style_visibility.asp
see my client site first to get an idea.
In above site, i have a giftfinder box in right side. There are 3 select boxes. currently I'm using 3 forms for these 3 select boxes which means each drop down select box is embedded into form. When you select the first drop down select box, it picks one and second select box's value will be determined which value is selected from first select box. So if you choose Man, then all athe related occasions of Man will be dispalyed into seconds drop down select box. Its working fine.
But the problem is it refreshes everytime you select the first drop down box.
I don't want to refresh page. it must select the value and pass the value so seconds select box can determine its related values.
so I'm thinking to us ajax. but no success.
So i included some code for the first drop down select box.
this is mix of html and php and wordpress.
<div class="select-one">
<form id="searrec" method="post" action="">
<select name="selectionRecipient" id="selectionRecipient" onchange="this.form.submit();">
<?php
$results_rec = get_option('current_recipient');
if(isset($_POST['selectionRecipient'])){
$results_rec = $_POST['selectionRecipient'];
update_option('current_recipient', $results_rec);
$results_rec = get_option('current_recipient');
}
?>
<?php
//asort($result_rec);
$t_name_arr = array();
foreach($result_rec as $rec):
$t_id = $rec->term_id;
$term = get_term($t_id , 'category' );
$t_name_arr[] = $term->name;
endforeach;
//print_r($t_name_arr);
rsort($t_name_arr);
foreach ($t_name_arr as $t_name):?><option class="rec_val"<?php if($results_rec==$t_name){ echo 'selected="selected"';}?>value="<?php echo $t_name;?>"><?php echo $t_name;?></option>
<?php endforeach;?>
</select>
<input type="hidden" id="submitrec" value="Search" />
</form> -->
</div>
So I'm am using form method post and using $_POST to retrieve the selected value and pass it to $results_rec variable.
Later in the code, I'm using if.. else to determine if $results_rec =='Man' then display certain items which are related to Man and so forth.
So what I want is not to refresh the page while I select item from first drop down select box.
Please help.
change this:
<select name="selectionRecipient" id="selectionRecipient" onchange="this.form.submit();">
to this:
<select name="selectionRecipient" id="selectionRecipient">
and the jquery:
$("#searrec").submit(function(e) {
e.preventDefault();
// your code
return false;
});
EDITED:
use this to get the selected index (number)
var index = $("#selectionRecipient")[0].selectedIndex;
or value:
var value = $("#selectionRecipient")[0].value;
Then you can call an ajax perhaps: (assuming the other selection box has "id=other_select"
$.ajax({url:"index.php",type:"POST",data {type:"populate",index:2,value:"option1"},dataType:"json",
success: function(data) {
// data (json) returned from server so populate other selection boxes with that..
// in this example 'data' is an array, coming directly from server (see below the .php)
$("#other_select")[0].selectedIndex = 0;
for(var x in data) {
$("#other_select")[0].options[x] = new Option(data[x]);
}
}
})
in your .php i assume you get a list (etc. database) to populate the other selection list (in client). This code could looks like:
if (isset($_POST["type"]) && $_POST["type"]=="populate") {
echo json_encode(array("option1","option2","option3"));
exit(1);
}
$('#searrec').submit(function () {
//do some form submit work here
return false;
});
You'll have to use an AJAX call to populate the other select boxes based on whatever you've selected in the first one without reloading the page.
I suggest you take a look at jQuery's AJAX functionality. Read up on $.ajax and $.post - with them you could submit the value that you've selected in the first listbox to a PHP script and then based on that value return and populate the other select boxes.
Use AJAX to update the other selects without refreshing the page. Use jQuery to make AJAX easy.
This question will help:
Change the selected value of a drop-down list with jQuery
$('#searrec').submit(function(e){
e.preventDefault();
});
You should delete event onchange="this.form.submit(); from combobox
And use ajax with jquery:
$("#searrec").onchange(function() {
$.ajax({
url:"",
success:function(response){
alert("success");
}
});
});
Guys its fixed.
Plz have a look at http://giftideasitems.com/.
See gift finder box and see how it works.
I used iframe and embedded the forms, drop down coding there. thats it.
Even I used onchange="this.form.submit()" and page doesnot referesh, actually page refresh .... but not the main page, only the iframe is refreshing which is fine. this is exactly what i wanted.
<div id="gift-finder">
<div class="gift-finder-form">
<iframe name="inlineframe" src="code.php" frameborder="0"
scrolling="auto" width="200" height="180"
marginwidth="0" marginheight="0" id="gift-iframe">
</iframe>
</div>
This is my iframe code and see src, i used code.php; so all code is in separate place.
Though I had to modify some css, but anyways this is fine.
Thanks everyone who contributed yesterday.
Here is my scenario,
IN my page i have a charity dropdown box,when user select any one of the dropdown ,the charity details should be shown in popup box,how to do that???
You should use jQuery to handle the event "onchange" and then complete the other inputs with data retrieved maybe after an Ajax request ?
Here is some kind of code you could use :
HTML Select input :
<select id="charity">
<option id="idtest">test</option>
<option id="idtest2">test2</option>
<option id="idtest3">test3</option>
<option id="idtest4">test4</option>
</select>
Javascript with jQuery :
$(function() {
$("#charity").change(function() {
var selectedOption ID = $("#charity option:selected").attr("id");
// Here is your ajax with jQuery too. Use the var "selectedOption" to know which option is selected
});
});