I have a form generated dynamically with the method .append() of jQuery.
I can add any number of new input, textbox, cmbbox, etc...
But the problem is that when I do the sumbit of the form, the PHP target does not receive the new input added, but just the vars connected to the input already in the form before the append().
Any ideas?
The javascript:
$("#button").live('click',function add(){
$("#list").append(
'<li style="height:20px;">'
+'<input type="text" class="text" id="prova" name="prova[]" value="prova">'+
'</li>'
);
});
The Html:
<input type="submit" id="button" value="Add input">
<form name = "form" id="form" action="post.php" method="POST">
<ul style="width:670px;padding:0px 0px 30px 0px" id="list">
</ul>
<input type="submit" id="submit" value="Submit">
</form>
The PHP:
<?php
print_r($_POST);
?>
Problem 1:
Your #button should not be of type submit, since you just want to use it to add to the form and not submit the form. So you should have:
<input type="button" id="button" value="Add input">
Problem 2:
You are overwriting your variables. The name is the variable sent with the form, so each input addition must have a new name, or the variable must be an array.
Additionally, you can't have more than one element with the same id.
The simplest way to solve this is to make prova an array by using the form prova[]:
$("#button").live('click',function() {
$("#list").append(
'<li style="height:20px;">' +
// Removed repetitive ID and made prova an array
'<input type="text" class="text" name="prova[]" value="prova"></li>'
);
});
jsFiddle example
You are intercepting the click event and adding elements to the form, but the event has already started, and will complete its default action (submit the form) without re-checking the content of the form.
You should stop the event after adding the fields (preventDefault should be the right choice), and then re-submit the form.
Something along these lines:
$('#button').live('click', function add(event){
event.preventDefault();
$('#list').append(...);
$('#form').submit();
});
I haven't tested it, but I'm pretty confident that it should work :)
Just to clarify, and putting any other problems aside, #Claudio's note is the correct answer here. I just had the same problem, button type was 'button' and the new element's name was being dynamically incremented. Everything looked fine, but the added elements would not submit.
Then I noticed my form tags were inside the table tags. I moved them outside and it all worked as planned.
Have any code to show? In order for php to "see" the vars submitted, you have to ensure that it has the "name" attribute specified on the form elements. I have a feeling your issue is going to be with the jQuery not the php.
Best guess: You haven't set name attributes for your dynamically added elements.
Related
I've got a small-big problem with ajax. Let's describe the situation:
I've got a form with submit=javascript:function()
function will call AJAX with some values, and on success I want to append some content with 'required' input to existing form.
I was trying many things, most from: How to set HTML5 required attribute in Javascript? , but still cannot reach it.
example code:
<form id="myFormID" action="javascript:mycustomsubmit()">
<input type="text" id="add" style="margin:2px;" required>
<input type="submit" name="add" value="Add" class="btn btn-primary">
<textarea rows="5" id="custom_add"></textarea>
(...) on ajax success clear form values and insert new required input:
$("#add").val('');
$("#add").after('<input name="anotherinput" type="text" required>');
so after this my html code looks like this:
<form id="myFormID" action="javascript:mycustomsubmit()">
<input type="text" id="add" style="margin:2px;" required>
<input name="anotherinput" type="text" required="">
<input type="submit" name="add" value="Add" class="btn btn-primary">
<textarea rows="5" id="custom_add"></textarea>
</form>
And in fact it is (with this difference, that new input has required=""), but this new input is not required at all - I can send form even if this input is empty. I was trying to do it by append required, required="required", required=true, required="true", by append just input and then jQuery .prop or/and .attr, by JS examples from link - but it is still not working.
2nd question: After ajax append content and clear values I've got red border around required input field - is there any simple way to remove it (but to show this border and info if user will try to send form with this input empty) in FF,Chrome,IE ?
First post here...
Thanks in advance for any advices!
edit:
what is interesting: when I've submitted my form few times (so I've got few input fields) and I executed $("input").attr('required',true).prop('required', false); then obviously form haven't got any required inputs. However when I've executed it with prop "true" then only original input is really required, all added by append still can be empty...
This is a question consisting of multiple questions. So I'll try to identify and answer them separately.
How to append a new input field after your input field with ID "add" on submitting the form?
Try this instead (your selector was wrong):
$("#add").val('');
$("#add").after('<input name="anotherinput" type="text" required>');
How do I get rid of the red border?
I suggest that you use jQuery to handle the form submit (not tested):
$('#myFormID').submit(function(e) {
// Checking if all required fields are filled out.
if (!e.target.checkValidity()) {
// TODO: Not all required fields are filled out. Do something e.g. adding your new input field?
// Preventing form submit to continue. I think this should prevent the red border. Not tested though...
e.preventDefault();
}
else {
// Everything is OK. Do whatever is needed.
}
});
I'm not sure if I got your questions, but I hope it helps.
Try this,
$("input").attr('required',true);
or
$("#name_add").attr('required',true);
Considering the following HTML:
<form id="upvoteForm" method="post" action="/post/upvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<form id="downvoteForm" method="post" action="/post/downvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<input type="hidden" id="_postid" value="1"/>
I'm trying to set the two input fields with the name post_id to to value from _postid using this JavaScript and jQuery:
$(document).ready(function() {
$('#post_id').val($('#_postid').val());
});
However, as you can see in this jsFiddle, it's only setting the value of the first one. How do I set the value of both of them? I thought the selector would end up grabbing both.
Now, I realize you might be wondering why I have two forms on this page. The basic reason is I have button inputs that I've styled the way I want but then I use the onclick to call the submit of the appropriate form here. I am ultimately going to be leveraging AJAX here, but that's coming later.
id is always unique. you cannot select 2 elements with same id. select by name
$(document).ready(function() {
$('input[name=post_id]').val($('#_postid').val());
});
Having two HTML elements with the same ID is illegal and will cause undefined behavior such as what you're experiencing. Using the same name is valid, however. Therefore you could use a selector like $('form > input[name=post_id]'), which would look for an input inside of a form with the name attribute set to post_id.
How can I specify which submit button to submit with?
The current example just submits the first submit button, with $("form").submit(); but how can I make it so it chooses the submit button by id or name?
<html>
<script>
$("form").submit();
</script>
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" />
//other inputs
<input type="submit" value="Enter" name="enter" id="enter">
<input type="submit" value="Void" name="void" id="void">
<input type="submit" value="Refund" name="refund" id="refund">
</form>
</html>
Simulate a click to that element:
$("#circle2").click();
Also, you don't need action="<?=$_SERVER['PHP_SELF']?>". Forms submit to the current page by default.
First of all, why do you want to submit the same form with 3 different buttons?
It is a bad structure. Your code also has all the 3 buttons with the "id" attribute which is included in the <input> tag twice.
Based on your question, I could figure out you would want the submit button to say different things under different conditions.
Have a single button like this :
<input type="submit" name="submit" value="Enter">
You could always change what your button says, or how it looks like with JQuery :
if(condition){
$('#submit').val('.....');
// You can also change more stuff as you want.
}
Then you would want to submit the form
$('#submit').click(function(e)){
e.preventDefault();
$('form').submit();
}
By id
You can select the element by id easily with $('#my_btn') and you can click on it using the jQuery method click().
By name (or any other attribute
Other attributes are a bit harded (but not complex)
You select the element with $('input[name=some_name]')
Examlpe using your code
Here is an example which shows how you can get elements by name and click on them, click the submit buttons to see what happens: http://jsfiddle.net/nabil_kadimi/99v93/2/
How do I access hidden fields in angular? I have an app, where I want to submit a form for each of items in the list. The form is simple - it has submit button and a hidden field holding the ID value. But it does not work. The value is empty.
I updated the default angular example to display the situation - the todo text is in hidden field.
http://jsfiddle.net/tomasfejfar/yFrze/
If you don't want to hardcode anything in your javascript file, you can either load it via AJAX, or do:
<input type="hidden" name="value" ng-init="model.value=1" value="1">
this way, you can keep the form functionality with JS off, and still use the hidden field in AngularJS
If you want to pass the ID from the ng-repeat to your code, you don't have to use a hidden field. Here's what I did:
For example, let's say I'm looping through a collection of movies, and when you click the "read more" link it will pass your ID to your JS code:
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} read more
</li>
</ul>
Then in your JS code, you can get the ID like this:
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}
In your simpler fiddle, the problem can be fixed by using ng-init or setting an initial value in the controller. The value attribute won't effect the ng-model.
http://jsfiddle.net/andytjoslin/DkMyP/2/
Also, your initial example (http://jsfiddle.net/tomasfejfar/yFrze/) works for me in its current state on Chrome 15/Windows 7.
You can do something like this.
It is a dirty trick, but it works (like most dirty tricks ;-)
You just use the form name as Your hidden field
and always give the form the id "form"
<!doctype html><html ng-app><head>
<script src="angular-1.0.1.min.js"></script>
<script>
function FormController($scope) {
$scope.processForm = function() {alert("processForm() called.");
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("form").name;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
};
}
</script></head><body>
<div ng-controller="FormController">
<form name="YourHiddenValueHere" id="form">
<input type="text" ng-model="formData.foo" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
</div></body></html>
This allows You to use ONE Controller for ALL forms and send
them to ONE server script.
The script than distinguishes by the
form name (formData.foo) and knows what to do.
The hidden field names the operation in this scenario.
Voila - You have a complete application with as
many forms You want and one server script
and one FormController for all of them.
Simpler:
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
It works!
Use ng-binding="{{employee.data}}". It will work properly.
I have to correct (improve) myself:
You can do it more elegantly:
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
and then in the JavaScript controller:
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("bar").value;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
So you can have as many hidden fields as you like.
I have a form in HTML with multiple inputs of type submit:
<form id = "myForm1" action="doSomethingImportant/10" class="postLink" method="post">
<input type="hidden" id="antiCSRF" name="antiCSRF" value="12345"></input>
<input type="submit" value="clickThisLink"></input>
<input type="submit" value="Don'tclickThisLink"></input>
</form>
What I want to do is select only the first input with type submit while ignoring the others, the snippet of code I currently have is as follows, note it is within a for-each loop that goes through all forms on my page, hence (this) to avoid confusion:
var name = $(this).find("input[type='submit']").val();
I'm thinking this already grabs the first input of type submit by default, I'm not sure if that assumption is correct or if there's a more formal way of going about it, thanks.
Try:
$(this).children("input[type='submit']:first").val();
how about the first selector
var name = $("input[type='submit']:first").val();