modal form not submitting - html

The problem is that when i click on the button nothing happens at all which it should be at least to me.
I don't need a direct answer. Just a hint, or a pointer of what can be going on.
Here is part of the code for the modal form
<div class="modal-body">
<form Method="POST" id="Signin-Form" role="form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_uname" id="txt" type="text" class="form-control input-lg" placeholder="Enter User Name" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
<input name="txt_umail" id="email" type="text" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_upass" id="pass1" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_upass2" id="pass2" type="password" class="form-control input-lg" placeholder="Confirm Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" />
</div>
</div>
<button type="submit" class="btn btn-success btn-block btn-lg"><i class="glyphicon glyphicon-open-file">CREATE ACCOUNT!</i></button>
</form>

You need to add action attribute to the form to be able to send the form-data when the form is submitted.
Sample code below
<form action="submittedpage.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
After you click submit button, the form data is sent for processing to a PHP file named "submittedpage.php". The form data is sent with the HTTP POST method.
To display the submitted data you could simply echo all the variables. The "submittedpage.php" see the code below:
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
You can see this link for more info in form handling.
https://www.w3schools.com/php/php_forms.asp
Hope this helps.

Related

Form data not getting entered in mail

when I submit this form, after entering some data, Gmail pops up but nothing is entered in it. What should I do so that the data I enter in the form gets entered in the email?
<form class="" action="mailto:exampl#gmail.com" method="post">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
You need to add the name attribute to each field, which will appear in the mail's body. It'll format itself as mail={your_message} and so on.
Your code becomes:
<form class="" action="mailto:exampl#gmail.com" method="post" enctype="text/plain">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com" name="email">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
JSFiddle

Vue.js "#click.prevent" is hiding the HTML "required" attribute default validation message(Please fill out the field.)

If I use "#click.prevent", I am not getting this message(Please fill out this field.) when user press "Add User" button with empty field.
But only "#click" is working fine. How can I get this message with "#click.prevent"?
<div class="modal-body p-4">
<form action="#" method="POST">
<div class="form-group">
<input type="text" name="name" class="form-control form-control-lg" placeholder="Name"
required v-model="newUser.name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control form-control-lg"
placeholder="Email" required v-model="newUser.email">
</div>
<div class="form-group">
<input type="tel" name="phone" class="form-control form-control-lg" placeholder="Phone"
required v-model="newUser.phone">
</div>
<div class="form-group">
<button class="btn btn-info btn-block btn-lg" #click="addDataIfValid('insert')">Add
User</button>
</div>
</form>
</div>
Check https://v2.vuejs.org/v2/cookbook/form-validation.html to see how to deal with form validation.
You shouldn't add handler to button #click but form #submit event

Angular 4 : ngNativeValidate is not allowed in Form

I'm using Angular 4 to build a form and required attribute is not working. I tried adding <form ngNativeValidate>...</form> as suggested by many answers but i got :
Attribute ngNativeValidate is not allowed here.
Here is my code :
<form #f="ngForm" (ngSubmit)="submit()" ngNativeValidate>
<div class="form-group input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" type="text" [(ngModel)] = "email" name='email' placeholder="Email" required/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-def btn-block">Submit</button>
</div>
</form>
try to replace this : <input class="form-control" type="text" [(ngModel)] = "email" name='email' placeholder="Email" required/>
with this : <input class="form-control" type="text" ngModel #email="ngModel" name='email' placeholder="Email" required/>
so all your code should look like this :
<form #f="ngForm" (ngSubmit)="submit()">
<div class="form-group input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" type="text" ngModel #email="ngModel" name='email' placeholder="Email" required/>
</div>
<div class="alert alert-danger" role="alert" *ngIf="!email.valid && email.touched" >
<span *ngIf="!email.valid"> This field is required</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-def btn-block">Submit</button>
</div>
</form>
Also remove the unnecessary ngNativeValidate and it should work now.

Fetching inputted form data in modal of different page

I have created a register form inside a modal of index page , when user submit it, user gets directed to 2nd page which is confirmation through PHP.
If users gets an error it is necessary to go back to previous page and fill the whole form again, how can i save the values inputted by user recently and when he gets redirected to previous page he see the form but filled of his recent values
<div class="modal fade" id="registermodal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"> x </span><span class="sr-only">Close</span></button>
<h3 class="modal-title text-center" id="lineModalLabel"> Register </h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form action="confirmation.php" method="POST" enctype="multipart/form-data">
<div id="cfirstname" class="form-group" style="float:left;width:45%;">
<label for="firstname"> First Name </label>
<input oninvalid="this.setCustomValidity('Please enter your first name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" autocomplete="off">
</div>
<div id="clastname" class="form-group" style="float:right;width:45%;">
<label for="lastname"> Last Name </label>
<input oninvalid="this.setCustomValidity('Please enter your last name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name" autocomplete="off">
</div>
<div id="cemail" class="form-group" style="clear:both;">
<label for="email"> Email </label>
<input oninvalid="this.setCustomValidity('Please enter your email name')" oninput="setCustomValidity('')" required type="email" class="form-control" id="email" name="email" placeholder="Email" autocomplete="off">
</div>
<div id="ccategory" class="form-group" style="clear:both;">
<label for="category"> Category </label>
<input oninvalid="this.setCustomValidity('Category is Required')" oninput="setCustomValidity('')" required type="text" class="form-control" id="category" name="category" placeholder="Category" autocomplete="off"> <span class="help">Enter the category you are expert in </span>
</div>
<div class="form-group ">
<label for="Password"> Password </label>
<input oninvalid="this.setCustomValidity('Please enter a password)" oninput="setCustomValidity('')" required type="password" class="form-control" name="rpassword" id="password" placeholder="Password" autocomplete="off">
<span id="8char" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> 8 Characters Long<br>
</div>
<div class="form-group ">
<label for="Password">Confirm Password </label>
<input oninvalid="this.setCustomValidity('Please confirm your password')" oninput="setCustomValidity('')" required type="password" class="form-control" name="rcpassword" id="cpassword" placeholder="Repeat Password" autocomplete="off">
<span id="pwmatch" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Passwords Match
</div>
<div id="cfblink" class="form-group">
<label for="fblink"> Facebook profile link </label>
<input type="text" class="form-control" id="fblink" name="fblink" placeholder="Facebook Link" autocomplete="off">
</div>
<div class="form-group">
<label for="ppic">Please upload an image of yourself</label>
<input class="btn btn-default" required="required" type="file" name="file" id="file">
<span id="cppic" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Image uploaded
</div>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group" role="group">
<button type="submit" id="signup" name="signup" class="btn btn-default btn-hover-green" role="button"> Proceed </button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
well i found answer myself just put the variable as value input tag
<input oninvalid="this.setCustomValidity('Please enter your first name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" autocomplete="off" <?php echo 'value="'.$variable_name.'"'; ?> >

