AngularJS ajax form submit with submit input - javascript

I have a form which having stepy wizard.For working stepy wizard,it is must to use input submit button not a button.So I am using submit button,but while clicking submit button it is redirecting to main page.
My code
<form action="#" id="wizard" class="form-horizontal" ng-submit="abc($event)">
<!-- Step 1 -->
<fieldset title="Step 1">
<legend>Registration</legend>
<div class="form-group">
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_house_number'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" required="required" ng-model="newItem.housenumber"/></div>
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_house_name'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" required="required" ng-model="newItem.housename"/></div>
</div>
</fieldset>
<fieldset title="Step 2">
<legend>Registration</legend>
<div class="form-group">
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_place'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" required="required" ng-model="newItem.place"/></div>
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_land_mark'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" ng-model="newItem.language"/></div>
</fieldset>
<fieldset title="Step 3">
<legend><?php echo $this->lang->line('label_fac'); ?></legend>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="checkbox" ng-model="newItem.electricity" value="electricity" /><?php echo $this->lang->line('label_electricty'); ?>
</label>
</div>
</div>
</fieldset>
<fieldset title="Step 4">
<legend>Agriculture</legend>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="checkbox" ng-model="newItem.cocunut" value="cocunut" /><?php echo $this->lang->line('label_cocunut'); ?>
</label>
</div>
</div>
</fieldset>
<fieldset title="Step 5">
<legend> Other</legend>
<div class="form-group">
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_get_any_help'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" ng-model="newItem.help"/></div>
<label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_source'); ?></label>
<div class="col-md-3"><input type="text" class="form-control" ng-model="newItem.source"/></div>
</div>
</fieldset>
<input type="submit" class="finish btn-success btn" value="Submit"/>
</form>
and this is my controller
mahalPlus.controller('familyRegistrationController', function($scope) {
$scope.abc = function(event){
event.preventDefault();
alert('submitted');
};
});


The preventDefault is redundant, see the docs. You'll just need to remove the action attribute.
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page) but only if the form does not contain an action attribute.
Instead, add ng-app to the appropriate HTML Element and ensure that your controller is properly loaded.
I've created a working example here, where you can see the changes I've suggested.


