I've written the code below as a text input, but ideally I'd like to have a dropdown menu with options for bin/bash, zsh, and custom. If a custom input is chosen, the user should be able to input their login shell as a text input. Any help is welcome!
<?php
echo "<h5>Login Shell</h5>";
echo
"<div class='inline'>
<form action='' method='POST'>
<input type='hidden' name='form_type' value='loginshell'>
<input type='text' name='loginshell' placeholder='Login Shell (ie. /bin/bash)'
value=" . $USER->getLoginShell() . " required>
<input type='submit' value='Set Login Shell'>
</form>
</div>";
?>
Use a <select> element and show/hide the text input when (event change) the value is right.
document.querySelector("#choose").addEventListener('change', function() {
var textarea = document.querySelector("#custom-text");
if (this.value == 'custom') {
textarea.style.display = 'block';
} else {
textarea.style.display = 'none';
}
})
<p>Please select a version
</p>
<select id="choose">
<option>bin/bash</option>
<option>zsh</option>
<option>custom</option>
</select>
<br>
<input id="custom-text" placeholder="type your choice" style="display: none;">
Related
I have a problem, I need to associate a input type checkbox to a input type text.
The situation is as follows:
Extract data from a database. The PK data are the value of the checkbox. When a checbox select an input type text where you can enter a specific number is activated.
Now the problem is that selecting a checkbox input text all kinds are activated. And what I hope is that by selecting the checkbox input only the input associated with the checkbox enabled.
My HTML code (This code creates a input checkbox and input text for each record in the database, and what I want is to activate a specific checkbox is activated, the input type text):
<form action="send.php" method="POST" id="form-touch">
<?php foreach ($data as $key): ?>
<div id="inputsForm">
<input type="checkbox" class="id-check" name="nuevoid[]" value="<?php echo $key['pr_id'] ?>">
<input type="newquantity[]" class="myinput" disabled name="newQuantity" value="" placeholder="Enter quantity">
</div>
<?php endforeach; ?>
<input type="submit" value="Send">
</form>
My jquery code (code that activates or deactivates the text field by selecting a checkbox):
$('.id-check').change(function(){
if ($('.id-check').is(':checked') == false){
$('.myinput').val('').prop('disabled', true);
} else {
$('.myinput').val('1').prop('disabled', false);
}
});
How I can achieve what I want? Greetings from Chile.
Try
$('.id-check').change(function() {
if ($(this).is(':checked') == false) {
$(this).closest('div').find('.myinput').val('').prop('disabled', true);
} else {
$(this).closest('div').find('.myinput').val('1').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="send.php" method="POST" id="form-touch">
<div id="inputsForm">
<input type="checkbox" class="id-check" name="nuevoid[]" value="">
<input type="newquantity[]" class="myinput" disabled name="newQuantity" value="" placeholder="Enter quantity">
</div>
<div id="inputsForm">
<input type="checkbox" class="id-check" name="nuevoid[]" value="1">
<input type="newquantity[]" class="myinput" disabled name="newQuantity" value="" placeholder="Enter quantity">
</div>
<input type="submit" value="Send">
</form>
you can use .next() jQuery selector. I have modified your jQuery change handler below. It works for me so try it. It should work for you too.
$('.id-check').change(function(){
if ($(this).is(':checked') == false){
$(this).next().val('').prop('disabled', true);
} else {
$(this).next().val('1').prop('disabled', false);
}
});
Goodluck and happy coding! :-)
I want to start a jquery (freeow plugin) when I got an error in e-mail input field form.
I'm checking some fields on the form and each error that I got I want to open an alert message.
I can do this using a button, like this...
<div id="freeow-tr" class="freeow freeow-top-right"></div>
<div id="freeow-br" class="freeow freeow-bottom-right"></div>
<div class="form-line-check">
<input id="freeow-title" value="Freeow!" type="hidden" class="text" />
<input id="freeow-error" value="0" type="hidden" />
<input id="freeow-position" value="#freeow-tr" type="hidden" />
<input id="freeow-style" value="smokey" type="hidden" />
<input id="freeow-message" value="Error message..." type="hidden" />
</div>
<div class="form-line">
<input id="freeow-show" type="button" value="Click to Freeow!" />
</div>
How do this without the button? Inside the PHP code.
if ($erro == "0") {
if(filter_var($email01, FILTER_VALIDATE_EMAIL)){
$erro = "0";
} else {
echo "<div id=\"freeow-tr\" class=\"freeow freeow-top-right\"></div> ";
echo "<div id=\"freeow-br\" class=\"freeow freeow-bottom-right\"></div> ";
echo "<div class=\"form-line-check\"> ";
echo "<input id=\"freeow-title\" value=\"Freeow!\" type=\"hidden\" class=\"text\" /> ";
echo "<input id=\"freeow-error\" value=\"0\" type=\"hidden\" /> ";
echo "<input id=\"freeow-position\" value=\"#freeow-tr\" type=\"hidden\" /> ";
echo "<input id=\"freeow-style\" value=\"smokey\" type=\"hidden\" /> ";
echo "<input id=\"freeow-message\" value=\"Error message...\" type=\"hidden\" /> ";
echo "</div> ";
$erro = "1";
}
}
You have to create a javascript function
function mensagem01() {
var title, message, opts, container;
title = $("#freeow-title").val();
message = $("#freeow-message").val();
message = 'E-mail not in database...';
opts = {};
opts.classes = [$("#freeow-style").val()];
opts.prepend = false;
opts.classes.push("error");
opts.autoHide = false;
opts.classes.push("slide");
opts.hideStyle = { opacity: 0, left: "400px" };
opts.showStyle = { opacity: 1, left: 0 };
container = $("#freeow-position").val();
$(container).freeow(title, message, opts);
}
HTML code need to have the freeow definitions
<div id="freeow-tr" class="freeow freeow-top-right"></div>
<div id="freeow-br" class="freeow freeow-bottom-right"></div>
<div class="form-line-check">
<input id="freeow-title" value="Lembrou?" type="hidden" class="text" />
<input id="freeow-error" value="0" type="hidden" />
<input id="freeow-position" value="#freeow-tr" type="hidden" />
<input id="freeow-style" value="smokey" type="hidden" />
<input id="freeow-message" value="message field must be empty" type="hidden" />
</div>
Inside PHP code
You need to include the javascript code to call the javascript function message
echo "<script type=\"text/javascript\"> $(document).write(mensagem01()); </script> \n";
When the php is executed the javascript write the document, which contains the call to the freeow message.
What you are trying to achieve will is best done with AJAX and some more logic than you have in your code.
You want to catch the form submit with jQuery. Using event.prefentDefault() you can stop the form from submitting. Then, you want to AJAX your FormData to the server.
In your PHP script, you do your validation. If it succeeds, return something (for example, a JSON object) that tells your front end that the validation was a success. If not, you want an object that describes what exactly is failing.
From front end, you check to see if the validation was a success (do whatever), or not (show freeow)
get check box value with javascript and add those values in a div as i select more than one value.
i want something like this: http://img515.imageshack.us/img515/4503/w3i.jpg
when items are slected: http://img59.imageshack.us/img59/8761/fizo.jpg
and than onclick compare btn send all item selected to compare.php page
<SCRIPT LANGUAGE="JavaScript">
//do not getting what to do?
</SCRIPT>
<FORM>
<INPUT TYPE=CHECKBOX NAME="road" VALUE="Car">car
<INPUT TYPE=CHECKBOX NAME="road" VALUE="bike" CHECKED>bike
<INPUT TYPE=CHECKBOX NAME="road" VALUE="truck">truck
<INPUT TYPE=CHECKBOX NAME="road" VALUE="bus" CHECKED>bus
<div id="compare" style="border:2px solid red;"></div>
</FORM>
Here's an example to get you started:
HTML
<form id='compareForm' action='#'>
<input type='checkbox' name="road" value="car">car
<input type='checkbox' name="road" value="bike" checked>bike
<input type='checkbox' name="road" value="truck">truck
<input type='checkbox' name="road" value="bus" checked>bus
<button type='submit'>Compare</button>
</form>
<div id="compare"></div>
Note that for accessibility and usability, you may want to wrap those words in label elements.
JavaScript
document.getElementById('compareForm').addEventListener('submit', function (e) {
var items = document.getElementsByName('road'),
i;
// Prevent default form submission functionality
e.preventDefault();
// Clears the results box
document.getElementById('compare').innerHTML = '';
// Loop through all the checkboxes
for (i = 0; i < items.length; i += 1) {
if (items[i].checked) {
// Do something if the box is checked.
document.getElementById('compare').innerHTML += '<p>' + items[i].value + '</p>';
}
}
});
See the jsFiddle.
I'm NOT using javascript has it is disabled in my environment.
Please review the code below.
I'm trying to use PHP to create the logic that Javascript or jQuery would allow me to do with a simple : document.form2.submit()
<div>
<h2>How many services do you need ?</h2>
<form action="<?php $_SERVER['PHP_SELF']?>" method="POST" name="fServ">
<input type="number" name="numServ" />
<input type="submit" value="SEND">
</form>
<div>
<?php
if(isset($_POST['numServ']) && $_POST['numServ']!==""){
echo "We need ".$_POST['numServ']." services";
echo "<form name='form2' id='form2' method='get' action= $_SERVER[PHP_SELF]>";
for($k = 0 ; $k< $_POST['numServ']; $k++){
//echo "<input type=\"text\" value=\"services$k\">";}
echo "<br><input type='text' name='services$k' value=''>";
if(empty($_GET['services'.$k])){
echo "You didn't fill up all the fields. Please put in a service";
}
if (!empty($_GET['services'.$k])){
echo "Form Filled";//
}
}
}
echo "<input type='submit' name='sendForm' value='SEND'/></form>";
if(!isset($_POST['numServ'])){
echo "We don't have any services yet.";
}
else if($_POST['numServ']==""){
echo "Please put in a number";
}
?>
Can this be achievied through PHP ? Where if the conditions are met and the form fields are NOT blank then submit the form, otherwise die and show a message.
Even then you need to submit the details of the form:
Name: <input type="text" name="name" /> (Min 5 Chars)
Age: <input type="text" name="age" /> (Should be a Number)
<input type="submit" />
Now using server-side validation, this can be done this way:
if (isset($_POST["name"], $_POST["age"]))
if (strlen($_POST["name"]) > 5 && is_numeric($_POST["name"]))
die("Error! The conditions are not met!");
die("Form Submitted!");
This way you can submit the form where JavaScript is disabled.
If I understand, you need auto-submit the form without javascript.
Maybe this thread helps you:
How to submit a form on page load without clicking submit button?
i have one file which contains two fileds both have one form, on a second form i have one drop down for selection what user want(eg. radio, checkbox,dropdown) and a label to that choice,so here can i add new HTML element(eg. radio, checkbox,dropdown) to current a file on form submission???if Yes t
Yes you can, by the use of ajax.
not by the form post
Not sure if i got you right, your text is very confusing.
Page #1
<form action="page2.php" method="post">
<input type="checkbox" name="addcheckbox" value="1"> Add a checkbox<br>
<input type="checkbox" name="adddropdown" value="1"> Add a dropdown<br>
<input type="submit">
</form>
Page #2
echo '<form [...]>';
if( $_POST['addcheckbox'] == 1) echo '<input type="checkbox" name="whatever" value="1"> checkbox';
if( $_POST['adddropdown'] == 1) echo '<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>';
echo '</form>';
Do it through javascript, don't use form submit, it will take time.
First form
<div id="first_form">
<form id=="firstform">
<input type="text" />
<input type="text" />
</form>
</div>
Second form that will generate element
<form id="secondform">
<select id="choice" onchange="createElement(this.value);">
<option value="radio">Radio</option>
<option value="checkbox">checkbox</option>
<option value="dropdown">dropdown</option>
</select>
</form>
Javascript code
<script type="text/javascript">
function createElement(element) {
var html = '';
if(element=='radio') {
html = "<input type='radio' />";
}
else if(element=='checkbox') {
html = "<input type='checkbox' />";
}
if(element=='dropdown') {
html = "<select><option>abc</option></select>";
}
//use jquery
$("#first_form").append(html);
}
</script>
Not sure what you are asking.
You call a function onSubmit (more here). And in that function you can dynamically add form elements via JavaScript if that is what you need.
Use createElement to create and appendChild to add the elemet where you want it.
More info here
Use jquery.It is the best wat to append element to the same page.