I am working on a machine learning app with Django and I have to pass the data that I wont to use in the model to a views function using ajax and Jquery but the function didn't get called at all so whenever I submit the form is show nothing I've try many solution but didn't work
ps: I am still a beginner in JS
here is the views function:
def Iris_classify(request):
print('called1')
if request.POST.get('action') =='post':
print('caled2')
sepal_length = float(request.POST.get('sepal_lenght'))
sepal_width = float(request.POST.get('sepal_width'))
petal_length = float(request.POST.get('petal_lenght'))
petal_width = float(request.POST.get('petal_width'))
model = pd.read_pickle(r"C:\Users\zakaria\Django\DataProject\Data_science\machinlearning\classifier_model.pickl")
prediction_features=[sepal_length,sepal_width,petal_length,petal_width]
result = model.predict([prediction_features])
classification = result[0]
print(classification)
return JsonResponse({'result': classification, 'sepal_length': sepal_length,
'sepal_width': sepal_width, 'petal_length': petal_length, 'petal_width': petal_width},
safe=False)
and here is the template:
{%extends 'machinlearning/base.html'%}
{%block title%}Iris classification{%endblock %}
{%block content %}
<div class='container pt-5'>
<form action ="" method="POST"id ="input_form">
{% csrf_token %}
<div class="form-group" >
<label for="sepal_length" style="color:white">Sepal Length</label>
<input type="number" step="0.1" class="form-control" id="sepal_length" placeholder="Sepal Length">
</div>
<div class="form-group" >
<label for="sepal_width">Sepal Width</label>
<input type="number" step="0.1" class="form-control" id="sepal_width" placeholder="sepal width">
</div>
<div class="form-group" >
<label for="petal_length">Petal Length</label>
<input type="number" step="0.1" class="form-control" id="petal_length" placeholder="petal_length">
</div>
<div class="form-group" >
<label for="petal_width">Petal Width</label>
<input type="number" step="0.1" class="form-control" id="petal_width" placeholder="petal width">
</div>
<button type="submit" value = "Submit" class="btn btn-primary" data-toggle="modal" data-target= "#modalex">classify</button>
</form>
</div>
<div class="modal fade" id="modalex" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Result</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body">
<h5>Prediction Input:</h5>
<div>Sepal Length: <span id="sl"></span></div>
<div>Sepal Width: <span id="sw"></span></div>
<div>Petal Length: <span id="pl"></span></div>
<div>Petal width: <span id="pw"></span></div>
<h5 class="pt-3">Prediction Classification:</h5>
<div id="prediction"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"data-dismiss="modal">Try again</button>
</div>
</div>
</div>
</div>
<script>
$(document).on("#input_form",'submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:'{%url "mlapps:iris"%}',
data:{
sepal_length:$('#sepal_length').val(),
sepal_width:$('#sepal_width').val(),
petal_length:$('#petal_length').val(),
petal_width:$('#petal_width').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
action: 'post'
},
success:function(json){
document.forms["input_form"].reset();
document.getElementByID("prediction").innerHTML=json['result']
document.getElementByID("sl").innerHTML =json['sepal_length']
document.getElementByID("sw").innerHTML=json['sepal_width']
document.getElementByID("pl").innerHTML=json['petal_length']
document.getElementByID("pw").innerHTML=json['petal_width']
},
error : function(xhr,errmsg,err) {
}
});
})
</script>
{%endblock %}
Related
I want to protect my login/register modals before closing if I click outside modal content, and next problem is if I fill the form bad, the modal will close, and after click on link, the error will be writen on this modal - I want to not closing if is error in filled forms and error will be wroten in opened modal, too I want if I click outside the modal content, that modal will not be closed.
This is the links to modals in header.blade.php:
<div id="app">
<div class="container">
<a class="menu-link" data-toggle="modal" data-target="#loginModal">Přihlásit se</a>
<a class="menu-link" data-toggle="modal" data-target="#registerModal">Registrace</a>
</div>
</div>
#include('auth.login')
#include('auth.register')
Here is the auth/login.blade.php code:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" id="loginModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="loginModalLabel">Přihlášení do Universe Of Art</h3>
<button type="button" name="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form" action="{{ route('auth.login.send') }}" data-remote="true" method="post">
#csrf
<section class="field-container">
<input class="form-field" type="email" id="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="E-Mail" required>
</section>
<section class="field-container">
<input class="form-field" type="password" id="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="Heslo" required>
</section>
<section class="field-container">
<input class="form-submit" type="submit" value="Přihlásit">
</section>
#if ($errors->has('email'))
{{ $errors->first('email') }}
#endif
#if ($errors->has('password'))
{{ $errors->first('password') }}
#endif
</form>
</div>
<div class="modal-footer">
<div style="ml-auto">
#if (Route::has('auth.reset'))
<a class="btn btn-primary" href="{{ route('auth.reset') }}">Zapomněl jsem heslo</a>
#endif
</div>
<div style="mr-auto">
#if (Route::has('auth.reset'))
<a class="btn btn-primary" href="{{ route('auth.register') }}">Ještě nemám účet</a>
#endif
</div>
</div>
</div>
</div>
</div>
#section('scripts')
#parent
#if($errors->has('email') || $errors->has('password'))
<script>
$(document).ready(function(){
$('.launch-modal').click(function(){
$('#loginModal').modal({
show: true
backdrop: 'static'
});
});
});
</script>
#endif
<script src="https://www.google.com/recaptcha/api.js?render=6LdQEOMUAAAAABcP5X1Pru0DUTS4Ajncc5jQPnIL"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('6LdQEOMUAAAAABcP5X1Pru0DUTS4Ajncc5jQPnIL', {action: 'auth.login.send'}).then(function(token) {
...
});
});
</script>
#endsection
And here is the auth/register.blade.php:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" id="registerModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="registerModalLabel">Registrace do Universe Of Art</h3>
<button type="button" name="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form" action="{{ route('auth.register.send') }}" method="post">
#csrf
<section class="field-container">
<input class="form-field" type="text" id="name" class="form-control" name="name" placeholder="Nick" required>
</section>
<section class="field-container">
<input class="form-field" type="email" id="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="E-Mail" required>
</section>
<section class="field-container">
<input class="form-field" type="password" id="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="Heslo" required>
</section>
<section class="field-container">
<input class="form-field" type="password" id="password-confirm" class="form-control" name="password_confirmation" placeholder="Heslo" required>
</section>
<section class="field-container">
<input class="form-submit" type="submit" value="Registrovat">
</section>
#if ($errors->has('name'))
{{ $errors->first('name') }}
#endif
#if ($errors->has('email'))
{{ $errors->first('email') }}
#endif
#if ($errors->has('password'))
{{ $errors->first('password') }}
#endif
</form>
</div>
<div class="modal-footer">
<div style="mx-auto">
#if (Route::has('auth.login'))
<a class="btn btn-primary" href="{{ route('auth.login') }}">Již mám účet</a>
#endif
</div>
</div>
</div>
</div>
</div>
#section('scripts')
#parent
<script>
$(function () {
$('#registerForm').submit(function (e) {
e.preventDefault();
let formData = $(this).serializeArray();
$(".invalid-feedback").children("strong").text("");
$("#registerForm input").removeClass("is-invalid");
$.ajax({
method: "POST",
headers: {
Accept: "application/json"
},
url: "{{ route('auth.register') }}",
data: formData,
success: () => window.location.assign("{{ route('auth.account') }}"),
error: (response) => {
if(response.status === 422) {
let errors = response.responseJSON.errors;
Object.keys(errors).forEach(function (key) {
$("#" + key + "Input").addClass("is-invalid");
$("#" + key + "Error").children("strong").text(errors[key][0]);
});
} else {
window.location.reload();
}
}
})
});
})
You should use ajax to prevent modal closing as it will not refresh your page but if you dont want to use ajax you can achieve this by saving variable in session and after page resfresh check if variable exists then show modal with errors
here is the html file
it contains a model popup with fields name and email id. I need to edit and update them
<tr ng-repeat="item in collection">
<a ng-click=readOne(item.id) data-toggle="modal" data-target="#myModal">Edit</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal-product-title">Edit</h4>
</div>
<div class="modal-body">
<div><b style='color: red'>{{modalstatustext}}</b></div>
<form id="form-dinminder">
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input ng-model="name" type="text" class="form-control" id="form-name" placeholder="Name">
</div>
<div class="form-group">
<label for="email" class="control-label">Email ID</label>
<input ng-model="email" type="text" class="form-control" id="form-email" placeholder="Email ID">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btn-update-product" type="button" class="btn btn-warning" ng-click="updateProduct()">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
controller.js
/***********edit************/
$scope.readOne=function(id){
console.log("selected agency id",id)
adminservice.selectedAgency(id).then(function(response){
$scope.aid = response.data[0].id;
$scope.name=response.data[0].name;
$scope.email=response.data[0].webaddress;
//update modal
$('#myModal').modal('show');
},function(error){
$scope.modalstatustext = "Unable to Update data!";
});
}
$scope.updateProduct=function(id){
var Name = $scope.name;
var Email = $scope.email;
service.updateAgency(Name,Email).then(function(response){
//alert(response.data);
$('#myModal').modal('hide');
showAll();//after updating all items are shown
},function(error){
console.log("error in updating ");
});
}
service.js
var updateAgency=function(Name,Email){
return $http({
method: "POST",
url: CONFIG.apiurl + 'edit',
params:{
name:Name,
webaddress:Email
}
});
i have no idea what i have done wrong.
Backend seems to work perfectly.
thanks
Your UpdateProduct function expects a parameter of id,
<button id="btn-update-product" type="button" class="btn btn-warning" ng-click="updateProduct(passidhere)">Save changes</button>
Remove the id parameter from your updateProduct function as this is not used.
I have a problem with a small project for class, which does not insert the data to the database, the data I collect with a bootstrap modal and pass them to the php file using ajax. The error comes at the time of using the script, I think it is correct, but I do not execute the actions.
This is the script I use:
<script type="text/javascript">
$(document).ready(function(){
$('#confirm').click(function() {
var tk = $("#task").val();
var dt = $("#date").val();
var at = $("#amount").val();
var st = $("#status").val();
$.ajax({
type: "POST",
url: "insert.php",
data: {"task": tk, "date": dt, "amount": at, "status": st},
success: function (msg) {
$("#task").val("");
$("#date").val("");
$("#amount").val("");
$("#status").val("");
}
});
});
});
</script>
And this is the modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" id="task_insert">
<div class="form-group">
<label for="recipient-name" class="form-control-label">Task:</label>
<input type="text" required class="form-control" id="task">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Date:</label>
<input class="form-control" required type="text" id="date">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Amount:</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="number" class="form-control" required id="amount">
<div class="input-group-addon">€</div>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Status:</label>
<input type="text" class="form-control" id="status" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="confirm" class="btn btn-success" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
</div>
Thanks to everyone for your support
Hope this will help You
add jquery at top of page:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
then write your ajax script and get your value in insert.php page like:
$task = $_POST['task'];
echo $task;
if still not work then take form inside modal and submit form using jquery.
guys. I need some help in viewing my data throught a modal box and replace it using update function.
Here's my button to view the modal box
{{ Form::open(array(
'route' => array('edit_spk', 'id'=> $spk_data->id),
'method' => 'put',
'style' => 'display:inline'
))
}}
<button class="btn btn-success btn-line btn-rect" data-toggle="modal" data-target="#editSpk"><i class="icon-pencil icon-white"></i> Edit</button>
{{ Form::close() }}
Here's my view code for this modal box
<div class="col-lg-12">
{{ Form::open(array('url'=>'edit_spk','class'=>'form-horizontal', 'id'=>'block-validate')) }}
<div class="modal fade" id="editSpk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H4"> Edit SPK</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-lg-2">Distribution Code</label>
<div class="col-lg-10">
<div class="input-group">
<input class="form-control" id="distribution_code" name ="distribution_code" type="text" data-mask="M99/99/99/9999"/>
<span class="input-group-addon">M99/99/99/9999</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Destination</label>
<div class="col-lg-9">
<input type="text" id="destination" name="destination" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">HLR</label>
<div class="col-lg-9">
<input type="text" id="hlr" name="hlr" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">First ICCID</label>
<div class="col-lg-9">
<input type="text" id="first_iccid" name="first_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Last ICCID</label>
<div class="col-lg-9">
<input type="text" id="last_iccid" name="last_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Quantity</label>
<div class="col-lg-9">
<input type="text" id="quantity" name="quantity" class="form-control" />
</div>
</div>
<div class="form-actions no-margin-bottom" style="text-align:center;">
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-line btn-rect" id="confirm">Update SKU</button>
</div> </div>
{{Form::close()}}
</div>
</div>
</div>
</div>
<!--END OF MODAL EDIT SPK-->
<!-- Dialog show event handler -->
<script type="text/javascript">
$('#editSpk').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
var form = $(e.relatedTarget).closest('form');
$(this).get('.modal-body #distribution_code').data('form', form);
$(this).get('.modal-body #destination').data('form', form);
$(this).get('.modal-body #hlr').data('form', form);
$(this).get('.modal-body #first_iccid').data('form', form);
$(this).get('.modal-body #last_iccid').data('form', form);
$(this).get('.modal-body #quantity').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#editSpk').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
</script>
Here's the route :
Route::put('spk/edit/{id}', array('as'=>'edit_spk','uses'=>'SpkController#edit'));
And here's the controller
public function edit($id)
{
$spk = Spk::find($id);
$spk->title = Input::get('distribution_code');
$spk->body = Input::get('destination');
$spk->done = Input::get('hlr');
$spk->done = Input::get('first_iccid');
$spk->done = Input::get('last_iccid');
$spk->done = Input::get('quantity');
$spk->save();
Session::flash('message', 'Successfully updated SPK !');
return Redirect::to('spk_view');
}
Can someone help me to get the data and view it into the element in modal box and make it updated using laravel ? thanks for your kindness :)
I encountered the same problem, here is how i solved it.
My modal is on the index.blade page, as follows:
<a data-toggle="modal" role="button" href="{{ URL::to('user/'.$user->id.'/edit') }}" class="btn btn-default"><i class="icon-pencil"></i></a>
Then the modal:
#if(!empty($user))
<!-- Form modal -->
<div id="edit_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="icon-paragraph-justify2"></i> Edit User</h4>
</div>
<!-- Form inside modal -->
{!! Form::model($user,array('route' => ['user.update', $user->id],'method'=>'PATCH')) !!}
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>First name</label>
<input type="text" class="form-control" placeholder="Chinedu"
name="name" value="{!! $user->name !!}">
</div>
</div>
</div>
{!! Form::close() !!}
#endif
#if(!empty($user))
<script>
$(function() {
$('#edit_modal').modal('show');
});
</script>
#endif
My controller methods are:
public function index()
{
//View all users
$users= User::orderBy('name', 'ASC')->paginate(10);
return view('user.index',compact('users'));
}
public function edit($id)
{
//
$users= User::orderBy('name', 'ASC')->paginate(10);
$user= User::findOrFail($id);
return view('user.index',compact('users','user'));
}
Hope this helps
I am trying to point my scripts to two different buttons in my html. The scripts both send an email of what the customer entered however both belong to two separate modal forms.
The first form is:
!-- Beginning of Pop-up Device Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-1"></div>
<div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SpryMobile Device Testing</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Device and Meter Testing" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
The script that I have associated with this modal form is:
<script type="text/javascript">
$(document).ready(function() {
$('#emailForm').on('submit', function(event) {
event.preventDefault();
if( ! $("form")[0].checkValidity() ) {
return false;
}
// Disable the submit button
$('#contactSubmit').attr("disabled", "disabled");
$('#contactSpinner').css('display', 'inline-block');
$.ajax({
type : "POST", cache: false,
url : "#controllers.routes.Application.contactSend()",
data : {
contactName: $("#contactName").val(),
contactEmail: $("#contactEmail").val(),
contactMessage: encodeURIComponent( $("#contactMessage").val() ),
contactType: $("#contactType").val()
},
success : function(msg) {
// Check to see if the mail was successfully sent
if (msg == 'OK_SO_UPDATE') {
$("#messageSuccess").css("display", "block");
}
},
error : function(ob, errStr) {
$("#messageError").css("display", "block");
$("#messageError span.message").text(ob.responseText);
},
complete: function() {
$('#contactSubmit').removeAttr("disabled");
$('#contactSpinner').css('display', 'none');
}
});
return false;
});
});
</script>
This is referencing the scripts by giving the my form an id of "emailForm". However, if I wanted to add a second modal form such as:
<!-- Beginning of Pop-up Professional Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-2"></div>
<div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SpryMobile Professional</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Professional" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
This references the same script since I gave this form the id of emailForm as well. However, for some reason the alerts that are suppose to appear for the second form are not showing up. Any idea what this could be? Will I need to create a unique script for each form?
Duplicate ID's violate the specifications and are problematic, but here's a way around that to temporarily repair this code.
$(event.target).find("#messageError").css("display", "block");
The FORM tag is also malformed. I moved it up to match the bottom form tag (to after the fourth DIV).
(There are many duplicate ID problems yet unresolved, but the above specifies to the program within the event listener which element to reveal.)
The solution is to use class and name attributes where appropriate.
JSFiddle: http://jsfiddle.net/BloodyKnuckles/s7D98/