I have comments fetched by AngularJS from a webservice. I then fill my HTML with AngularJS data.
There can be answers to any of these comments, and there's always an input after the comments and answer (in the same div) to answer to the whole post.
Here's the HTML showing this :
<div class="message" ng-repeat="post in ctrl.posts" ng-if="ctrl.posts">
...
<div class="message_answer" ng-repeat="answer in post.answer" ng-if="post.answer">...</div>
<form method="POST" ng-submit="ctrl.add_answer_to_post = post.message.add_answer_to_post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="post_id" value="<% post.message.id %>">
<textarea class="comment" name="comment" placeholder="Write your message" ng-model="post.message.answer_added"></textarea>
<div class="message-send">
<button type="submit" class="general-button"><i class="fa fa-send"></i> React</button>
</div>
</form>
</div>
But I have two problems here.
First, the ng-submit that I did seems dodgy.
I did this because I don't know how to get the textarea value that's in the form I submit.
Same goes for post_id.
ctrl.posts is an array of objects or empty, and ctrl.posts[0].answer is an array of objects or empty.
How do I get the values that are contained in the form I submitted ?
Related
Hi I want to get the valid or invalid state of all the forms outside the form tag i.e suppose if any of the form is not valid error message should be shown. myform.$invalid is not working for all forms and is not updating
<div ng-repeat="a in [0,1,2,3,4]">
<form name="myForm">
<input type="text">
</form>
</div>
<div ng-if="myform.$invalid">Fill all fields</div>
It is better to have all the <input> elements on the same form:
<form name="myForm">
<div ng-repeat="a in [0,1,2,3,4]">
<input type="text" name="myInput{{a}}" ng-model="itemArr[$index]" required />
</div>
</form>
<div ng-show="myForm.$invalid">Fill all fields</div>
$scope.itemArr = [];
Also it is important that each <input> element has an ng-model directive.
For more information, see
AngularJS Developer Guide - Forms
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>
I am having the same concern here, where I am creating multiple instance of form with same format (it's a table for multiple row input). I have been trying adding the $index to the form name but then I am facing issue to access the form_$index inside ng-messages and ng-click
example:
<div ng-repeat="a in [0,1,2,3,4]">
<form name="myForm_{{ ::$index }}">
<input type="text">
</form>
</div>
<div ng-if="myform_{{ ::$index }}.$invalid">Fill all fields</div>
Wondering if anyone else can propose a solution for this use case.
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 3 years ago.
I´m generating some divs in an external .js file that are essential for my website. With those divs i create a button on a blade. This button shall call the Controller Method appendright() on click. I know that normally a form ist created to send some data like shown below.
<form method="POST" class="input-group" action="" enctype="multipart/form-data">
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}"/>
<input type="text" class="form-control col-lg-3" id="inputValue" name="inputValue" required>
<div class="input-group-append">
<button class="btn btn-success" type="submit" onclick="theneededMethod()">+</button>
</div>
</form>
The Problem is that i append everything. All divs and the button are inside of ' ' marks. So trying to call the functon with {{ route('appendright()')}} or url does not work because the method is surrounded with ' ' marks as well.
$('#anchor').append('<div id="'+id+'" class="fontBoxHeading box index start">
<div class="border defaultBorder">
<div class="innerBox notSelected">
<div class="text">
<div class="textPadding">'+sitemapHome+'</div>
</div>
</div>
</div>
<form method="POST" class="input-group" action="" enctype="multipart/form-data">
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}"/>
<div class="input-group-append">
<button class="btn btn-success" type="submit" onclick="{{ route('appendright()')}}">+</button>
</div>
</form>
</div>');
Maybe I just need to exclude those ' ' marks somehow. But i don´t know how. I just wannt to call a Controller function appendright().
You can't just call a server side PHP function from a client side JavaScript. If you want to do this you will need to use ajax calls from your JavaScript to reach the server side code.
Make sure you read about the differences between server side and client side code. For example, on this question: https://stackoverflow.com/a/13840431/743016
I want to create multiple forms with three fields each- name , id and a submit button. The values in each form are different.I am doing this with ejs(rows
is an array of objects).
<%for(var i=0;i<rows.length;i++)%>
<form action="some_url" method="post">
<a><%=rows[i].name%></a>
<a><%=rows[i].id%></a>
<button type="submit">Submit</button>
</form>
<%}%>
Now the submit button should send the text inside anchor tags to another the nodejs API.But it doesn't work.Can someone please provide solution to this or an alternative solution?
try adding hidden values, so the form will recognize them
<%for(var i=0;i<rows.length;i++)%>
<form action="some_url" method="post">
<a><%=rows[i].name%></a>
<input type="hidden" name="name" value="<%=rows[i].name%>">
<a><%=rows[i].id%></a>
<input type="hidden" name="id" value="<%=rows[i].id%>">
<button type="submit">Submit</button>
</form>
<%}%>
I'm trying to get the search term to appear in the URL. What am I doing wrong?
<form name="catsearchform74255" method="post" onsubmit="processSearch(this)" action="/Default.aspx?SiteSearchID=2248&ID=/search-results&keywords=">
<div class="input-field search-box">
<input id="CAT_Search" type="search" name="CAT_Search" placeholder="What are you looking for?" class="white" required="true">
<label class="label-icon" for="CAT_Search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
<script type="text/javascript">
function processSearch(form) {
form.action = form.action + CAT_Search.value;
}
</script>
</form>
Change method="post" to method="get".
Update any server-side code referencing post variables to reference get variables. For example, in PHP code, change $_POST["CAT_Search"] to $_GET["CAT_Search"].
Also, the correct format for the required HTML attribute is either required="" or required="required.
Code
This can be done with JS, you can't edit the method as Business Catalyst expects a post for this form.
If you change the form to the following:
<form name="catsearchform74255" id="searchForm" method="post" action="/Default.aspx?SiteSearchID=2248&ID=/search-results&keywords=">
<div class="search-box">
<input class="cat_textbox_small" type="text" name="CAT_Search" id="CAT_Search">
<input id="submitForm" onclick="submitFormScript()" type="button" class="cat_button" value="Search">
</div>
</form>
and then add the following jQuery:
function submitFormScript() {
var searchAction = $("#searchForm").attr("action");
searchAction = searchAction + $("#CAT_Search").val();
$("#searchForm").attr("action", searchAction);
$("#searchForm").submit();
}
Explanation
By adding the ID's to the fields on the form and then taking type="submit" off the input button we can edit the form action before we submit the form.
In the JS we are getting the form action, adding on the value of the search box (users input) and then setting that back to the form action attribute. After that we have the URL that we want to send to the next page so we can then submit the form.
If I have a form element as given below, then calling the form's submit will automatically generate the request body/query parameters in the url-encoded form as "username={username}&password={password}&submit=submit" where values in {} are taken from the corresponding input element's text boxes.
<form action="/action.php" method="POST">
<input id="username" type="text" />
<input id="password" type="password" />
<input type="submit" id="submit" value="submit" />
</form>
But if I am going to place my input elements in multiple levels of div's, then the form submit will fail to generate the request body/query parameters.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" id="submit" value="submit" />
</div>
</div>
</form>
Can anyone tell me the reason why it is like that? The specification doesn't mention that the input elements should be immediate children of Form element. I was wondering a proper reason for this behavior.
The values will be populated to the elements and you can check the values also if you edit the changes as given below
<script type="text/javascript">
function logincheck() {
alert ('hi ' + document.getElementById('username').value);
alert ('hi ' + document.getElementById('password').value);
}
</script>
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
A bit more detail:
I am assuming you are using PHP for the rest of this, you can substitute any other server side language.
You are missing the name attribute on your inputs. Unless you are actually using the id attributes for something you can get rid of them. Form data is listed by the name attribute - for instance the PHP $_GET, $_POST, and $_REQUEST arrays which will be keyed by names of your inputs. No name and the data is ignored.
You can also create an array of inputs by using a pair of brackets after matching names.
Example:
<input name="answers[]" type="text" id="answer1" />
<input name="answers[]" type="text" id="answer2" />
This will create one GET/POST entry that is an array. It will have the key answers with two elements inside the array.
For checkboxes, you will only get a value in the GET/POST when they are checked. You will not get a result if it isn't checked. Important to know. If someone, for instance, turns something "off" you will need to know the list of original inputs to compare against.
The first thing I notice is that your inputs are missing the "name" attribute. It's not required by the HTML spec afaik, but I think this is why the values are not sent with the request.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" name="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" name="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
This should do the trick
The input elements don't have to be directly inside the form element! they can be inside divs tables etc... How about trying to use names along with the ids in the text fields, like the following:
<input type="text" id="username" name="username" />
note the name="username" in the previous example -
to all input elements.