We Keep Coding

Multistep form validate steps & display error messages

I have multiple step form to submit project details divided into three sections which is #account_information, #personal_information & #project_information. I'm facing two issues with this approach:
1- If there is an error in validate the section I can not see the field highlighted in red Also not message display below that field.
2- input file field even if you select a file it will still display an error which not allow me to move into next step ?
$(document).ready(function (){
let multiStepsArea = ['#account_information', '#personal_information', '#project_information']
let currentNum = 0;
$('.next').click(function(){
var form = $("#AddProjectForm");
form.validate({
rules: {
stay_address_field: {
required: true,
},
},
messages: {
stay_address_field: {
required: "يجب تحديد مكان الإقامة",
},
}
});
if (form.valid() == true){
if(currentNum === 0) {
current_fs = $(multiStepsArea[currentNum]);
currentNum++;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}else if(currentNum === 1) {
current_fs = $(multiStepsArea[currentNum]);
currentNum++;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}
}
});
$('.previous').click(function(){
if(currentNum === 1) {
current_fs = $(multiStepsArea[currentNum]);
currentNum--;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}else if(currentNum === 2) {
current_fs = $(multiStepsArea[currentNum]);
currentNum--;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}
});
});
<form action="{{ route('StoreProjectUser') }}" id="AddProjectForm" method="POST" enctype="multipart/form-data">
#csrf
<section class="target_box">
<fieldset id="account_information" class="">
<div id="div1" class="target">
<h4 class="mt-3">أولاً: السيرة الذاتية باللغة العربية وتشمل على:</h4>
<h6 class="mt-3">1- بيانات المشارك الشخصية</h6>
<div class="form-group mt-3">
<label class="form-label">الجنس <span class="text-danger">*</span></label>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radiobtn" id="maleRadiobtn" value="M" checked>
<label class="form-check-label" for="maleRadiobtn">
ذكر
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radiobtn" id="femaleRadiobtn" value="F">
<label class="form-check-label" for="femaleRadiobtn">
أنثى
</label>
</div>
#error('Radiobtn')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="stay_address_field" class="form-label">مكان الإقامة <span class="text-danger">*</span></label>
<input type="text" name="stay_address_field" id="stay_address_field" class="form-control" placeholder="" value="{{old('stay_address_field')}}" required />
#error('stay_address_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="civil_id_image_field" class="form-label">صورة واضحة وملونة للبطاقة المدنية <span class="text-danger">*</span></label>
<input type="file" name="civil_id_image_field" id="civil_id_image_field" class="form-control" placeholder="" accept=".png, .jpg, .jpeg" required />
#error('civil_id_image_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<div class="hstack gap-2 justify-content-end">
<a class="btn btn-light Single next" target="2">التالي</a>
</div>
</div>
</div>
</fieldset>
<fieldset id="personal_information" class="">
<div id="div2" class="target">
<h4 class="mt-3">أولاً: السيرة الذاتية باللغة العربية وتشمل على:</h4>
<h6 class="mt-3">2- بيانات المشارك الميدانية</h6>
<div class="row mt-3">
<label for="participate_category_field" class="form-label">فئة المشارك <span class="text-danger">*</span></label>
<select class="form-select" aria-label="Default select example" name="participate_category_field" id="participate_category_field" required >
<option selected disabled>--حدد فئة المشارك--</option>
<option value="1">طالب</option>
<option value="2">معلم</option>
<option value="3">موظف</option>
<option value="4">إشرافي</option>
<option value="5">ولي أمر</option>
<option value="6">تربوي متقاعد</option>
<option value="7">غير ذلك</option>
</select>
#error('participate_category_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="governorate_field" class="form-label">المحافظة <span class="text-danger">*</span></label>
<input type="text" name="governorate_field" id="governorate_field" class="form-control" placeholder="" value="{{old('governorate_field')}}" required />
#error('governorate_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="certificate_concern_field" class="form-label">صورة واضحة بنوع لشهادة تزكية من مدير المدرسة / مدير المؤسسة <span class="text-danger">*</span></label>
<input type="file" name="certificate_concern_field" id="certificate_concern_field" class="form-control" placeholder="" accept=".png, .jpg, .jpeg" required />
#error('certificate_concern_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<div class="hstack gap-2 justify-content-end">
<a class="btn btn-light Single previous" target="1">تراجع</a>
<a class="btn btn-light Single next" target="3">التالي</a>
</div>
</div>
</div>
</fieldset>
<fieldset id="project_information" class="">
<div id="div3" class="target">
<h4 class="mt-3">ثانياً: الملف الإنجازي باللغة العربية ويشمل على:</h4>
<h6 class="mt-3">بيانات المشروع وتشمل التالي:</h6>
<div class="row mt-3">
<label for="project_title_field" class="form-label">اسم المشروع <span class="text-danger">*</span></label>
<input type="text" name="project_title_field" id="project_title_field" class="form-control" placeholder="" value="{{old('project_title_field')}}" required />
#error('project_title_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="project_shorts_field" class="form-label">وصف مختصر للمشروع</label>
<input type="text" name="project_shorts_field" id="project_shorts_field" class="form-control" placeholder="" value="{{old('project_shorts_field')}}" required />
#error('project_shorts_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<label for="project_images_field" class="form-label">ملف صوري بنوع ( jpg, png ) يصف المشروع ب 10 صور كبيرة قياس ( 1070*1600 ) ملونة وواضحة. <span class="text-danger">*</span></label>
<input type="file" name="project_images_field[]" id="project_images_field" class="form-control" placeholder="" multiple required />
#error('project_images_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="form-check mt-3 text-right">
<input type="checkbox" name="accept_terms_field" id="accept_terms_field" class="form-check-input" required />
<label for="accept_terms_field" class="form-check-label float-right">أقر بأن جميع البيانات أعلاه صحيحة وأنني صاحب المشروع وتعود ملكيته لي وأتعهد بأن أقدم كافة الوثائق المطلوبة مني من قبل إدارة المشروع كما أقر بموافقتي على نشر مشروعي في وسائل الإعلام الحديثة ووسائل التواصل الإجتماعي.</label>
#error('accept_terms_field')
<span class="text-danger"> {{ $message }} </span>
#enderror()
</div>
<div class="row mt-3">
<div class="hstack gap-2 justify-content-end">
<a class="btn btn-light Single previous" target="2">تراجع</a>
<!--إلغاء-->
<button type="submit" class="btn btn-success" id="add-btn">إرسال</button>
</div>
</div>
</div>
</fieldset>
</section>
</form>

