MVC 4 Input Submit Button not firing Action - forms

I cannot get the my HttpPost action to fire.
In HomeController.cs I have the following:
public ActionResult TestForm()
{
return View();
}
[HttpPost]
public ActionResult TestForm(TestForm testForm)
{
int x = 1;
return View();
}
In my View code I build my form with
#using (Html.BeginForm())
{
....
}
The rendered HTML is
<form action="/Home/TestForm" method="post"> <div style="display: table">
<div style="display: table-row">
<div style="display: table-cell"><label for="Cmd">CMD String</label></div>
<div style="display: table-cell">
<input class="CmdForm" id="Cmd" name="Cmd" type="text" value="" />
</div>
</div>
<div style="display: table-row">
<div style="display: table-cell"><label class="MacAddress" for="MacAddress">MAC Address</label></div>
<div style="display: table-cell">
<input id="MacAddress" name="MacAddress" type="text" value="" />
</div>
</div>
<div style="display: table-row">
<div style="display: table-cell"></div>
<div style="display: table-cell">
<input type="button" value="Submit"/>
</div>
</div>
</div>
I've put a break point at int x=1; just to see if it's hitting the function on button click but it does not hit it. Can someone give me some tips on what I might be missing?

You put a button for submission which is not of the right type. You should use submit as a type, not button.
Change the following code from
<div style="display: table-cell">
<input type="button" value="Submit"/>
</div>
to
<div style="display: table-cell">
<input type="submit" value="Submit"/>
</div>

Related

Nuxt and Netlify Form File Upload Problem

in a Nuxt site I have a form with a field of type "file", and a Name, Email and Message fields.
Name, Email and Message are working flawlessy everytime, instead the "file" field ONLY WORKS when the first page visited is the page where the form is (or it's reloaded). If a user, let's say, land on the homepage and only then reach the form page, the message sent from the form will not contain the file that was attached.
What can cause this? I've already tried to reset the form on the mounted hook, or reset only the "file" field but with no luck.
This is the form component code "TheFormJob.vue":
<template>
<div>
<form name="job" netlify-honeypot="bot-field" method="post" action="/success" data-netlify="true">
<input type="hidden" name="form-name" value="job" >
<p class="hidden">
<label>Don’t fill this out: <input name="bot-field"></label>
</p>
<div class="form">
<div class="form__name">
<input class="form__field" name="name" id="name" :placeholder="$t('contatti.nomeForm')" required >
</div>
<div class="form__email">
<input class="form__field" type="email" name="email" id="email" placeholder="Email*" required >
</div>
<div class="form__upload">
<input class="form__field" type="file" name="fileToUpload" id="fileToUpload" accept=".doc, .docx, .pdf" required>
</div>
<div class="form__textarea">
<textarea class="form__field" name="message" id="message" :placeholder="$t('contatti.messaggioForm')" required></textarea>
</div>
<div class="form__privacy extra-mt">
<label><input type="checkbox" name="privacy" required> {{$t('contatti.privacy')}}</label>
</div>
<div class="form__send extra-mt">
<button class="default-button" type="submit" value="Invia" >{{$t('contatti.invia')}} </button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
mounted(){
const dis = this
const uploadField = document.getElementById("fileToUpload");
uploadField.onchange = function() {
if(this.files[0].size > 1048576){ // 1MB
alert(dis.$t('lavora.fileAlert'));
}
}
}
}
</script>
In the page "index.vue":
<template>
<div>
<div class="container">
<div class="first row extra-mt5-md is-center">
<div class="col-12 col-4-md text-center" style="padding: 2rem 0">
<h1>{{$t('lavora.title')}}</h1>
</div>
</div>
<div class="second row">
<div class="col-12 col-4-md image" />
<div class="col-12 col-8-md content">
<p>{{$t('lavora.p1')}}</p>
<TheFormJob class="extra-mt5" />
</div>
</div>
<div class="third row">
<div class="col-12">
<nuxt-link class="default-button-full" :to="localePath('contatti')">{{$t('contatti.title')}} → </nuxt-link>
</div>
</div>
</div>
</div>
</template>

How to do form validation with select2 and Wicked?