Form will not submit in IE 11, successful in all others

I am a newb to programming, this is my first question here.
I have a bootstrap modal that opens up to a Contact Us form. In Firefox, the form submits postback as expected. In IE 11 clicking the send button just hangs, nothing. The close window buttons work as do the required attributes for text input fields.
I have seen other similar questions, but I am not missing name attributes on any field or button. I am also not duplicating the type="submit" attributes in the tag. I have experimented with using button type="submit" and every other way I can think of doing it. The modal and form elements all work except for the submission. The button behaves as though it is being clicked but nothing changes, nothing is submitted. Any help would be terrific!
Relevant Code:
<form class="form-horizontal" method="post" name="PortalContactUsForm" id="PortalContactUsForm">
<input type="submit" form="PortalContactUsForm" name="SendEmailButton" id="SendEmailButton" class="btn btn-primary" value="Send">
The complete Modal and form code:
<div id="myPortalModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myPortalModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" name="ModalCloseButton" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myPortalModalLabel">Contact Us</h3>
</div>
<div class="modal-body">
<h4>Send <cfoutput>#sub_merchant.companyname#</cfoutput> an email by filling out the form below.</h4><br>
<form class="form-horizontal" method="post" name="PortalContactUsForm" id="PortalContactUsForm">
<div class="control-group">
<label class="control-label" for="Account" name="lblAccount" id="lblAccount" form="PortalContactUsForm">Account</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="Account" id="Account" value="<cfoutput>#customer.account#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="FirstName" name="lblFirstName" id="lblFirstName" form="PortalContactUsForm">First Name</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="FirstName" id="FirstName" value="<cfoutput>#customer.firstname#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="LastName" name="lblLastName" id="lblLastName" form="PortalContactUsForm">Last Name</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="LastName" id="LastName" value="<cfoutput>#customer.lastname#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email" name="lblEmail" id="lblEmail" form="PortalContactUsForm">Your Email</label>
<div class="controls">
<input type="email" form="PortalContactUsForm" name="Email" id="Email" value="<cfoutput>#customer.email#</cfoutput>">
</div>
</div>
<div class="control-group">
<label class="control-label" for="ConfirmEmail" name="lblConfirmEmail" id="lblConfirmEmail" form="PortalContactUsForm">Confirm Email</label>
<div class="controls">
<input type="email" form="PortalContactUsForm" name="ConfirmEmail" id="ConfirmEmail" value="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="PhoneNum" name="lblPhoneNum" id="lblPhoneNum" form="PortalContactUsForm">Your Phone</label>
<div class="controls">
<input type="tel" form="PortalContactUsForm" name="PhoneNum" id="PhoneNum" value="<cfoutput>#customer.phone#</cfoutput>">
</div>
</div>
<div class="control-group">
<label class="control-label" for="MsgBody" name="lblMsgBody" id="lblMsgBody" form="PortalContactUsForm">Questions/Comments</label>
<div class="controls">
<textarea rows="3" form="PortalContactUsForm" name="MsgBody" id="MsgBody" placeholder="No html here, just plain text please." required></textarea>
</div>
</div>
<div class="control-group pull-right">
<label class="checkbox">
<input type="checkbox" form="PortalContactUsForm" name="SendCCCheckbox" id="SendCCCheckbox">
Check this box to receive a copy of this email at the address above.
</label>
</div>
<cfoutput>
<input type="hidden" form="PortalContactUsForm" name="postback" id="postback" value="true">
<input type="hidden" form="PortalContactUsForm" name="mailsend" id="mailsend" value="true">
<input type="hidden" form="PortalContactUsForm" name="lname" id="lname" value="#trim(form.lname)#">
<input type="hidden" form="PortalContactUsForm" name="zip" id="zip" value="#(len(trim(form.zip)) > 5 ? left(trim(replace(form.zip, "-", "", "all")), 5) : trim(form.zip))#">
<input type="hidden" form="PortalContactUsForm" name="pin" id="pin" value="#trim(replacelist(pin, "-, ", ""))#">
</cfoutput>
</form>
</div>
<div class="modal-footer">
<button class="btn" name="CloseModalButton" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" form="PortalContactUsForm" name="SendEmailButton" id="SendEmailButton" class="btn btn-primary" value="Send">
</div>
</div>