So I am a beginner and as the title says I want to be able to; on the click of a button, allow the user to add another input field to my form. I would also like to be able to remove this.
The use of the form is adding students to a student group, which I will then be storing in my database.
my form example:
<form name="addstudents" id="addstudents" method="post" action="add_students.php">
<table><tr><td>Student:</td><td>
<input type='text' name="1" size='20'></td><td><input type="button" id="add" value="+">
</td><td><input type="button" id="remove" value="-"></td>
</table></form>
However from what I have been looking at there are different suggestions such as using a clone() function or Jquery appendto().
which is the best method for doing so?
thanks
$('form').append('<input ...'); //take care of appending valid DOM elements
//Create the input element
var $el = $('<input>')//Set the attribute that you want
.attr('id','inputID')
.attr('readonly',true);
//And append it to the form
$('#addstudents').append($el);
Remember you also can remove any DOM from your form just find the appropiate jquery selector
$('form > input:last').remove(); // to remove last input
check this working sample that a made on jsfiddle.net to help you with this
I would use JavaScript, I already answered this question here. Just uses plain JavaScript to edit the HTML of the page. Hope this helps!
Related
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.
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.
My Problem is in brief below: This is done using PHP, JS, Smarty and HTML
<form name="todaydeal" method="post">
<span id="fix_addonval"></span>
<input type="radio" name="offer" id="offer_{$smarty.section.mem.index+1}" value="{$display_offers[mem].offervalue}" onclick="return sel_bees(this.value);" />
<input type="submit" name="SET" value="SET" />
</form>
{literal}
<script>
function sel_bees(Val)
{
document.getElementById('fix_addonval').innerHTML='<input type="hidden" name="addon" id="addon" value='+Val+' />'
}
</script>
{/literal}
When i click on the radio button its value must be replaced via javascript innerHTML and it should be placed in the span id. When i submit the form using submit button the value which is replaced in the should be get in the next page. How can this be done ?
Any ideas will be thankful and grateful. Thanks in advance
Your code is so buggy !
Your question is not clear, but if you need to create a text box in the span using javascript you can do the following:
some mistakes you've made in your code
1) you said, you need to create a textbox so you should use (text) as the type of your input.
2) use (;) at the end of the javascript statement to run successfully in all browsers
3) use < script type="text/javascript"> for your javascript code, to make it more readable
4) you've forgot to enclose the value attribute in (") and I do it in the following code for you
jQuery:
$('fix_addonval').html('< input type="text" id="addon" value="' + Val + '"/>');
This approach looks convoluted for me. All you are trying to do is to create a dynamic hidden variable and assign a value to if the checkbox is checked. Ideally, I would keep the hidden variable in the markup and will assign the value to it if the checkbox is checked. Since it is hidden, it is not going affect your HTML markup.
I don't know if span element is supposed to contain anything else besides text, at least the XHTML way, and if the input is of type hidden it can safely reside in the page and simply replace the value.
Try it with jQuery.
http://jsfiddle.net/vXgzK/
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");
$('#images_upload_add').click(function(){
$('.images_upload:last').after($('.images_upload:last').clone().find('input[type=file]').val('').end());
});
using this code to append file input's does not upload the file in firefox.
also
$('#image_server_add input[type=button]').click(function(){
var select = $(this).siblings('select').find(':selected');
if(select.val()){
$('#image_server_add').before('<tr class="images_selection"><td><input type="button" value="Delete"></td><td class="main">'+select.html()+'<input type="hidden" value="'+select.html()+'" name="images_server[]"/></td></tr>');
}
})
also does not upload the values to the $_POST
I can't find anything to say why this wouldn't work in the documentation, this works in IE but not it Firefox/WebKit
Why wouldn't these examples correctly upload the form values?
Bottom line the markup on the page was mangled.
The form was in a table based layout, not by my choice, and the form declaration was inside a tr.
I moved the form declaration to a parent td of the form inputs and now it works.
This is an interesting result considering the rendering engine will correctly submit inputs that are improperly placed, but attempting to add those inputs using jQuery/javascript? into the same place will not work in Firefox/WebKit.
I imagine this has to do with the dom manipulation that javascript does and how it may be more strict about the block level element requirements.
Any more notes/conjectures about my findings would be appreciated.
Are you having the same problem if you create a new input rather than cloning an existing one?
Are you changing the name of the cloned input to avoid name collisions or are you using an array style name (e.g. file[])?
What is the purpose of adding the markup of the selected option to a hidden input?
For fun, have you tried using .clone(true)?
Wow! Sometimes jQuery can actually be too dense to read. Would also help if we could see your markup.
Stab in the dark here because I'm guessing at what you're trying to do.
You can't programmatically enter a filename into a file field and it be uploaded to the server. That would be dangerous.
Perhaps I'm barking up the wrong tree?
Maybe rather than adding the element just as the form is submitted, put the element in, but with default values.
Then when the button is clicked, populate that element with the right value.
I just say that because by the time you click on the submit, it might be too late for the added element to be submitted along with the form.
I got to this section from google searching a similar problem.
To me, I was able to fix it by taking a step back at the problem -
in a example form:
<table>
<form method="post">
<tr>some content <input type="text" name="test"> </tr>
</form>
</table>
This will work in Internet explorer for some reason, but it is actually invalid html.
Move the form tags to outside the table, like so:
<form method="post">
<table>
<tr>some content <input type="text" name="test"> </tr>
</table>
</form>
And it will then work.
The input's will work fine (even dynamicly) this way, I was having a lot of trouble where a form would work, until you inserted more inputs or form elements - only the original elements would submit, which was very hard to track.