Combine two field in email field

laravel
I'm struggling to put the result of two concatme fields in another field input.
I would like to put the results of response in the email field input.
The thing I would like to achieve is to make it easier for the user to log in to the system without putting the whole email address john#box.domain.com.
here is the code so far.
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
#include('auth/banner')
<div class="panel panel-default panel-shaded">
<div class="panel-body">
#action('login_form.before')
<form class="form-horizontal margin-top" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">{{ __('Email Address') }}</label>
<div class="col-md-6">
<!-- SCRIPT -->
<script type="text/javascript">
function concatme()
{
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
document.getElementById("response").innerText = num1 + '' +num2;
}
</script>
<!-- FIN SCRIPT -->
<!---- INICIO---->
<input type="text" name="num1" class="form-control" id="num1" placeholder="USER">
<input type="text" name="num2" class="form-control" id="num2" value="#box.domain.com" placeholder="Number 2">
<!---FIN-->
<!-- RESUTLADO PREVIEW -->
<p id="response"></p>
<!-- RESULDADO PREVIEW -->
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>
#if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="password" class="col-md-4 control-label">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="password" required>
#if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<label class="checkbox">
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> {{ __('Remember Me') }}
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" onclick="concatme()" class="btn btn-primary">
{{ __('Login') }}
</button>
#if (Eventy::filter('auth.password_reset_available', true))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</div>
</form>
<p>Hola</p>
#action('login_form.after')
</div>
</div>
</div>
</div>
</div>
#endsection

I think its working but you are not able to see it because you have use form and called javascript function on submit button.
What happens is its sending request to given route and refreshing page thats make paragraph tag to empty again. Remove type submit from submit button and then confirm if its working or not.

How to automatically submit form when input is inserted?