I have Select2 in wicket, and I want to add form validation on it. I use atributte required, but it doesnt work. I want that select2 after unsuccessful validation have red background, or at least red border. When I try to submit form with required attribute, It dont do any validation. Select where I try to do validation is origin country. Can someone give me a point, how to achive this behaiviour? Thanks for any help.
<wicket:head xmlns:wicket="http://wicket.apache.org/">
<style>
/*.form-group .form-control {*/
/* padding: 0;*/
/* height: 33px;*/
/* }*/
.p-0 {
padding: 0px !important;
height: 30px;
}
</style>
</wicket:head>
<wicket:panel xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="form-group">
<div class="col-sm-3">
<input type="submit" value="Request" class="btn btn-danger"/>
</div>
<div class="col-sm-3">
<label for="quotationId" wicket:id="quotationIdLabel"></label>
<div>
<input wicket:id="quotationId" type="text" size="20"/>
</div>
</div>
<div class="col-sm-3">
<label for="product" wicket:id="productLabel"></label>
<div>
<select class="form-control" wicket:id="product"/>
</div>
</div>
<div class="col-sm-3">
<label for="contract" wicket:id="contractLabel"></label>
<div>
<input type="hidden" wicket:id="contract"/>
</div>
</div>
<div class="col-sm-3" style="padding: 0">
<label for="customer" wicket:id="customerLabel"></label>
<div>
<input class="form-control p-0" type="hidden"
wicket:id="customer" />
</div>
</div>
<div class="col-sm-3">
<label for="serviceLevel" wicket:id="serviceLevelLabel"></label>
<div>
<select class="form-control" wicket:id="serviceLevel"/>
</div>
</div>
<div class="col-sm-3">
<label for="equipmentType" wicket:id="equipmentTypeLabel"></label>
<div>
<input class="form-control p-0" type="hidden" wicket:id="equipmentType"/>
</div>
</div>
<div class="col-sm-3">
<label for="commodity" wicket:id="commodityLabel"></label>
<div>
<select class="form-control" wicket:id="commodity"/>
</div>
</div>
<span class="col-sm-3">
<label for="originCountry" wicket:id="originCountryLabel"></label>
<div>
<input type="hidden" wicket:id="originCountry" required/>
</div>
</span>
<div class="col-sm-3">
<label for="originDgfStation" wicket:id="originDgfStationLabel"></label>
<div>
<input type="hidden" wicket:id="originDgfStation"/>
</div>
</div>
<div class="col-sm-3">
<label for="destinationCountry" wicket:id="destinationCountryLabel"></label>
<div>
<input type="hidden" wicket:id="destinationCountry"/>
</div>
</div>
<div class="col-sm-3">
<label for="destinationDgfStation" wicket:id="destinationDgfStationLabel"></label>
<div>
<input type="hidden" wicket:id="destinationDgfStation"/>
</div>
</div>
<div class="col-sm-3">
<label for="shippingTerms" wicket:id="shippingTermsLabel"></label>
<div>
<select class="form-control" wicket:id="shippingTerms"/>
</div>
</div>
</div>
<br/>
</div>
</div>
<div class="clearfix"></div>
</wicket:panel>
I think the problem is with hidden fields which can not be declared as required in HTML. You might need to use some hack to use a regular text field and hide it with CSS. See this answer: make hidden field required

PHP mail form not functioning

I am using a Templatemo template and attempting to get the Email Form Submission to function.
(Signaturetables.com is the site)
I have downloaded the correct contact.php form from templatemo and followed instructions, and modified it all accordingly to info#signaturtables.com.
Can anyone see what is my problem?
I have contacted GoDaddy regarding this. They are hosting Signaturetables.com. They say they cannot even see emails being sent from the mail area.
They are suggesting the error is then on the php page.
This is over my head and I need help!
Thanks to anyone who can shed light on this for me!
HERE IS MY INDEX.HTML PAGE FORM SUBMISSION CODE:
<div class="templatemo_lightgrey" id="templatemo_contact">
<div class="templatemo_paracenter">
<h2>Contact us</h2></div>
<div class="clear"></div>
<div class="container">
<div class="templatemo_paracenter">
Please feel free to call or e-mail for inquiries.
</div>
<div class="clear"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="templatemo_maps">
<div class="fluid-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2965.3996287541227!2d-91.66233118455531!3d41.99169827921325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87e4f0b4219cc027%3A0xe64b0645b30a6bc!2sSignature+Santiago!5e0!3m2!1sen!2sus!4v1479248142906" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<form action="contact.php" method="post" id="form" class="contact-form">
<div class="form-group">
<input name="cf_name" type="text" class="form-control" id="fullname" placeholder="Your Name" maxlength="30">
</div>
<div class="form-group">
<input name="cf_email" type="text" class="form-control" id="email" placeholder="Your Email" maxlength="30">
</div>
<div class="form-group">
<input name="subject" type="text" class="form-control" id="subject" placeholder="Your Subject" maxlength="40">
</div>
<div><button type="button" class="btn btn-primary">Send Message</button></div>
</form>
</div>
<div class="col-md-9">
<div class="txtarea">
<textarea name="cf_message" rows="10" class="form-control" id="message"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Laravel. Button in FORM tag doesn't work like the others