1- remove action
2- remove $event from ng-submit="abc($event)"
3- You better think about your using of PHP in your tags , this is not a good Idea:(


Believe you can just remove the action on the form.


Did you add the controller reference to your form tag?
<form id="wizard" class="form-horizontal" ng-submit="abc($event)"
ng-controller="familyRegistrationController">

Related

Pass content of div element to action with asp core 2.0 form

I have an asp core form that transfers data to my "Create" action. I have inputs with "asp-for" attribute to initialize specific columns in my db and i have a "Content" column which i want to initialize by fetching innerText from element. So how can i send innerText at the time when i submit form and to send it all together to the action? And is it possible to create custom asp core tag that would fetch innerText? Thanks.
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="container">
<div class="row" id="preview">
<div id="result">
</div>
<div class="settings">
<label><input type="button" id="myBtn" />Додати кнопку</label>
#Html.Partial("_ModalBoxPartial")
<label><input type="checkbox" checked="checked" id="auto-generate" />Auto-generate</label>
<label><input type="checkbox" checked="checked" id="save-as-practice" />Save for practice</label>
</div>
</div>
<div class="row">
<div class="col-md-12" id="editor-wrapper" style="background-
color:pink;">
</div>
</div>
<div class="col-md-4">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="text" id="" name="module" />
<div class="form-group">
<div class="col-md-10">
<textarea id="translation" name="translation"></textarea>
</div>
</div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="KeyWords" class="control-label"></label>
<input asp-for="KeyWords" class="form-control" />
<span asp-validation-for="KeyWords" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CategoryId" class="control-label"></label>
<select asp-for="CategoryId" class="form-control" asp-items="ViewBag.CategoryId"></select>
</div>
<div class="form-group">
<label asp-for="ShowCaseText" class="control-label"></label>
<input asp-for="ShowCaseText" class="form-control" />
<span asp-validation-for="ShowCaseText" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ExprId" class="control-label"></label>
<select asp-for="ExprId" class="form-control" asp-items="ViewBag.ExprId"></select>
</div>
<div class="form-group">
<label asp-for="Image" class="control-label"></label>
<input asp-for="Image" class="form-control" />
<span asp-validation-for="Image" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" id="submitBtn" />
</div>
</div>
</div>

ASP.NET MVC, and I could say most MVCs frameworks, performs post using HTTP Posts (I know it sounds redundant). It means that it will only post values from enabled input elements. So, from the browser point of view, your div is not different from any other div.
One possible solution is just adding a hidden input with that very same value:
<input asp-for="Foo" class="form-control" type="hidden" />

Bootstrap buttons not responsive

I've tried implementing this snippet into my web page and for some reason the buttons aren't responsive and don't toggle between active/notActive when clicked. It works fine in my jsFiddle, but the same code doesn't work on my web page. I have the proper imports for JQuery and Bootstrap because the rest of my form utilizes tools using these frameworks and are working properly. Any suggestions on what could be going wrong? Here's the fiddle
http://jsfiddle.net/collint25/4pq266cz/. I won't post the JavaScript or CSS just because it'd be copied verbatim from the fiddle.
<div class="form form-horizontal">
<div class="panel panel-success">
<div class="panel-heading">Submitter's Information</div>
<div class="panel-body">
<div class="form-group">
<label for="subName" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="subName" id="subName" value="<?php echo $name ?>" maxlength="50" readonly="readonly" required>
</div>
</div>
<div class="form-group" style="display: none">
<label for="subTitle" class="col-sm-3 control-label">Title:</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="subTitle" id="subTitle" placeholder="Title" value="<?php echo $title ?>" maxlength="50" required>
</div>
</div>
<div class="form-group" style="display: none">
<label for="subDept" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-8">
<input type="text" class="form-control" data-validation="required" name="subDept" id="subDept" placeholder="Department:" value="<?php echo $department ?>" maxlength="20">
</div>
</div>
<div class="form-group" style="display:none;">
<label for="subGUID" class="col-sm-3 control-label">AU Email/GUID:</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="subGUID" id="subGUID" data-validation="email" data-validation-error-msg="You did not enter a valid e-mail" value="<?php echo $wouserid . "#auburn.edu" ?>" maxlength="50">
</div>
</div>
<div class="form-group">
<label for="subPhone" class="col-sm-3 control-label">Phone Number:</label>
<div class="col-sm-8">
<input type="text" class="form-control" data-validation="required" name="subPhone" id="subPhone" placeholder="Phone Number" value="<?php echo $phone ?>" maxlength="20">
</div>
</div>
<div class="form-group">
<label for="subSupervisor" class="col-sm-3 control-label">Are you the Nominee’s Direct Supervisor?</label>
<div class="col-sm-8">
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="happy" data-title="Y">YES</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="happy" data-title="N">NO</a>
</div>
<input type="hidden" name="happy" id="happy">
</div>
</div>
</div>
</div>
</div>
</div>

Hide a form after validation in AngularJs

I am working on a angular form and this is my first experience with Angular Form. I am able to submit the form successfully. But I want to do 2 more things:
Validate the form.
Hide the form if valid and show a div with confirmation.
Right now am able to hide the form using ng-click & ng-hide properties of the form. But I want this hiding to happen based on the validation. I am looking to validate email, by min & max length & required.
The form code:
<form id="signup-form" ng-submit="processForm()" ng-hide="showConfirm" >
<div class="col-md-12"><h4 class="col-md-12" >What do you think?</h4></div>
<div class="form-group col-md-12">
<div class="row">
<div class="radio col-md-6">
<label>
<input type="checkbox" ng-model="formData.option1" >
Option1
</label>
</div>
<div class="radio col-md-6">
<label>
<input type="checkbox" ng-model="formData.option2" >
Option2
</label>
</div>
</div>
</div>
<div class="col-md-12 contact">
<h4 class="col-md-12" >Want us to contact you?</h4>
<div class="form-group">
<div class="textbox col-md-12">
<label>Name </label>
<input type="text" ng-model="formData.name" >
</div>
<div class="textbox col-md-12">
<label>Email </label>
<input type="text" ng-model="formData.email" >
</div>
<div class="textbox col-md-12">
<label>Phone </label>
<input type="text" ng-model="formData.phone" >
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12 ">
<div class="col-md-12 contact">
<button type="submit" class="btn btn-primary" ng-click="showConfirm = ! showConfirm">Submit</button>
</div>
</div>
</div>
</form>
<div class="col-md-12 confirmation" ng-show="showConfirm">
<h2 >Thanks alot for your feedback.</h1>
</div>
The js code:
$scope.processForm = function() {
$http.post('http://localhost/api/node.json', $scope.formData)
.success(function(data) {
$scope.formData = {};
$state.go('main.start');
});
};

Give your form a name and on ng-submit, check the validity of the form with the $valid property.
<form id="signup-form" name="signUpForm" novalidate ng-submit="signUpForm.$valid && processForm()" ng-hide="showConfirm">
Add validation attributes to your inputs. ex:
<input type="text" ng-model="formData.email" required>
Then once the form is submitted, set the showConfirm property to true
Read more about validation here https://docs.angularjs.org/guide/forms and http://www.ng-newsletter.com/posts/validations.html

Something similar to the following should work.
HTML
<form name="signup-form" class="signup-form" novalidate method="post" ng-submit="processForm()" ng-hide="!signup-form.$invalid" ng-show="signup-form.$invalid" >
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control input-lg" name="username" placeholder="Username" ng-model="user.username" ng-required="true">
<label>Email</label>
<input type="email" class="form-control input-lg" name="email" placeholder="Email" ng-model="user.email" ng-maxlength="20" ng-minlength="10" ng-required="true">
</div>
</form>
<div ng-hide="!signup-form.$invalid" ng-show="signup-form.$invalid">
</div>

Why would a button click event cause site to reload in a Bootstrap form?

I'm using jQuery's show() and hide() functions on divs in order to code or simulate different consecutive form sections.
I've made a button that hides a div when it's clicked. What's strange is that once the button is clicked, the page will reload and come back to the div shown at first $(document).ready().
What's even more strange is that this problem mentioned above won't happen if you click in the nav bar text before clicking in the "continuar" button (Then the expected page will appear without reloading and showing the first page again).
The form can be visited here:
http://registropsicologos.maricelaaguilarflores.com:20791
The blue button is the responsible for the page reload problem, unless you click Visualizar at nav bar before clicking in "continuar".
I can't understand why this is happening, I've used .show() and .hide() before and this problem wasn't happening.
Here's the relevant JavaScript code:
$(document).ready(function () {
mostrarFormularioRegistro()
$(".btnSeccion").click(function() {
btnMostrarSeccion($(this))
})
})
function mostrarFormularioRegistro () {
$("#formularioRegistro").show()
mostrarSeccion(1)
$("#DB").hide()
}
function mostrarSeccion (seccion) {
for (var i = 1; i <4; i++) {
if (i===seccion)
$("#seccionRegistro"+i).show()
else
$("#seccionRegistro"+i).hide()
}
}
function btnMostrarSeccion (idBtnSeccion) {
var seccion = parseInt(idBtnSeccion.attr("id").slice(-1))
if (seccion == 3)
mostrarSeccion(1)
else
mostrarSeccion(seccion+1)
}
This is the body markup:
<body>
<div class="container" id="proyecto">
<ul class="nav nav-tabs">
<li class="active">Registrar</li>
<li>Visualizar</li>
</ul>
</div>
<div id="formulario">
<div class="container" id="seccionRegistro1">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputNombre" class="col-sm-2 control-label">Nombre(s)</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputNombre" placeholder="Nombre(s)">
</div>
</div>
<div class="form-group">
<label for="inputApellidos" class="col-sm-2 control-label">Apellidos</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputApellidos" placeholder="Apellidos">
</div>
</div>
<div class="form-group">
<label for="inputEdad" class="col-sm-2 control-label">Edad</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEdad" placeholder="Apellidos">
</div>
</div>
<div class="form-group">
<label for="inputTel" class="col-sm-2 control-label">Teléfono</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputTel" placeholder="Teléfono">
</div>
</div>
<div class="form-group">
<label for="inputCel" class="col-sm-2 control-label">Celular</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputCel" placeholder="Celular">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary btnSeccion" id="btnSeccion1">Continuar</button>
</div>
</form>
</div>
<div class="container" id="seccionRegistro2">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEscolaridad" class="col-sm-2 control-label">Escolaridad</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEscolaridad" placeholder="Escolaridad">
</div>
</div>
<div class="form-group">
<label for="inputAlmaMater" class="col-sm-2 control-label">Egresado de</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputAlmaMater" placeholder="Egresado de">
</div>
</div>
<div class="form-group">
<label for="inputAñoEgreso" class="col-sm-2 control-label">Año de egreso</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputAñoEgreso" placeholder="Año de egreso">
</div>
</div>
<div class="form-group">
<label for="inputCedula" class="col-sm-2 control-label">Cédula Profesional</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputCedula" placeholder="Cédula Profesional">
</div>
</div>
<div class="form-group">
<label for="checkPosgrado" class="col-sm-2 control-label">Estudios de Posgrado</label>
<div class="col-sm-1">
<div class="checkbox">
<label>
<input type="checkbox"> Sí
</label>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado1">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado2">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado3">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="inputCedula" class="col-sm-2 control-label">Cédula Profesional</label>
<div class="col-sm-10">
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoClinica" value="option1"> Clínica
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoSocial" value="option1"> Social
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoLaboral" value="option1"> Laboral
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Educativa
</label>
</div>
</div>
<div class="form-group">
<label for="inputTrabajo" class="col-sm-2 control-label">Institución de trabajo</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputTrabajo" placeholder="Institución de trabajo">
</div>
</div>
<div class="form-group">
<label for="trabajoIndependiente" class="col-sm-2 control-label">Desarrollo Profesional Independiente</label>
<div class="col-sm-1">
<div class="checkbox">
<label>
<input type="checkbox" id="trabajoIndependiente"> Sí
</label>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" placeholder="Actividad independiente" id="inputActividadIndependiente1" disabled="true">
</div>
<div class="col-xs-6">
<input type="text" class="form-control" placeholder="Actividad independiente" id="inputActividadIndependiente2" disabled="true">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="checkPosgrado" class="col-sm-2 control-label">Actividades de trabajo no relacionadas con la psicología</label>
<div class="col-sm-1">
<div class="checkbox">
<label>
<input type="checkbox" id="actividadesAjenasPsicologia"> Sí
</label>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" placeholder="Actividad" id="actividadNoPsicologia1" disabled="true">
</div>
<div class="col-xs-6">
<input type="text" class="form-control" placeholder="Actividad" id="actividadNoPsicologia2" disabled="true">
</div>
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary btnSeccion" id="btnSeccion2">Continuar</button>
</div>
</form>
</div>
<div class="container" id="seccionRegistro3">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="actividadesInteres" class="col-sm-2 control-label">Actvidades profesionales en las que le gustaría participar</label>
<div class="col-sm-10">
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoClinica" value="option1"> Conferencias y encuentros
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoSocial" value="option1"> Cursos
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoLaboral" value="option1"> Talleres
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Diplomados
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Maestría
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Doctorado
</label>
</div>
</div>
<div class="form-group">
<label for="capacitacionInteres" class="col-sm-2 control-label">Areas de la psicología en las que le gustaría capacitarse</label>
<div class="col-sm-10">
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoClinica" value="Clínica"> Clínica
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoSocial" value="Social"> Social
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoLaboral" value="Laboral"> Laboral
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoEducativa" value="Educativa"> Educativa
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inputAreaTrabajoEducativa" value="Todas"> Todas
</label>
</div>
</div>
<div class="form-group">
<label for="inputNombre" class="col-sm-2 control-label">¿Alguna temática en particular que le gustaría conocer o capacitarse?</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputInteresCapacitacion" placeholder="Temática de interés">
</div>
</div>
<div class="form-group">
<label for="checkPosgrado" class="col-sm-2 control-label">¿Pertenece a alguna agrupación relacionada con el campo de la psicología?</label>
<div class="col-sm-1">
<div class="checkbox">
<label>
<input type="checkbox" id="actividadesAjenasPsicologia"> Sí
</label>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" placeholder="Actividad" id="Agrupación" disabled="true">
</div>
<div class="col-xs-6">
<input type="text" class="form-control" placeholder="Actividad" id="Agrupación" disabled="true">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="checkPosgrado" class="col-sm-2 control-label">¿Ha participado con anterioridad en algún evento de la Asociación de Psicólogos de Tuxtepec?</label>
<div class="col-sm-1">
<div class="checkbox">
<label>
<input type="checkbox" id="participacionEventos"> Sí
</label>
</div>
</div>
<div class="col-sm-8">
<select multiple class="form-control" id="eventosAsistidos">
<option value="abrazoterapia">Abrazoterapia</option>
<option value="tallerMujeres">Taller autoestima mujeres</option>
</select>
</div>
</div>
<p class="bg-success">
¿Le gustaría pertenecer como miembro activo de la Asociación de Psicólogos de Tuxtepec, A.C. "Manos Unidas por un vivir más pleno?"
<label>
<input type="checkbox" id="idInteresMiembro"><strong>Sí</strong>
</label>
</p>
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary btnSeccion" id="btnSeccion3">Continuar</button>
</div>
</form>
</div>
</div>
</body>

A <button> tag uses Submit behavior by default. Thus your page submits the form when the button is clicked and this looks like a page refresh itself. To work around this you can either use an input tag
<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion3" value="Continuar"/>
to do the same effect. Or you can cancel the Submit in your button's click Event Handler (if that's what you want) like this:
$(".btnSeccion").click(function(event) {
btnMostrarSeccion($(this));
event.preventDefault();
})