I want to auto submit my form when value is inserted in the "Thumb_Print_Code" Field. below is my form. I want to do this without clicking on save nutton
Im working on Php Laravel Framework.
<form method="POST" action="{{ route('added') }}" id="myform">
#csrf
<div class="form-group row">
<label for="Thumb_Print_Code" class="col-md-4 col-form-label text-md-right">{{ __('Thumb Print Code') }}</label>
<div class="col-md-6">
<input id="Thumb_Print_Code" type="int" class="form-control #error('Thumb_Print_Code') is-invalid #enderror" name="Thumb_Print_Code" value="{{ old('Thumb_Print_Code') }}" required autocomplete="Thumb_Print_Code">
#error('Thumb_Print_Code')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Save Attendance ') }}
</button>
</div>
</div>
<br>
</div>
</form>
Please let me know how can I achieve my end goals ?

Custom social media site posting process not posting to user's profile

I'm working on a social media site for a client that was built by another company. Currently I'm working on the posting system where users can post. The original code had it where users had to go through 3 steps first then hit the button to post. The client wanted to remove the steps and just have it setup similar to facebook. I moved the code around and removed the steps but the "Post" button doesn't work now. When I click on it, it just says "Posting" and doesn't do anything else.
If you go to seegossip.com and sign up as a user and login, click on the orange smileys icon in the top right, it will bring up the posting popup.
Below is the original posting process code:
<div class="popup close">
<div class="left">
<div class="sectionn1 follow" id="box1">
<div class="popup-heading">Follow the steps and start gossiping!</div>
<div class="follow2">*Tip: you can do all three on the same Post! </div>
<div class="type">
</div>
<div class="get">
<button type="button" onClick="openpopup(2)">Get Started!</button>
</div>
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="popupclose-c">Cancel</div>
</a>
</div>
</div>
<div class="sectionn1" id="box2" align="center">
<div class="popup-heading">Step1: Type away!</div>
<div class="user-post-main">
<div class="add-pics">
<div class="user-post"> <br clear="all" />
<form id="post" id="form" name="form" action="" method="post">
<div class="user-post-middle">
<div class="post-area">
<input type="text" placeholder="Type your post's Title here" class="input" name="postname" id="postname"/>
<span class='status'></span>
</div>
<div class="post-area">
<textarea placeholder="Type your post's here" class="textarea" rows="5" name="posttext" id="posttext"/></textarea>
<span class='status'></span>
</div>
<div class="post-area">
<input type="text" placeholder="Enter a Custom URL Here" class="input" name="posturl" id="posturl"/>
<span class='status'></span>
</div>
<br clear="all" />
</div>
</form>
<div class="red">
<div>
<div id="dropzone" class="drop">
<form action="upload/" class="dropzone" id="my-dropzone">
<input type="hidden" name="postid" value="<?php echo $_REQUEST['post_id'];?>">
<input type="hidden" name="userid" value="<?php echo $_SESSION['sguser_id'];?>">
</form>
</div>
<div id="dropzone1" class="dropzone zone"> </div>
</div><br clear="all" />
<!--<button type="button" onclick="openpopup(4)" >Lets Add Some Videos! ></button>-->
</div>
</div>
<div class="green">
<div>
<div id="dropzone" class="drop">
<form action="upload/" class="dropzone" id="my-dropzone2">
</form>
</div>
<div id="dropzone2" class="dropzone zone"></div>
</div><br clear="all" />
<div class="some">
<div class="button"><button type="button" name="create_new_post" id="create_new_post" >Post</button></div>
</div>
</div>
</div>
</div>
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
</div>
</div>
<!----------------------popup3---------------------------->
<div class="sectionn1" id="box3" align="center">
<div class="popup-heading"> Step2: Let's Add Some Pics!</div>
<span style="font-style:italic; font-size:16px;">No Picture? No Problem Simply Continue to the Next Step! </span><br clear="all" />
<div class="user-post-main">
<div class="user-post1">
<div class="user-post">
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
<div class="right-icn">
<div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>
<div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>
<div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>
</div>
</div>
</div>
<!-------------------------------popup-4--------------------->
<style>
.dz-default.dz-message {
background-size:100px !important;
}
</style>
<div class="sectionn1" id="box4" align="center">
<div class="popup-heading">Step3: Let's Add Some Videos!</div>
No Videos? No Problem Simply click on POST!<br clear="all" /><br />
<div class="user-post-main">
<div class="user-post1">
<div class="user-post">
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
<div class="right-icn">
<div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>
<div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>
<div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>
</div>
</div>
</div>
</div>
<!--------------------------popup-->
And here's the new code for the posting process:
<div class="popup close">
<div class="sectionn1 follow" id="box1">
<div class="user-post">
<!-- UPLOAD PICS -->
<div class="popupclose">
<a class="new_post_close">
<div class="close-c">
</div></a>
</div>
<div class="drop" id="dropzone">
<form action="upload/" class="dropzone" id="my-dropzone" name="my-dropzone">
<input name="postid" type="hidden" value="<?php echo $_REQUEST['post_id'];?>"> <input name="userid" type="hidden" value="<?php echo $_SESSION['sguser_id'];?>">
</form>
<p>Add Photo(s)</p>
</div>
<div class="dropzone zone" id="dropzone1">
</div>
<!-- UPLOAD VIDEOs -->
<div class="drop" id="dropzone">
<form action="upload/" class="dropzone" id="my-dropzone2" name="my-dropzone2">
</form>
<p>Add Video</p>
</div>
<div class="dropzone zone" id="dropzone2">
</div>
</div>
<!-- POST AREA -->
<form action="" id="post" method="post" name="form">
<textarea class="textarea" id="posttext" name="posttext" placeholder="What's on your mind, today?" rows="5"></textarea>
</form>
<div class="bottom-buttons">
<div class="button">
<button id="create_new_post" name="create_new_post" type="button">
<p>Post</p></button>
</div>
</div>
</div>
</div>
Below is the script for the popup where I think the error is.
$(document).on('click','a#opennewpostpopup',function(data){
if($('.popup').hasClass('close')) {
postpopup(0);
openpopup(1);
}
});
$(document).on('click','.openpostpopup',function(data){
postpopup(5,this);
});
function openpopup(p){
if(p){
$('.glass, .popupglass').fadeIn();
$('.popup').removeClass('close');
$('.sectionn1').removeClass('active');
$('#box'+p).addClass('active');
$('body').addClass('short_page');
if(p==3) $('#my-dropzone .dz-default span').html('Drag and Drop your pictures here!')
if(p==4) $('#my-dropzone2 .dz-default span').html('Drag and Drop your Videos here,');
}
else {
$('.glass , .popupglass').fadeOut();
$('.popup').addClass('close');
$('body').removeClass('short_page');
$('.sectionn1').removeClass('active');
$('#post .post-area .input,#post .post-area .textarea').each(function(){ $(this).val(''); });
$('span.status').removeClass('success').removeClass('error');
$('.dz-preview').remove();
$('[name=post_id]').remove();
}
}
function createPostId(popup){
id = $('input[name=post_id]').val();
if(typeof cnprpost == 'undefined' && !id){
cnprpost = $.post("ajax.php",{action:'createPost',posttext:$('#posttext').val()},function(data){
$('#my-dropzone, #my-dropzone2').not(':has(input[name=post_id])').prepend('<input type="hidden" name="post_id" value="'+data+'">');
openpopup(popup);
delete cnprpost;
});
}else openpopup(popup);
}
$('.new_post_close').on('click',function(data){
id=$('form.dropzone [name=post_id]').val();
if(id) {
var conf=confirm("Your Post is Not Published\nClick Cancel to Continue or\nClick OK to Cancel\nYour Uploads will remove if you Click Ok");
if(conf){
openpopup(0);
$.post("ajax.php",{action:"deletepost",post_id:id},function(data){
});
}
}else openpopup(0);
});
$('#create_new_post').on('click',function(){
post_id=$('[name=post_id]').val();
postTitle = $('#post input[name=postname]').val();
postContent = $('#post textarea[name=posttext]').val();
postUrl = $('#post input[name=posturl]').val();
dis=this;
$(dis).html('Posting...');
if(typeof pprpost == 'undefined' && post_id )
pprpost =$.post("ajax.php",{action:'publishpost',post_id:post_id,posttitle:postTitle,posttext:postContent,posturl:postUrl},function(data){
if(data==1) { openpopup(0); }
else { $(dis).html('Try Again...'); }
delete pprpost
});
});
window.onbeforeunload = function() {
id=$('[name=post_id]').val();
if(!$('.popup').hasClass('close') && id){
return "Your Post is Not Published\nClick Cancel to Continue or\nClick OK to Cancel\nYour Uploads will remove if you Click Ok";
$.post("ajax.php",{action:"deletepost",post_id:id},function(data){ });
}
}
This is a little advanced for me and I've been stuck on this site for a couple weeks trying to figure out what the problem is so please help.

