We Keep Coding

How submit value of input field dynamically

I have some categories:
<div class="cbp-l-inline-title" style=" font-size: 18px;">
<span style="color: #0669b4">Generic Name:</span>
<a><?php echo $category[0]['generic_name'];?></a>
</div>
and I want on click to insert value of this <a> to this form
<form method="post" action="/search/index" class="input-group" style="width: 45%; margin-left: 646px">
<input type="text" name="search" id="search" class="form-control" minlength=3 placeholder="Generic" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div id="suggesstion"></div>
<div class="input-group-btn input-group-append">
<button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
</div>
</form>
so that it dynamically starts search of results of this string. I can't send this value to url because it is not latin characters

html
<div class="cbp-l-inline-title" style=" font-size: 18px;">
<span style="color: #0669b4">Generic Name:</span>
<p class="clickMe">click me: text to send after click</p>
</div>
<form method="post" class="input-group">
<input type="text" name="search" id="search" class="form-control" minlength=3
placeholder="Generic" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div id="suggesstion"></div>
<div class="input-group-btn input-group-append">
<button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
</div>
</form>
And javascript in jquery
$('.clickMe').on('click', function(){
var value = $(this).text()
$('input#search').val(value)
})
https://jsfiddle.net/ora0j4uu/
.submit() if you want submit it as well https://www.w3schools.com/jsref/met_form_submit.asp
edit:
jquery for submit
$('.clickMe').on('click', function(){
var value = $(this).text()
console.log(value)
$('input').val(value)
$('.input-group').submit()
})

How can I click on a button if it has only value and name attributes using Javascript

This is the form and I want to click on submit button using Javascript Programatically
<form action="/testseries/go" method="post">
<div class="key">
<i class="fa fa-mobile" aria-hidden="true"></i>
<input type="text" name="username" placeholder="Phone Number" required="">
<div class="clearfix"></div>
</div>
<div class="key">
<i class="fa fa-lock" aria-hidden="true"></i>
<input type="password" name="password" placeholder="Password" required="">
<div class="clearfix"></div>
</div>
<input type="submit" value="Login"> //THIS BUTTON
</form>
The Problem is that I am new in Javascript and i have studied that
there are DOM elements like getElementById , ClassName etc but in this
case how can I get the click of the button which don't have any DOM?

You can use querySelector:
const input = document.querySelector('form > input[type="submit"]');
console.log(input.value);
<form action="/testseries/go" method="post">
<div class="key">
<i class="fa fa-mobile" aria-hidden="true"></i>
<input type="text" name="username" placeholder="Phone Number" required="">
<div class="clearfix"></div>
</div>
<div class="key">
<i class="fa fa-lock" aria-hidden="true"></i>
<input type="password" name="password" placeholder="Password" required="">
<div class="clearfix"></div>
</div>
<input type="submit" value="Login"> //THIS BUTTON
</form>
In plain language, 'form > input[type="submit"]' means select input which has an attribute type whose value is submit that is a child of a form.

