Use function in HTML form to specifc camps - javascript

I want to when I click the button it will add what I wrote in the field with the prefix say and send it through POST, the POST is working fine because if I don't use the script it will send it but without the "prefix"
<script>
function say() {
document.actionsv.command.value = ("say " + "\"" + document.COMMOM.SAY.value + "\"");
document.actionsv.submit();
}
</script>
<form action='' method='post' name="actionsv">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-content">
<div class="">
<form name='COMMOM'>
<table class="table table-hover-animation mb-0 table-striped">
<thead>
<tr>
<th></th>
<th class="o"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="SAY" autocomplete="off" value="" class="form-control">
</td>
<td align="center"><button type="submit" value="Say" onclick="say()" class="btn btn-success waves-effect waves-light">MSAY</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
I've tried everything but can't get it to work..
This is the error in console: http://prntscr.com/oq4084

There more than one error with your code. I've made a fiddle for you.
<script>
function say()
{
console.log("say " + "\"" + document.actionsv.elements['SAY'].value + "\"");
document.actionsv.submit();
}
</script>
<form action='' method='post' name="actionsv">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-content">
<div class="">
<form name='COMMOM'>
<table class="table table-hover-animation mb-0 table-striped">
<thead>
<tr>
<th></th>
<th class="o"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="SAY" autocomplete="off" value="" class="form-control">
</td>
<td align="center"><button type="submit" value="Say" onclick="say()" class="btn btn-success waves-effect waves-light">MSAY</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
You are poiting the result ta element that doesn't exist (document.actionsv.command) and you were using the forms array wrong. I don't know what you were trying to do with document.actionsv.command so i made e console.log with the result.

Related

Why this jQuery parent("form") is not working

I made a form that links a button with from an attribute but it's not hiding the parent("form")
but when I try this it works
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
alert();
});
I don't know whats the problem with this code
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
$(this).parent("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
<div class="breadcrumb col-100">
<h2>UserProfile #<?=$_SESSION['Dname']?></h2>
<small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
</div>
<div class="card col-100 ">
<form method="post" editFormContent="#edit">
<table class="col-100">
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<label>
<td>First Name</td>
<td>
<span class="editFormSpan">Fname Lname</span>
</td>
</label>
</tr>
<tr>
<td colspan="2">Edit</td>
</tr>
</table>
</form>
</div>
</div>
Pls Help me Thanks
.parent() only selects the direct parent (one level up). .parents() will select all the way up the ancestor chain.
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
$(this).parents("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
<div class="breadcrumb col-100">
<h2>UserProfile #<?=$_SESSION['Dname']?></h2>
<small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
</div>
<div class="card col-100 ">
<form method="post" editFormContent="#edit">
<table class="col-100">
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<label>
<td>First Name</td>
<td>
<span class="editFormSpan">Fname Lname</span>
</td>
</label>
</tr>
<tr>
<td colspan="2">Edit</td>
</tr>
</table>
</form>
</div>
</div>
You can also use .closest() which will only select the nearest parent that matches instead of all parents.
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
$(this).closest("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
<div class="breadcrumb col-100">
<h2>UserProfile #<?=$_SESSION['Dname']?></h2>
<small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
</div>
<div class="card col-100 ">
<form method="post" editFormContent="#edit">
<table class="col-100">
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<label>
<td>First Name</td>
<td>
<span class="editFormSpan">Fname Lname</span>
</td>
</label>
</tr>
<tr>
<td colspan="2">Edit</td>
</tr>
</table>
</form>
</div>
</div>
You just need to add an id to your form and grab it with jquery, then calling .hide()
form id="myForm" ....
Add this script tag at the end of the body.
<script>
$(document).ready(function () {
$('#edit').click(function(e){
e.preventDefault();
$('#myForm').hide();
});
});
</script>
I think when we are using jquery, there is no need to make our life hard with complicated selectors.

How to clone and append chose dropedown box using jq?

I am trying to replicate some of my fields with chosen dropdown-box to clone and append using jq. Everything is working fine. But it is not replicating chosen dropdown.
HTML -
<div class="form-group row">
<div class="col-md-12">
<table width="100%" cellspacing="15" class="order-table">
<thead>
<tr>
<th width="50%">Product</th>
<th width="50%">Quantity</th>
</tr>
</thead>
<tbody>
<tr class="clone-class">
<td>
<select name="productId[]" class="form-control chosen-select chosen" style="width: 100%;"
data-placeholder="Select">
#foreach($product as $p)
<option value="{{$p->id}}">{{$p->name}}</option>
#endforeach
</select>
</td>
<td>
<input name="quantity[]" type="number" class="form-control" required>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<a class="btn btn-primary add-more-btn float-sm-right">Add</a>
</div>
</div>
Js -
$(document).ready(function(){
var clone = $('.clone-class').clone(true);
console.log(clone);
$('.clone-class select').chosen();
jQuery('.add-more-btn').click(function() {
var parent = jQuery('.clone-class').last();
clone.clone(true).insertAfter(parent);
$('.clone-class:last select').chosen();
});
});
On click of add button it is replicating expected fields but not dropdown as expected.
Thank you for your help in advance.
It might be causing by chosen-select chosen class.
I have tried your code on codepen. Just remove those classes from <select> and add data-live-search="true".
So your code will be -
<div class="form-group row">
<div class="col-md-12">
<table width="100%" cellspacing="15" class="order-table">
<thead>
<tr>
<th width="50%">Product</th>
<th width="50%">Quantity</th>
</tr>
</thead>
<tbody>
<tr class="clone-class">
<td>
<select name="productId[]" class="form-control" style="width: 100%;"
data-placeholder="Select" data-live-search="true">
#foreach($product as $p)
<option value="{{$p->id}}">{{$p->name}}</option>
#endforeach
</select>
</td>
<td>
<input name="quantity[]" type="number" class="form-control" required>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<a class="btn btn-primary add-more-btn float-sm-right">Add</a>
</div>
</div>
And same js code.
Also, check working codepen.

angularjs ng-form and ng-repeat with input validation and submit action

Angular 1.6.2
Try to iterate over elements of collection inputted by user and then check their validity and enable submit action if validation passes.
I try to use ng-form for this purpose and have two approach but each of them has side-effect.
First approach (ng-form at the table level):
<table class="datatable table table-stripped table-responsive" ng-form="form">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column" width=40%>
<input id="proposed-ld-input" name="input"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" data-ng-show="form.input.$error.required">
Message required
</div>
<div class="error" data-ng-show="form.input.$error.max">
Message max
</div>
<div class="error" data-ng-show="form.input.$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
In this approach submit is disabled until all input are in set ranges but validation messages don't appear.
Second approach (ng-form at the table column level):
<table class="datatable table table-stripped table-responsive">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column" width=40% ng-form="form">
<input id="proposed-ld-input" name="input"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" data-ng-show="form.input.$error.required">
Message required
</div>
<div class="error" data-ng-show="form.input.$error.max">
Message max
</div>
<div class="error" data-ng-show="form.input.$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
In this approach validation messages appear but submit button is always enabled.
Could you tell me what I did wrong?
Give the inputs different names:
<table class="datatable table table-stripped table-responsive" ng-form="form">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column{{$index}}" width=40%>
̶<̶i̶n̶p̶u̶t̶ ̶i̶d̶=̶"̶p̶r̶o̶p̶o̶s̶e̶d̶-̶l̶d̶-̶i̶n̶p̶u̶t̶"̶ ̶n̶a̶m̶e̶=̶"̶i̶n̶p̶u̶t̶"̶
<input id="proposed-ld-input{{$index}}" name="input{{$index}}"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" ng-show="form['input'+$index].$error.required">
Message required
</div>
<div class="error" ng-show="form['input'+$index].$error.max">
Message max
</div>
<div class="error" ng-show="form['input'+$index].$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
The ng-repeat creates multiple inputs. They need to be assigned different names for the error messages to be correct.

how to put an input value 1 in an input 2 use jquery

i have 2 input, i want when i click on button validate the value of input 1 puts in the input 2 and also it's input 1 empty give a message fill input 1.
help plz.
knowing that the button validate hide the form 1 and display the form 2:
<div id='form1'>
<div class="form-group col-md-4 col-md-offset-4">
<label>number day 1</label>
<input type="text" class="form-control" placeholder="nombre de jour 1">
</div>
<table class="table table-bordered">
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td>click</td>
</tr>
<tr>
<td>ee</td>
<td>ff</td>
<td>gg</td>
<td>hh</td>
<td>click</td>
</tr>
</table>
<div class="form-group col-md-offset-5 ">
<button id="hide" class="btn btn-success " type="submit">valider</button>
</div>
</div>
<!------table2 ------>
<div id='form2'>
<div class="form-group col-md-4 col-md-offset-4">
<label>Number day 2</label>
<input type="text" class="form-control" placeholder="nombre de jour 2">
</div>
<table class="table table-bordered">
<tr>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>click</td>
</tr>
<tr>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>click</td>
</tr>
</table>
</div>
jquery code to hide form1 and display form2:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#form1").hide();
});
$("#hide").click(function(){
$("#form2").show();
});
});
</script>
the CSS code to hide the form 2 at the start:
<style>
#form2{
display:none;
}
</style>
You can set id for input and use
let value = $('#input1').val();
$('#input2').val(value);
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('#input2').val(value);
}
});
});
#form2{
display:none;
}
#error{
color:red;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form1'>
<div class="form-group col-md-4 col-md-offset-4">
<label>number day 1</label>
<input type="text" id='input1' class="form-control" placeholder="nombre de jour 1">
<span id='error'>Input can not blank</span>
</div>
<table class="table table-bordered">
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td>click</td>
</tr>
<tr>
<td>ee</td>
<td>ff</td>
<td>gg</td>
<td>hh</td>
<td>click</td>
</tr>
</table>
<div class="form-group col-md-offset-5 ">
<button id="hide" class="btn btn-success " type="submit">valider</button>
</div>
</div>
<!------table2 ------>
<div id='form2'>
<div class="form-group col-md-4 col-md-offset-4">
<label>Number day 2</label>
<input type="text" id='input2' class="form-control" placeholder="nombre de jour 2">
</div>
<table class="table table-bordered">
<tr>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>click</td>
</tr>
<tr>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>click</td>
</tr>
</table>
</div>

Form validation when input fields are in a table

I have a textbox which is in a table as a column.
I want to validate the entire column not to be empty when the Ok button clicks.
Please tell me how to do it
var formatTableMandatoryValueColumn = function(value, row/* , index*/)
{
return '<div class="form-group mandatory-div"><input class="m-value form-control" placeholder="Enter value" type="text" value="' + row.value + '"></div>';
};
#* Mandatory Table *#
<div class="row padding-left-40px padding-right-20px padding-top-10px padding-bottom-10px" id="table-rules-mandatory-ccp-value-modal-div">
<table class="table-condensed" id="table-rules-mandatory-ccp-value-modal" data-classes="table table-no-bordered table-line-color-white" data-cache="false" data-striped="false" data-page-size="20" data-show-header="false">
<thead>
<tr>
<th data-field="key"></th>
<th data-field="operator" data-sortable="true"></th> <th data-field="value" data-sortable="true" data-formatter="BusinessPortal.Rules.CCPModal.formatTableMandatoryValueColumn" data-events="BusinessPortal.Rules.CCPModal.handleCCPTableMandatoryValueColumnEvents"></th>
</tr>
</thead>
</table>
</div>
<button type="button" class="btn btn-primary width-60px" onclick="BusinessPortal.Recommendation.Email.Preview.setCCPValueJson();">OK</button>
$('button').click(function() {
$('table textarea').each(function(i) {
if($(this).val()) {
$(this).parent().removeClass('has-error');
}
else {
$(this).parent().addClass('has-error');
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table>
<tr>
<th>Some header</th>
</tr>
<tr>
<td>
<div class="form-group">
<textarea class="form-control"></textarea>
</div>
</td>
</tr>
</table>
<button type="button" class="btn btn-primary width-60px">OK</button>

Categories