I have a form which changes the inputfields depending on a radio-button.
for text there appears a textbox
for textarea there appear additional 2 fields for cols And rows
for select, checkbox and radio there appear additional fields with appendchild
have a look here:
http://joomla.byethost16.com/php.php
Now what i want is to let the user add more params, param2, param3, etc.
Unfortunately i made the js functions that trigger the fields according to the radio-button like this
function textarea(){
if (document.getElementById('option2').checked = true){
document.getElementById('feld').style.display = '';
document.getElementById('feld2').style.display = '';
document.getElementById('feld4').style.display = 'none';
}}
So that means i have no dynamics in my form since the id in this function is not yet dynamic and onclick will trigger anything or only always the first param1.
all params should be like this but somehow increasing numbers and the Js-function for the radio should take them too
<td>Param_1</td>
<td><p>
<input type="radio" onclick='text()' name="option0" id="option0" value="text" checked="yes">text
<input type="radio" onclick='spacer()' name="option0" id="option1" value="spacer">spacer
<input type="radio" onclick='textarea()' name="option0" id="option2" value="textarea">textarea
<input type="radio" onclick='selecta()' name="option0" id="option3" value="select">select
<input type="radio" onclick='radio()' name="option0" id="option4" value="radio">radio
<input type="radio" onclick='checkbox()' name="option0" id="option5" value="checkbox">checkbox</br>
<input type="hidden" name="fields" value="1" id="fields" />
<div id="feld">
Name <input type="text" name="param1" id="param1" size="40" maxlength="40">
Default<input type="text" name="paramdef1" id="paramdef1" size="40" maxlength="40">
<div id="feld4" style="display:none;">
<input type="text" name="param11" size="40" value="value1" style="display: inline">
<a href=# onclick='add(1)'>add</a> <a href=# onclick='reset()'>reset</a></div>
</div>
<div id="feld2" style="display:none;">
Columns<input type="text" name="cols1" size="20" maxlength="40">Rows<input type="text" name="rows1" size="20" maxlength="40"></div>
</td>
</tr>
How do i do that my form gets dynamically (like i did the "add/reset" at checkboxes) and people can add more params?
For the complete code please go here and view source:
http://joomla.byethost16.com/php.php
thx so much for help on this
i solved it by using $(this) with a "click" bind to each class which sits on the buttons.
another solution would be to use a plugin, for example http://www.mdelrosso.com/sheepit/index.php?lng=en_GB which is very good but relys on a certain structure (you have to define an index at the form, which has to be resorted in processing under most cases since some index_vars can be skipped userwise.)
Related
Is there option for radio button to be auto selected when visitor enter text in another input form? I have searched for it, but without success.
I have this form with 3 radio buttons, they allow users to choose size, last radio button is for custom size (width and height). Under last radio button there is text input to input custom height and width.
<form action="#" method="post">
<label for="original-size">Original
<input type="radio" id="original_size" name="size" value="original" checked="checked">
</label>
<label for="medium-size">Medium
<input type="radio" id="medium-size" name="size" value="medium">
</label>
<label for="custom-size">Custom
<input type="radio" id="custom-size" name="size" value="custom">
</label>
<input id="custom-width" type="number" name="custom-width" placeholder="Custom width">
<label for="custom-width">custom width</label>
and
<input id="custom-height" type="number" name="custom-height" placeholder="Custom height">
<label for="custom-height">custom height</label>
<br>
<button name="submit" type="submit">Submit</button>
</form>
How to select custom-size radio input if user click on custom-width or custom-height text input? Is there option without java script, if not, small code of java script would be fine (I am not using jQuery)?
Managed to dig up this, is this what you are looking for?
<form>
<p>Original: <input type="text"></p>
<p>Medium: <input type="text"></p>
<div id="customWrapper">
<p>Custom: <input type="radio" id="customSize"></p>
<p>Custom Width: <input type="text"></p>
<p>Custom Height: <input type="text"> </p>
</div>
</form>
const div = document.getElementById('customWrapper');
// When the custom width or custom height are clicked on
div.addEventListener('focus', (event) => {
document.getElementById('customSize').checked = true;
}, true);
// When clicked somewhere out of the form
div.addEventListener('blur', (event) => {
document.getElementById('customSize').checked = false;
}, true);
https://jsfiddle.net/mLvt9ubz/
It basically searches for any input inside the div, when it's event changes then something happens.
In this case the radio button with an ID get's the attribute selected.
.Like for two checkboxes there is true or false but what should I do for 3 checkoxes ?to display parts of form according to the checkbox selection.
You can make use of multiple values (by setting distinct values in the value="…" argument, and update the conditions in the ng-show="…" argument accordingly, for example:
<input type="radio" name="test" ng-model="modelname" value="1">1</input>
<input type="radio" name="test" ng-model="modelname" value="2">2</input>
<input type="radio" name="test" ng-model="modelname" value="3">3</input>
<div ng-show="modelname=='1'">form1</div>
<div ng-show="modelname=='2'">form2</div>
<div ng-show="modelname=='3'">form3</div>
Set value from the input checkbox using "value=", and change the conditions in the ng-if="…" argument accordingly, as shown below:
<input type="radio" ng-model="variable" value=1>your content</input>
<input type="radio" ng-model="variable" value=2>your content</input>
<input type="radio" ng-model="variable" value=3>your content</input>
<div ng-if="variable==1">your form</div>
<div ng-if="variable==2">your form</div>
<div ng-if="variable==3">your form</div>
I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I’ve turned into boxes for display reasons) and they all hold a value (e.g. 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having
both forms cover the whole page but still didn't have any luck.
I’ll post some code below to help you understand.
PS. If you need more code to understand, I can post it to pastebin.
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>
<div id="content">
<div id="container">
<div id="table">
<div id="tr1">
<div id="td1">
<input type="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</div>
<div id="td2">
<input type="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</div>
<div id="td3">
<input type="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</div>
<div id="td4">
<input type="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</div>
To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:
var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
valueSelected will contain the value of the selected radio.
If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.
The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:
<input type="radio" class="myRadio">
and in JS: var inputs = document.getElementsByClassName('myRadio');
So I am using the PrintThis JQuery plugin in order to print a form field, but for some reason I am unable to have the plugin print out any changes made to the checkboxes. When I click "Print", the only checkbox that appears to change is one that has a "checked" property by default. Any ideas on how to fix this?
HTML:
<body>
<div id="print">
<form>
<input id="option" type="checkbox" checked>
<label class="checkbox" for="option"> You are 18 years or older</label>
<br><br>
<input id="option2" type="checkbox">
<label class="checkbox" for="option2"> You have tested positive for something in your blood</label>
<br><br>
<input id="option3" type="checkbox">
<label class="checkbox" for="option3"> You have health-related kidney problems</label>
<br><br>
<input id="option4" type="checkbox">
<label class="checkbox" for="option4"> You have health-related skin problems</label>
<br><br>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5"> You have a low platelet count</label>
</form>
</div>
<br>
<br>
<input id="printButton" type="button" value="Click here to download and print this checklist to review with your doctor." />
</body>
JSFiddle: http://jsfiddle.net/Hybridx24/bxtpv26x/
Not sure what the problem might be here, but you can get around it by explicitly setting the checked attribute for the checkboxes that are checked.
$("input:button").click(function () {
$('input[type="checkbox"]').each(function() {
var $this = $(this);
if($this.is(':checked')) {
$this.attr('checked', true);
} else {
$this.removeAttr('checked');
}
});
$("#print").printThis({'importStyle': true});
});
Check Fiddle
So after skimming through the plugin's source. Looks like there's a property for form values. I added it in and it seems to work.
$('#selector').printThis({formValues:true});
http://jsfiddle.net/wzp0e9r9/
I want to show the text next to radio buttons in another element when the buttons are clicked.
My HTML:
<p>
<input type="radio" value="1" name="General">
I need a simple template
</p>
<p>
<input type="radio" value="2" name="General">
I need a simple template based
</p>
<p>
<input type="radio" value="3" name="General">
I need a simple template based type
</p>
I want to show the result in an element with the class display, so something like:
$('.display').val();
I tried this:
$('.display').val($('input[type=radio]:checked').closest('p').html());
I'm going to guess that what you want to do is put the text associated with the selected radio button in the .display element. If so, with your current HTML, you can use .text on the parent element to get the text, and then probably .text (not .val) on the .display element to show it (it would be .val if .display were a form field):
$("input[name=General]").on("click", function() {
var text = $(this).closest('p').text();
$(".display").text(text);
});
<p>
<input type="radio" value="1" name="General">
I need a simple template
</p>
<p>
<input type="radio" value="2" name="General">
I need a simple template based
</p>
<p>
<input type="radio" value="3" name="General">
I need a simple template based type
</p>
<p class="display"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
But, it's better to use label elements so the user can click on the words as well as the actual radio button:
$("input[name=General]").on("click", function() {
var text = $(this).closest('label').text();
$(".display").text(text);
});
<p>
<label>
<input type="radio" value="1" name="General">
I need a simple template
</label>
</p>
<p>
<label>
<input type="radio" value="2" name="General">
I need a simple template based
</label>
</p>
<p>
<label>
<input type="radio" value="3" name="General">
I need a simple template based type
</label>
</p>
<p class="display"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This is the solution of the problem with getting the associated text of check Box in separate Line when the name is same.
HTML Code-
<p><input name="SiteLayoutDesign" value="5" type="checkbox"> I do not need any unique graphics designed (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="6" type="checkbox"> I will supply images (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="7" type="checkbox"> I have a template but it needs minor customization (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="8" type="checkbox"> I need a template customized (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="9" type="checkbox"> I would like a custom design created for my site (0 Hours)</p>
jQuery Code-
$(document).ready(function(){
$('input').click(function(){
var $check = $('input[type=checkbox]:checked');
$check.each(function(){
var id = $(this).val();
var did = $('input[type=checkbox][value='+id+']:checked').closest('p').text();
});
});
});
The did variable store the associated text with respect to value of that checkBox.