HTMLFormControlsCollection API is used to reference the<form> tag and all of its form controls. HFCC can be used very effectively with minimal code. Compare these two snippets which are equivalent:
HFCC - 108 Chars
var log = document.forms.login;
var L = log.elements;
var b0 = L.btn0;
var b1 = L.btn1;
var s0 = L.sub0;
Standard - 231 Chars
var log = document.getElementById('login');
var L = document.querySelectorAll('input, button');
var b0 = document.getElementById('btn0');
var b1 = document.getElementById('btn1');
var s0 = document.getElementById('sub0');
The JavaScript methods for triggering a click is click():
targetObj.click();
and for triggering a submit is submit():
formObj.submit();
In the following Demo:
Sends submitted data to a live test server. A response will be sent back. There should be values of keys: [username] and [password] if successful.
"form":{"password":"|PASSWORD ENTERED|","username":"|NAME ENTERED|"},
The 2 buttons at the button test the triggers.
Click the Trigger Click. If both text fields have content, then you should receive a response from the live test server. Otherwise you'll get a tooltip requesting the indicated textbox have data.
Click the Trigger Submit. The form will be sent regardless of textbox content. The reason for this behavior is because the <form> element is the event.target of a submit event and required attributes are internally triggered by a click event on a submit button, hence the behavior of the previous trigger.
Demo
var log = document.forms.login;
var L = log.elements;
var b0 = L.btn0;
var b1 = L.btn1;
var s0 = L.sub0;
b0.onclick = function(e) {
s0.click();
}
b1.onclick = function(e) {
log.submit();
}
fieldset {
width: 260px;
padding: 10px 5px;
}
label,
input,
i {
display: inline-block;
font: inherit;
line-height: 1.5;
margin: 5px;
}
i {
transform: translateY(8px)
}
input[type='submit'] {
margin-left: 75%
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<form id='login' action="https://httpbin.org/post" method="post">
<fieldset>
<i class="fa fa-user fa-2x" aria-hidden="true"></i>
<input type="text" name="username" placeholder="User Name" required><br>
<i class="fa fa-lock fa-2x" aria-hidden="true"></i>
<input type="password" name="password" placeholder="Password" required><br>
<input id='sub0' type="submit" value="Login">
</fieldset>
<button id='btn0' type='button'>Trigger Click</button>
<button id='btn1' type='button'>Trigger Submit</button>
</form>

Make a html attributie with button role submit a form

I need to have my html attribute submit a form. My problem is that a normal button attribute is able to use the type="submit" and other attributes using role="button" don't do anything with the type.
So how do I make it submit a form? If you can give me a script to do it, that would be fine too.
(I don't know javascript myself)
My current code:
<form action="myloc" method="post">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>

If I understand you correctly you want to submit the form when you press the button using javascript?
<form id="test" action="myloc" method="post">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button" onclick="document.getElementById('test').submit();">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
Notice that what I did was to set an id ("test") on the form and then added an onclick event to the anchor element.

Here is your solution,
<form action="myloc" method="post" id="myForm">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button" id="sub">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
Javascript code
var button=document.getElementById('sub');
button.onclick=function(){
document.getElementById("myForm").submit();
}

Give your <a> element an id, then set a jquery onclick function with that id to run whatever query you want.

Checkboxes weird behaviour in AngularJS ng-repeat

I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.

You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />

You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);

How can I submit a form via POST?

<form id="search" action="#" method="post" style="float: left">
<div id="input" style="float: left; margin-left: 10px;" >
<input type="text" name="search-terms" id="search-terms" placeholder="Search websites and categories..." style="width: 300px;">
</div>
<div id="label" style="float: left; margin-right: 10px;">
<button type="submit" onclick="searchbox()" for="search-terms" id="search-label" class="glyphicon glyphicon-search"></button>
</div>
</form>
When the user clicks on div id label, I want to toggle the display property of div input. which is working fine. I have used following code to implement the functionality.
function searchbox(){
if ($("#input").css('display') == 'none') {
$('#input').css('display','block');
} else {
$('#input').css('display','none');
}
}
I want to to submit the form data via POST but that functionality is not working, neither by pressing enter key nor when submit button is clicked.
Please help me with this.

Try submitting through JS
HTML
<form id="search" action="#" method="post">
<div id="input" style="float: left; margin-left: 10px;" >
<input type="text" name="search-terms" id="search-terms" placeholder="Search websites and categories..." style="width: 300px;">
</div>
<div id="label" style="float: left; margin-right: 10px;">
<button type="submit" for="search-terms" id="search-label" class="glyphicon glyphicon-search">click</button>
</div>
</form>
JS
$(".glyphicon").click(function(e){
e.preventDefault();
if ($("#input").css('display') == 'none') {
$('#input').css('display','block');
} else {
$('#input').css('display','none');
}
$( "#search" ).submit();
});

you have to use <input type=submit> for submitting