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>
Related
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
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.'"'; ?> >
It appears that I either have trouble spacing correctly or making things stack either horizontally or vertically.
Still new to Bootstrap but I'm pretty happy with what I got so far. Currently I have this for my login form:
I would like to make my contact form the same way, vertically stacked. But here is what I end up with:
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact me!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<form role="form" class="navbar-form" action="" method="post">
<span>Your Name</span>
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
<span>Your Email</span>
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
<span>Your Message</span>
<textarea id="contact-message" class="form-control" placeholder="Your message..." required></textarea>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Use form-groups. Just make sure you wrap your input in <div class="form-group"></div>:
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I'm developing a web application with Struts2 and Twitter Bootstrap.
I've created a simple registration form that uses HTML tags and bootstrap attributes, while the form of Struts uses Struts tags.
Is there a way to integrate them? Below are the two code snippets:
Using HTML and Twitter Bootstrap:
<div class="row">
<div class="col-md-6">
<form class="form-horizontal" action="" method="POST">
<fieldset>
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" id="username" name="username" placeholder="" class="form-control input-lg">
<p class="help-block">Username may contain any letters or numbers, no spaces</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" id="password" name="password" placeholder="" class="form-control input-lg">
<p class="help-block">Password must be at least 6 characters</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password_confirm">Password (Conferma)</label>
<div class="controls">
<input type="password" id="password_confirm" name="password_confirm" placeholder="" class="form-control input-lg">
<p class="help-block">Confirm password</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">E-mail</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="" class="form-control input-lg">
<p class="help-block">Insert your email</p>
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<button class="btn btn-success">Confirm</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Form in Struts:
<s:actionerror/>
<s:form action="Registrazione" method="POST" id="formRegistrazione">
<p align="center">Inserisci i tuoi dati per registrarti al sistema: </p>
<s:textfield name="user.username" label="Username" />
<s:password name="user.password" label="Password" />
<s:password name="user.confermaPassword" label="Confirm Password" />
<s:textfield name="user.email" label="Email"/>
<s:submit value="Registrazione" align="center" />
</s:form>
How would I add a horizontal form to a legend form? When I try to do it, the horizontal form doesn't look as it should: http://i.imgur.com/tJAT5k4.png
Here's my code:
<form>
<fieldset>
<legend>Legend Text</legend>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
</fieldset>
</form>
All of the CSS is the bootstrap default CSS.
Remove the outer <form> tag.
<fieldset>
<legend>Legend Text</legend>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
</fieldset>