The buttons inside my panel-body doesn't work. This is the code:
<div class="panel-body">
<table border="3">
<!-- <div id="tray"></div> -->
#forelse($carts as $cart)
<div class="row">
<div class="col-md-1">{{$cart->id}}</div>
<div class="col-md-3">{{$cart->name}}</div>
<div class="col-md-4">
<div class="row clearfix">
<div class="col-md-1">
<form action="/restaurant/minus" method="POST">
<input type="hidden" name="trayid" id="trayid" value="{{$cart->id}}">
<input type="hidden" name="trayprice" id="trayprice" value="{{$cart->price}}">
<button type="submit" class="btn btn-xs btn-primary" style="border-radius: 50%;" id="{{$menu->id}}"><i class="fa fa-minus" aria-hidden="true"></i></button>
</form>
</div>
<div class="col-md-4">
<input type="number" min="1" value="{{$cart->quantity}}" style="width:40px;">
</div>
<div class="col-md-1">
<form action="/restaurant/plus" method="post">
<input type="hidden" name="trayid" id="trayid" value="{{$cart->id}}">
<input type="hidden" name="trayprice" id="trayprice" value="{{$cart->price}}">
<button type="submit" class="btn btn-xs btn-primary" style="border-radius: 50%"><i class="fa fa-plus" aria-hidden="true"></i></button>
</form>
</div>
</div>
</div>
<div class="col-md-2">
<input type="hidden" name="trayprice" value="{{$cart->price}}">
</div>
<div class="col-md-1">
<form action="/restaurant/delete" method="post">
<input type="text" name="deleteid" id="deleteid" value="{{$cart->id}}">
<button type="submit" class="btn btn-xs btn-danger" style="border-radius: 50%;"><i class="fa fa-trash" aria-hidden="true"></i></button>
</form>
</div>
</div>
#empty
#endforelse
</table>
</div>
Meanwhile, the button in my panel-header works, and it just clears the body.
<div class="panel-heading">
<div class="row clearix">
<form class="col-md-12" method="POST" action="/restaurant/cleartray">
{{ csrf_field() }}
<p class="pull-left">Tray</p>
<button type="submit" class="btn btn-danger btn-xs pull-right"><i class="fa fa-eraser" aria-hidden="true"></i> Clear</button>
</form>
</div>
</div>
Is there anything wrong with the structure that made it impossible for the button to work?
P.S: It doesn't even gets to the route target. It doesn't refresh or something like that. It's like the button itself is unresponsive.
EDIT: I found out that the buttons in the form doesn't work once it's inside the forelse loop.
I think you can change your route action like:
<form action="/restaurant/plus" method="post">
TO
<form action="{{ url('restaurant/plus') }}" method="post">
Hope this work for you!
I kinda got the answer by literally debugging it, haha.
It turns out that having a form tag inside the table tag isn't going to go well. So I took out the table tag. (Didn't remember why I had it in the first place)
Aaaaand voila! It worked!

How to dynamically disable form submit button when using Bootstrap validation

I have a form that is validated using Bootstrap Validator http://1000hz.github.io/bootstrap-validator/.
You don't see the form at first (display: none). When you get to the step where you fill out the form, the Submit button is enabled, although the form is not valid.
However, if I display the form right away, the Submit button is disabled until the form is valid, as I want it to be. Does anyone have idea why is this happening and how to get it to work?
<div id="step0">
Some code here that is visible in the first step
<div class="row">
<button type="button" class="btn btn-primary" onclick="step1();">Go to step 1</button>
</div>
</div>
<div id="step1" style="display: none;">
<form id="forma-klijenta" data-toggle="validator" method="post" action="test.php">
<div class="row">
<div class="col-md-8 col-sm-12 form-right">
<h3> Lični podaci </h3>
<div class="row">
<div class="col-xs-12 form-group col-sm-6">
<input autocomplete="off" class="form-control" id="ime" data-minlength="2" name="ime" placeholder="Ime" required type="text" value=""
pattern="^[A-ZŠĐČĆŽa-zšđčćž]([-' ]?[A-ZŠĐČĆŽa-zšđčćž])+$"data-error="Ime je obavezno. Dozvoljeni specijalni karakteri su - i '." />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="row form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<!-- Kraj forme za unos podataka -->
</div>
This is how I worked around this:
Removed style="display: none;"
Added jQuery
$(document).ready(function(){
$("#step1").hide();
});