JQuery .click function only works after second click if I close a modal

i have a page where I have two buttons, one that opens a modal, and another one that only submits.
I have a .click event on the second button. If i go on the page and click the second button the click event goes fine, BUT if i first open the modal, close it and then i hit the second button, the first time does nothing and the second time it fires the .click event.
I would like to always fire the click event.
this is my code
$(document).ready(function(){
var focusout = false;
$(".prueba").click(function () {
if (focusout == false) {
focusout = true;
return;
}
});
var validator =$('#form1').validate(
{
ignore: "",
rules: {
parametros: {
required: function() { return focusout == true; },
},
terminos: {
required: function() { return focusout == true; },
}
},
highlight: function(element) {
$(element).closest('.grupo').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.grupo').removeClass('has-error');
}
});
$(".cancel").click(function() {
validator.resetForm();
});
}); // end document.ready
button 1:
<button type="submit" class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>
button 2:
<button type="submit" class="btn btn-primary prueba" name="buscar">Buscar</button>
full form:
<form action="" method="post" id="form1" enctype="multipart/form-data">
<p>
<button type="submit" class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>
<button type="submit" class="btn btn-primary" name="carga_masiva"><i class="icon-arrow-up"></i> Carga Masiva</button>
</p>
<br>
<div class="col-lg-1 grupo">
</div>
<div class="col-lg-10 grupo">
<div class="panel panel-default pagination-centered">
<div class="panel-heading">Búsqueda en Catálogo</div>
<div class="panel-body">
<div class="form-group ">
<div class="col-lg-6 grupo">
<input type="text" class="form-control " id="terminos" name="terminos" placeholder="Términos de búsqueda">
</div>
<div class="col-lg-6 grupo">
<select id="e1" name="parametros" style=" width:80%">
<option></option>
<option value="1" >Autor</option>
<option value="2" >Título</option>
</select>
</div>
</div>
<br> <br>
<div style="text-align:center">
<button type="submit" class="btn btn-primary prueba" name="buscar">Buscar</button>
</div>
</div>
</div>
</div>
<div class="col-lg-1 grupo">
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" name="myModal" data-backdrop="static" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-wide">
<div class="modal-content">
<div class="modal-header">
<button type="submit" class="close cancel" data-dismiss="modal" aria-hidden="true">×</button>
{if isset($smarty.post.nueva_articulo) }
<h4 class="modal-title">Nueva Articulo</h4>
{/if} </div>
<div class="modal-body">
{if isset($smarty.post.nueva_articulo) }
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_titulo" class="control-label">Título</label>
<input type="text" class="form-control input-sm" name="art_titulo">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_enlace" class="control-label">Enlace</label>
<input type="text" class="form-control input-sm" name="art_enlace">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="aut_id" class="control-label">Autor(es)</label>
<input type='hidden' id='e13' name="autores" style='width:100%'/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_contenido" class="control-label">Contenido</label>
<textarea class="form-control input-sm" name="art_contenido" rows="5" ></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="etiquetas" class="control-label">Etiquetas</label>
<input type="text" id="e12" name="etiquetas" style="width:100%">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="foto" class="control-label">Imagen</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Buscar… <input type="file" name="foto">
</span>
</span>
<input type="text" class="form-control" name="nombre" readonly="">
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<div class="checkbox">
<label>
<input type="checkbox" name="rating" value="si"> Habilitar Rating y Reviews
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="redes" value="si"> Habilitar Compatir en Redes Sociales
</label>
</div>
</div>
</div>
{/if}
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default cancel" data-dismiss="modal" name="cerrar">Cerrar</button>
{if isset($smarty.post.nueva_articulo) }
<button type="submit" class="btn btn-primary" name="insertar_articulo">Guardar Cambios</button>
{/if}
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
<!-- /.modal -->
</form>

They are both of type submit. You should only have 1 submit button on a form
Button 1 could just be a button
<button class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>

If you want, you can create a Form Object in javascript and generate it dynamically. That will do that you don't need to depend of the submit and forms, just fill the form object with the inputs that you want programatically (that even accept files or images).
But anyway, it seems that you have more than one click events on the same button if the one you want is triggering at the second attempt. You could try to play with event.preventDefault or $.unbind.
As you said taht you need to submit the inputs of the modal, try to place the content of the modal inside the tag and remove the submit type of one of the buttons.