Pretty new to PHP and I'm wondering if there's a way to dynamically modify which inputs are available on an HTML form using PHP without the form data needing to be submitted. I'm making a site with a calendar for a teacher and I need to make the "duedate" input in this form gray out as soon as the user selects the option "announcement."
<form action="calendaradd.php" method="post">
Event name: <input name="eventname" type="text" autocomplete="off"/></br>
Event type: <select>
<option value="homework">Homework</option>
<option value="announcement">Announcement</option>
</select>
Event date: <input type="date" name="eventdate"></br>
Due date: <input type="date" name="duedate"></br></br>
<input name="submit" type="submit" value="Submit"/>
</form>
Many thanks. Also, am I using the select/option control correctly? Are the options supposed to use value attributes instead of name?
Bind an onchange to the select, and the if the value matches your criterium, set the input as disabled:
Using jQuery to make it easier:
$('#select').on('change',function(){
var value = $(this).val();
if(value == 'announcement'){
$('#duedate').prop('disabled',true);
}
else{
$('#duedate').prop('disabled',false);
}
});
You need to supply the proper IDs to the elements (you can get them also with DOM traversing, but an ID will be faster and easier), though. Also, your select is missing the name attribute, you need it in order to fetch the value server-side.
You might wanna take a look at some client-side scripting, since server-side (as in PHP) cannot alter a page's contents once they've been loaded. Check it out here
You can set the onTextChanged event to a javascript function that changes the attribute disabled in the input to true.
Honestly, the easiest, in my opinion, would be some jQuery animation. You could make it where when the user clicks on the announcement input the due date changes color and other attributes.
JQuery is the way to go, and easier than PHP when it comes to something like this.
Related
I would like to have a select list that runs a php database query when an option is selected. I have the code:
<select>
<option value="available">Available</option>
<option value="sold">Sold</option>
</select>
<input type="submit" name="change status">
Say, when a user selects 'sold' I would like to run:
<?php
db_query("UPDATE {product_stock} SET stock='0' WHERE nid='$value'");
?>
I've tried
<option value="sold" <?php db_query("UPDATE {product_stock} SET stock='0' WHERE nid='$value'"); ?> >Sold</option>
but doesn't seem to work.
I don't know if I should be using
<form method="GET">...</form>
I know I can use ajax somehow but I'm really not familiar with it.
Any ideas how to do this?
Thanks
You have to use javascript! Or else you must update your database after form submit.
A possible way with the javascript library jquery would be:
$("select").change(function() {
$.post("/your/url", {option: $(this).val()}, function(return) {
//echo result if necessary
}
});
On server side you should check for $_POST['option'] and update your database after you
ESCAPED
the contents of the variable "option".
You have to send an AJAX call with jquery or plain JavaScript when the combobox got changed.
Depending on the new value, you can send various parameter and call your PHP scripts.
But the interaction between HTML and PHP like you tried will never work. The time you see the combo box in your browser, your PHP commands were already executed.
My site is build on drupal so I created a custom module and used hook_form_alter so I could just use PHP and didn't need to code in ajax.
Well, you will have to create two files one with the form and a second one with the action itself, the first will have something like this.
<form method="POST" action="ActionFile.php">
<input type="text" name="name" id="name" value="">
<input type="submit" value="find name">
</form>
and create a file called ActionFile.php that will contain the variables and the connection to the DB and the select.
I have a HTML form in list.php that submits the data from text box ("item" in below code) to check.php. This check.php validates the text entered to be not empty or white spaces only. After validation, it redirects to list.php for the entered text to be displayed. list.php is below. I want the "add" button to be enabled only when valid text is entered in the text box. I would like this feature to be done with php and probably not with javascript.
I can use "disabled=\"disabled\" in the form, but this does not work in real-time disabling depending on validation.
<form action="check.php" method="post">
<input name="item" type="text" size="25" autofocus="autofocus" />
<input type="submit" value="Add" id="add" />
</form>
You say:
I would like this feature to be done with php and probably not with javascript.
Unfortunately, if you want "real-time" then you're gonna need JavaScript. You'll need it to make AJAX calls to your PHP code to check for validation.
So either A) you don't validate in "real-time" at all, or B) You use JavaScript in one shape or another.
Let's say you opt for B), to use JavaScript, and presuming ALL you need to do is check for an empty string or whitespace, then you can do all of this client-side in JavaScript and not require a server call at all, also making it truly "real-time".
And so, here is my solution, using JavaScript (jQuery) without relying on server calls. This may not be suitable for your current implementation, but just in case it is, this might be helpful.
JSFiddle:
http://jsfiddle.net/VKfrw/1/
JavaScript:
function hasWhiteSpaceOrEmpty(s)
{
return s == "" || s.indexOf(' ') >= 0;
}
function validateInput()
{
var inputVal = $("#myInput").val();
if(hasWhiteSpaceOrEmpty(inputVal))
{
//This has whitespace or is empty, disable the button
$("#add").attr("disabled", "disabled");
}
else
{
//not empty or whitespace
$("#add").removeAttr("disabled");
}
}
$(document).ready(function() {
$("#myInput").keyup(validateInput);
});
HTML:
<!-- give this guy an ID -->
<input id="myInput" name="item" type="text" size="25" autofocus="autofocus" />
This implementation uses jQuery.
As mentioned, if you want this done in real time some javascript will be needed.
However I think this problem is actually more suited to javascript in general. PHP validation can be useful if you need to cross reference for data with data in your database.
eg. In a sign up form, checking a user is not already registered with the entered email address.
But in your case, depending on what you mean by "valid text" it is probably easier and better to use javascript.
There are some great jQuery plugins which make javascript validation really simple.
http://docs.jquery.com/Plugins/Validation/validate
How can I dynamically change a link based upon an input field in a form. For example, if I input 1.00 into the input field, I want to change the link to this:
donate.php?amount=1.00
Where the amount changes to the amount specified in the input field.
I'm guessing its JavaScript which isn't my strongest point but any help would be awesome. :)
Thanks
markup:
<input type="text" id="amount" onkeyup="changeLink(this);" />
donate now!
Javascript:
function changeLink(inputElement)
{
$('#donateLink').attr("href","donate.php?amount="+inputElement.value);
//console.log($('#donateLink').attr("href"));
}
jsfiddle working example here.
This can be done with html forms:
<form action="donate.php" method="GET" id="donateform">
<input type="text" name="amount" />
<input type="submit" value="Donate" />
</form>
You could also have input entered via a drop down list so they don't enter invalid values. Or you could validate the input with javascript. To use a link to submit the form, you can use javascript:
Donate
You don't need to do anything, just use a form. By using the GET method with a form and naming your input field 'amount', that will already be added to the URL at the time of form submission. Go ahead and try submitting a form when you enter 1.00 into the box. When the page loads, your URL will be donate.php?amount=1.00 like expected. The URL does not need to be changed whatsoever.
If you're using POST, I would merely suggest not doing this. It serves no purpose in that case.
I am using jQuery auto-complete. I have download this script from http://code.google.com/p/jquery-autocomplete/. I want to use this on multiple fields. Please help me thanks.
$("#input").autocomplete("samefile.php");
$("#input").autocomplete("samefile.php");
thanks
the hash mark means you are using IDs to select elements. there should however never be more than one element in your page with the same ID. for instance,
<input id="test" /><input id="test" />
is invalid HTML.
The second problem, is that it appears you are trying to find tag names, which means you should simply leave out the hash mark from your code, and JQuery will apply your methods to all of the tags with that tag name,
$("input").autocomplete("samefile.php");
will apply autocomplete to all input tags on your page.
Third, I would use classes instead of tag names incase you ever want to have an input on your page that does not use the same auto complete. So your html would look like this,
<input class="auto" /><input class="auto" />
and your JQuery would look like this.
$(".auto").autocomplete("samefile.php);
I also wonder where you are calling your JQuery from?
You should use a less specific selector to mark multiple fields as autocomplete in one statement.
Maybe you can assign a class of type ".autocomplete" and then use that.
<input type=textbox" name="txt1" class="autocomplete"/>
<input type=textbox" name="txt2" class="autocomplete"/>
$(".autocomplete").autocomplete("samefile.php");
How do I make the text disappear like the way some fields work here on stackoverflow once I start putting in text? I tried out the different 'on'-actions in HTML but that didn't really do what I wanted.
Thanks.
You can do it with onfocus/onblur events. For example:
<input type="text" value="search" onfocus="if(this.value=='search')this.value=''"/>
If you click on this input field, the default text "search" will disappear. The onfocus event handler checks if this input field has the value of "search" and if so then clears it, in other cases (user has already typed something in) leaves everything as is.
Presumably you mean "Labels which appear inside the input".
If you want to do this in a sane, accessible, semantic way — use a <label>, if JS is available then position it under the element, and onfocus/onblur change classes around based on the value of the element.
I knocked up a simple example at http://dorward.me.uk/tmp/label-work/example.html using jQuery (all the source that isn't part of the jQuery library is embedded in the HTML of that document for easy reading).
jQuery would make this easy work;
http://www.jsfiddle.net/TshDN/
If you are using HTML 5 you could use the placeholder attribute.
http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
use the onFocus() in javascript
<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />