I'm working on a project which includes some JQuery and AJAX. I have also implemented a feature of JQuery autofill. The code of form is shown below:
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-primary" id="addendt">Add Endorsement</button>
<button class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>
The Autofill is implemented on the textbox with ID "endtpolnumber". When I click on textbox with ID "findpolinfo" it should alert "asdf". But, on contrary it is redirecting me to to this URL
"http://localhost/dis/home/login?endtpolnumber=31-125&endtefffrom=&endtno=&endtamt=&endtdesc="
My JQuery code is as below:
$('#findpolinfo').click(function () {
alert('asdf');
});
Does anyone have any idea, where am i going wrong?
All positive suggestions are welcomed...
Thanks in advance...
Because the default behavoiur of <button> if it is inside form is submit
what's the standard behavior when < button > tag click? will it submit the form?
add
type="button"
if you don't want this button to submit form
Button has a default behaviour to submit the form. You can use return false to stop that form submission. Below is code to help you out. Just enter the policy number and click on the 'Find Policy' button:
$('#findpolinfo').click(function () {
alert($("#endtpolnumber").val());
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-primary" id="addendt">Add Endorsement</button>
<button class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>
based on W3schools if you want to add button just for clicking,You can add type="button" to your button attributes.just like this:
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button type="button" id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="button" class="btn btn-primary" id="addendt">Add Endorsement</button>
<button type="button" class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>
Related
Buttons in navbar.blade.php file
Each time when user click on edit button then its correspondence ID should be pass through the this Form...
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Edit</button>
and this button is redirected to this form
<form action="-----------" method="POST" role="form" class="form-horizontal">
{{ csrf_field() }}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Nav ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nav_id" placeholder="nav id" readonly="" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Nav Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nav_name" placeholder="nav name" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-2 control-label">
Nav Details</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nav_description" placeholder="nav details" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm">
Submit</button>
</div>
</div>
</form>
So how to update the record of selected ID from .blade file and what should i write here in navbarController.php and in its route file
public function edit(Request $request) {
}
}
It's the solution
add "edit-button" class to your button and using alt attribute to keep $ID
<button class="edit-button btn btn-primary" alt="<?=$ID?>" data-toggle="modal" data-target="#myModal">Edit</button>
add hidden field to keep $ID to your form
<input id="id" type="hidden" name="id" value=""/>
Using #section and #yield to write jquery code to adjust value for hidden fields when the user click on edit button. let's see https://laravel.io/forum/09-02-2014-using-section-and-yield
#section('javascript')
$("body").on('click','.edit-button',function(){
var activeEditId = $(this).attr('alt');
$("#id").val(activeEditId);
)});
#stop
I am working on a form where a user selects an option from radio buttons.
Then depending on option, a view of text fields appears. The user then inputs the required data and submits the form.
The options have different options and such data submitted should be different.
My challenge is how to submit only data from the selected radio button fields.
Anyone kindly help. Thank you
$(function () {
$('input[type="radio"]').on("click",function () {
$(".selections").hide(); // hide them all
if (this.value=="both") $(".selections").show(); // show both
else $("#"+this.value).show(); // show the one with ID=radio value
});
$('.selections input[type="checkbox"]').on("click",function() {
$(this).next().toggle(this.checked); // hide if not checked
});
$('.selections input[type="text"]').each(function() { // initialise
$(this).toggle($(this).prev().is(":checked"));
});
});
.selections { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" name="bill_type" value="percentage">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<!-- flat_rate radio button option -->
<div id="flat_rate" class="selections">
<input type="hidden" name="bill_type" value="flat_rate">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at">
</div>
<!-- variable radio button option -->
<div id="variable" class="selections">
<input type="hidden" name="bill_type" value="variable">
<div class="form-group">
<label for="limit" class="col-md-4 control-label">Limit</label>
<div class="col-md-4">
<input id="limit" placeholder="10" type="number" class="form-control" name="limit" autofocus>
</div>
</div>
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" name="send_at">
<br/>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
You should try to use Bootstrap Tabs [imho], but if you want to go with radios...
Disabling all inputs will prevent them from being submited:
$("#div :input").attr("disabled", true);
or
$('#div').find('input, textarea, button, select').attr('disabled','disabled');
Code from this post
Firstly you don't need same field repeatedly.Try like this
$(function () {
$('input[name="billing"]').on('change',function(){
$('#bill_type').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" id="bill_type" name="bill_type" value="">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
After submission you can do whatever based on the value of bill_type.
I have a modal popup with few mandatory fields.
<form name="myReferenceDataForm" role="form" ng-submit="AddNewGroupMembershipReferenceRecord()" style="margin: 10px">
<div class="form-group row">
<div style="padding-bottom:5px; padding-top:5px; ">
<label for="GroupCode" class="col-sm-4 form-control-label">
Group Code <span class="requiredRed">*</span>
</label>
<div class="col-sm-8">
<input ng-model="referenceAddRecord.groupCode" class="form-control" id="GroupCode" type="text">
</div>
</div>
</div>
<div class="form-group row">
<div style="padding-bottom:5px; padding-top:5px; ">
<label for="GroupName" class="col-sm-4 form-control-label">
Group Name <span class="requiredRed">*</span>
</label>
<div class="col-sm-8">
<input ng-model="referenceAddRecord.groupName" id="GroupName" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group row">
<label for="GroupType" class="col-sm-4 form-control-label">Group Type </label>
<div class="col-sm-8">
<select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceAddRecord.populateGroupTypeDetails(selGroupType)" ng-options="groupType.value for groupType in referenceAddRecord.groupTypes track by groupType.id" ng-model="referenceAddRecord.groupType"></select>
</div>
</div>
Only above 3 fields groupName , groupCode are mandatory.
If they exist or not filled I want to have the submit button in the page disabled.
So , I did ...
<input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" ng-disabled="!(referenceAddRecord.groupCode || referenceAddRecord.groupName)|| addReferenceDataGroupNameExists() || addReferenceDataGroupCodeExists()" />
But it is not working . Even Only the whether the fields are filled that check is failing. Whenever I enter only one field it is getting enabled.
<input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" ng-disabled="!(referenceAddRecord.groupCode || referenceAddRecord.groupName)" />
What am I doing wrong here ?
Check out this plunker
<input type="submit" id="submit" ng-disabled="!(referenceAddRecord.groupName && referenceAddRecord.groupCode)" value="Submit" />
I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.
Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.
I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.
$.ajax({
type: "POST",
url: "phpindex.php",
data: $("#signUpForm").serialize(),
success:function(data)
{
if ("#error".val(data))
{
e.preventDefault();
}
}
});
});
My validation and database code is written in phpindex.php
***************signup form************************
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<h1>Sign Up</h1>
<div id="error"><?php if ($error!="") {
echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Your name">
<span class="fa fa-user"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address1</label>
<div class="col-sm-10">
<input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address2</label>
<div class="col-sm-10">
<input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="Email Address">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-5 col-sm-10">
<input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
</div>
</div>
<p><a class="toggleForms">Back to Log in</a></p>
</div>
</form>
***************login form*****************
<form method="post" id="logInForm">
<div class="container" id="logInContainer">
<h1>Log In</h1>
<div id="success"><?php if ($success!="") {
echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Emai</label>
<div class="col-sm-8">
<input type="email" class="form-control" placeholder="Email" name="email">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" placeholder="Password" name="password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-4 col-sm-10">
<input type="hidden" name="signUp" value="0">
<input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
</div>
</div>
<p><a class="toggleForms">Sign Up Here</a></p>
</div>
</form>
Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".
"#error".val(data)
I think you wanted to write something like this
$("#error").val(data)
This error would stop "preventDefault" from happening.
Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.
Lastly, I would consider calling, instead of preventDefault:
return false
Please see this thread as for the reasons why
event.preventDefault() vs. return false
I am new to angular. When I try validate the form ng-hide is not removed from ng-show. Can some one help me to sort out this issue?
Thanks in advance.
`
<div class="panel panel-default">
<div class="panel-body">
<h3>Add Language</h3>
<form name="LanguageAddForm" ng-controller="LanguageAddController" class="form-horizontal" method="post" ng-submit="submitLanguageAddForm()" novalidate >
<div class="panel-body">
<div class="form-group" ng-class="{ 'has-error' : LanguageAddForm.name.$invalid && !LanguageAddForm.name.$pristine }">
<label class="col-md-3 control-label">Language Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="language.name" id="lang-name" ng-model="language.name" required />
<p ng-show="LanguageAddForm.name.$invalid">Please enter a valid Topic</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Status:</label>
<div class="col-md-9">
<div class="radio" ng-init="language.status=1">
<label>
<input type="radio" name="status" id="status" ng-model="language.status" ng-value="1" >Active</label>
<label>
<input type="radio" name="status" id="status" ng-model="language.status" ng-value="0" >
Not Active
</label>
</div>
</div>
</div>
<div class="btn-group pull-right">
<button class="btn btn-primary" type="button" onclick="history.back(-1)" >Cancel</button>
<button class="btn btn-primary" type="submit" ng-disabled="LanguageAddForm.$invalid" >Submit</button>
</div>
</div>
</form>
</div>
</div>
`
You can use validation message in that way.
<input type="text" class="form-control" name="language.name" id="lang-name" ng-model="language.name" ng-pattern="" required/>
<span ng-show="form_name.language.name.$error.pattern">please enter valid value</span>
for more info read this Angular validation doc