How to serialize all data in html form - javascript

I am doing routine form submission in html and for some reason this time it is not working at all.
I have put together quick fiddle ( https://jsfiddle.net/qrfoanh2/ ) :
$(document).ready(function () {
$('#formy').on('submit', function(e) {
e.preventDefault();
var data = $('#formy').serialize();
$(".miejsce").html(data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formy">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">Reset zegara odblokowania dni</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">Edycja dni subskrypcji</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary" onclick="action();"> - GO : GO - </button>
</div>
</div>
</form>
<div class="miejsce" style="background:#ddd;width:100%;height:200px;"></div>
I would like to serialize form data, but for some reason i only get radio box information and never data from text input field with email. Please help

Give your input[type="email"] tag a name attribute. Form inputs are referenced by name in the request when the form is submitted.
<input type="email" name="email" class="form-control" id="inputEmail3" placeholder="Email">
I updated the fiddle you have posted.

Related

Why jQuery steps not changing the section

I was trying to make a multi-step form using jQuery steps. I have tried taking some code from the actual documentation but don't know why their web page isn't showing the code snippets. I tried taking the code from one tutorial blog but it is not working as I have expected. The section is not changing I am new to jQuery and never used steps I am not getting where I am going wrong.
Code :
<form id="example-form" action="#" class="tab-wizard wizard-circle wizard clearfix">
<h6>Account</h6>
<section>
<br/>
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<div class="form-group">
<label for="userName-2">User name </label>
<input id="userName-2" name="userName" type="text" value="Les" class="form-control ">
</div>
<div class="form-group">
<label for="password-2">Password</label>
<input id="password-2" name="password" value ="password" type="text" class=" form-control">
</div>
<div class="form-group">
<label for="confirm-2">Confirm Password</label>
<input id="confirm-2" name="confirm" type="text" value="password" class=" form-control">
</div>
</div>
</div>
</section>
<h6>Profile</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="address-2">Address</label>
<input id="address-2" name="address" type="text" class="form-control">
</div>
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
</div>
</div>
</section>
<h6>Warning</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="form-group">
<label>This is the question that is being asked to the user?</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" >
Option three. This is just a demo.
</label>
</div>
</div></div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
</div>
</section>
<h6>Finish</h6>
<section>
<input id="acceptTerms-2" name="acceptTerms" type="checkbox" class=""> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label>
</section>
</form>
Js code:
var form = $("#example-form");
form.steps({
headerTag: "h6",
bodyTag: "section",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#'
});
Apologies for the long code here, I tried making codesandbox of the example but I can't able to find the CDN for steps.css and also the CDN for steps.js was not working there.

Send dropzone along with other data from form without specifying every single input field

I am using dropzone to send attachments in a form. My issue was that dropzone was its own form so I searched a bit and found how to use dropzone with an existing html form and send everything in one post request.
The issue is that the solution I have now needs me to specify every single input field there is in the form. Is there a way to just post the entire form in my js code?
I have a lot of input fields and it must be possible to just send the entire form with the attachments appended to it instead of appending every input field to the dropzone post.
JS:
Dropzone.options.myDropzone= {
url: 'upload.php',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submitschade").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
//Example fields, not from my actual form:
formData.append("firstname", jQuery("#firstname").val());
formData.append("lastname", jQuery("#lastname").val());
});
}
}
My form:
<form class="" enctype="multipart/form-data" action="/" method="post">
<div class="form-group row">
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Datum & tijdstip schade</label>
<input class="form-control" type="datetime-local">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Locatie aanrijding</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-12">
<label for="example-text-input" class="col-form-label formlabel">Andere materiele schade dan voertuig(en)</label>
<select class="form-control">
<option selected disabled>Maak keuze</option>
<option>Nee</option>
<option>Ja</option>
</select>
</div>
</div>
<h2 class="mb-3">Bestuurder</h2>
<div class="form-group row">
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Voornaam</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Achternaam</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Straatnaam en huisnummer</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Postcode</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Woonplaats</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Telefoonnummer</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Rijbewijsnummer</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Rijbewijs type</label>
<br>
<label for="example-text-input" class="col-form-label formlabel">A</label>
<input type="checkbox" value="A">
<label for="example-text-input" class="col-form-label formlabel">B</label>
<input type="checkbox" value="B">
<label for="example-text-input" class="col-form-label formlabel">C</label>
<input type="checkbox" value="C">
<label for="example-text-input" class="col-form-label formlabel">D</label>
<input type="checkbox" value="D">
<label for="example-text-input" class="col-form-label formlabel">E</label>
<input type="checkbox" value="E">
</div>
</div>
<h2 class="mb-3">Voertuig</h2>
<div class="form-group row">
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Merk / Type</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Kenteken</label>
<input class="form-control" type="text">
</div>
</div>
<h2 class="mb-3">Bijlages</h2>
<div class="form-group row">
<div class="col-sm-12">
<div class="dropzone" id="myDropzone">
<div class="fallback">
<input name="file" type="file" multiple="multiple">
</div>
<div class="dz-message needsclick">
<div class="mb-3">
<i class="display-4 text-muted mdi mdi-cloud-upload"></i>
</div>
<h4>Sleep je bestanden of klik hier om bestanden bij te voegen</h4>
</div>
</div>
</div>
</div>
<div class="text-center mt-3">
<input type="submit" name="submitschade" id="submitschade" value="Schadeformulier verzenden">
</div>
</form>

Form not submit while change checkbox in php

In this code, what happens when I change checkbox value (i.e. If I click on credit card checkbox) then <div class="creditcard"> shows, and if I click on paypal then <div class="paypal"> shows.
Now, when I choose credit card and then click on submit button, then form does not submit. And if I check paypal checkbox and click submit button then nothing happen again. I don't understand why.
How can I submit form whether I choose credit card checkbox or paypal?
$(document).ready(function() {
$('input.payment').on('change', function() {
$('input.payment').not(this).prop('checked', false);
});
$("#credit").click(function() {
if ($(this).is(":checked")) {
$(".creditcard").show();
$(".paypal").hide();
} else {
$(".creditcard").hide();
$(".paypal").show();
}
});
$("#paypal").click(function() {
if ($(this).is(":checked")) {
$(".paypal").show();
$(".creditcard").hide();
} else {
$(".paypal").hide();
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input type="checkbox" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="checkbox" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" required value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" required/>
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
You should be using radio buttons instead of checkboxes. I cleaned up your code also to use one event handler.
I also updated so the appropriate fields are dynamically set as required.
$(document).ready(function() {
$('input.payment').on('change', function() {
$("input[name='cardNumber']").prop("required",false);
$("input[name='paypal_email']").prop("required",false);
$(".creditcard").hide();
$(".paypal").hide();
if($(this).val() == "PayPal"){
$(".paypal").show();
$("input[name='paypal_email']").prop("required",true);
}
else{
$("input[name='cardNumber']").prop("required",true);
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input checked type="radio" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="radio" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" />
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>

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" />

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.

Categories

Resources