The simplest solution is just adding a simple attribute of "type" to the button element, like so:
<button type="button" class="btn btn-default" onclick="...">My Button</button>
When indicating that the button element is specifically from the type=button, it will stop acting like a submit button and will not submit (thus, refresh) the current page.

I have face this issue many times.
Whether using angular, bootstrap or any other js plugin
sometime it works perfectly on desktop browser but fails to serve the purpose on mobile browsers or touch screen smartphones.
As button tags has a submit behavior by default.
Simplest solution is to use type="button"
This will solve the problem otherwise use js to stop submitting of the page.

The following code (from a bootstrap template) can't be changed to an <input> tag though. It has the same problem, when running on chrome as Samsung S4 and when running on my actual Samsung S5. Clicking the button to expand the menu causes the page to post-back. I'm not sure if this would also occur on other browsers and models but suspect it would.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
I fixed this by simply adding onclick="return false;" into the button tag.

The thing is the elements such as <button> has default action of submit, if you want to make them act like normal button specify type="button" the default is type="submit"

when I changed <button> to <input> page stopped reloading.

Without jquery (inspired by Sreenath H B):
Setting up clicklistener:
submitButton.addEventListener("click", onSubmitClicked);
Preventing reload:
function onSubmitClicked(event){
event.preventDefault();
// Your code
}

I tried using type="button" and also setting onclick to return false. This works in most browser and on most platforms, but fails in f.x. iPad Air 2 and also Edge sometimes.
Simplest solutions that worked for me is to either use the button outside the form so its not affected by it, or use input with type=button.
button even seems to ignore onsubmit="return false" on the form too.
This is a very anoying and hard to reproduce error. It works on most things, but all of a sudden breaks on one specific browser/platform combination.

Rails Gem Client Side Validations html struct

My project use Twitter Bootstrap CSS Framework,so my html like this.
<div class="control-group ">
<label class="control-label" for="user_name">Username</label>
<div class="controls">
<input data-validate="true" id="user_name" name="user[name]" size="30" type="text">
</div>
</div>
When validate failed, Client Side Validation change it to:
<div class="control-group ">
<div class="field_with_errors">
<label class="control-label" for="user_name">Username</label>
</div>
<div class="controls">
<div class="field_with_errors">
<input data-validate="true" id="user_name" name="user[name]" size="30" type="text">
<label for="user_name" class="message">Please input Username</label>
</div>
</div>
</div>
But I want to user Bootstrap Form validation Css:
The html is:
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
</div>
How to do?

try this gem: realtime validations

Categories

Resources