I have a simple form that registers the informations in a MailChimp's list. I want to disable the Submit button if the input fields weren't filled yet.
<div class="demo" data-ng-if="demo && !register">
<form action="MAILCHIMP_ADDRESS" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate demoform" data-ng-init="demoUser = {}" target="_blank" autocomplete="off" novalidate>
<div class="control-group">
<div class="form-group">
<input type="email" name="EMAIL" data-ng-model="demoUser.email" class="form-control" placeholder="Insira seu e-mail profissional">
</div>
</div>
<div class="control-group">
<div class="form-group">
<input type="text" name="EMPRESA" data-ng-model="demoUser.empresa" class="form-control" placeholder="Insira sua empresa">
</div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0a5d36c63e174c949789feea5_200f88e472" tabindex="-1" value=""></div>
<div class="clear pull-right">
<button type="submit" class="btn btn-outline-light" data-ng-disabled="mc-embedded-subscribe-form.$invalid" data-ng-click="demoLogin(demoUser)">Enviar</button>
</div>
</form>
</div>
What am I doing wrong here?
This is because you are using a hyphen in the name of your form.
Its a known issue explained here also stated here.
So you will have to change your form name to myFormor something without a hyphen.
data-ng-disabled="myForm.$invalid"
check this plunker the one form with the hyphen is not working, the other does
Related
I am trying to find a way to change the color of text in a form as a result of passing a validation by another JavaScript function. Is there an easy way to do this?
Example of the element I want to update the color for:
<form name="contact" method="post" action="send_form_email.php" novalidate>
<div class="row">
<div class="col">
<label for="nameInput">Name:*</label>
<input name="name" type="text" class="form-control" id="nameInput" placeholder="E.g. Alan Turing" oninput="bootstrapValidate('#nameInput', 'required:Please fill out this field')">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="emailInput">Email:*</label>
<input name="email" type="email" class="form-control" id="emailInput" placeholder="E.g. name#domain.com" oninput="bootstrapValidate('#emailInput', 'email:Enter a valid E-Mail!|required:Please fill out this field')">
</div>
<div class="col-sm-12 col-md-6">
<label for="telInput">Telephone:</label>
<input name="tel" type="tel" class="form-control" id="telInput" placeholder="E.g. (01452) 714 xxx">
</div>
</div>
<div class="form-group">
<label for="msgInput">Message:*</label>
<textarea name="msg" class="form-control" id="msgInput" placeholder="E.g. Hello world!" oninput="bootstrapValidate('#msgInput', 'required:Please fill out this field')"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
For example document. GetElementById('msgInput').style.color='#ABC666';
Another way is to toglle a class containing a rule like so:
JS: document. GetElementById('msgInput').classList.add('valid');
CSS: .valid { color: #ABC666; }
Aforementioned JS code has to be placed in the event listener.
You can add CSS class to your element:
// styles.css
.warning {
color: red;
}
// scripts.js
document.getElementById('msgInput').classList.add('warning');
I'm trying to install custom MailChimp form with hidden fields.
The values that I want to pass on are included in the URL and I extract them using JS. No issue there.
The form code looks something like this:
<div id="mc_embed_signup">
<form action="//treat-candida.us3.list-manage.com/subscribe/post?u=d6e792c187ee9f2f2ad&id=787f11a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our list</h2>
<div class="indicates-required"><span class="asterisk"></span> </div>
<div class="mc-field-group">
<label for="mce-EMAIL"><span class="asterisk"></span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME"><span class="asterisk"></span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d6e792c187ee9f2f2da2f179d_787f1101bd" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='COOKIE';ftypes[2]='text';fnames[3]='GENDER';ftypes[3]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
What I have to do is to append values from the URL to //treat-candida.us3.list-manage.com/subscribe/post?u=d6e792c187ee9f2f2ad&id=787f11a
within the code. I tried using and .innerHTML to edit just that part. It passes the values successfully that way, but the form won't be submitted properly because of the edit. It looks like I have to edit the whole code with divs and text at once. Is there an elegant way to do so?
Do something like:
$("#mc-embedded-subscribe-form").action = $("#mc-embedded-subscribe-form").action + values
I am trying to clear all the errors and make input values blank on closing of magnific popup.
I inspected the class of 'close' button and tried to fire jquery event but it is not working.
$("button.mfp-close").on('click',function(){
console.log("Closed");
});
When i click on mfp-close then there is no log in console.
HTML snippet is:
<div class="mfp-content"><div id="customdesign" class="white-popup mfp-with-anim">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p><span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p><form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst"
placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp- close">×</button>
</div></div>
How can we handle this operation??
First of all, if you are using bootstrap framework, use bootstrap modal instead magnific popup, no need for extra js librabry, you can achieve same with bootstrap modal
in your HTML, button you have class="mfp- close" it should be class="mfp-close" as you are binding it like this $("button.mfp-close")
To reset form on pop-up close, you can achieve it with $('form')[0].reset();
Script
$("button.mfp-close").on('click',function(){
alert("Closed");
$('form')[0].reset();
});
HTML
<a class="popup-modal" href="#customdesign">Open modal</a>
<div class="mfp-content">
<div id="customdesign" class="white-popup-block mfp-hide">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p>
<span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p>
<form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
</div>
Working fiddle example
I am trying to create a simple for that then passes the data into a querystring.
ie capturing:
first name
last name
email
Which when submitted with give soemthing like:
http://www.url.com?FirstName=John&LastName=Smith&johnsmith#url.com
I thought I would try 2 way binding and add the querystrings via the action but obviously this gave me an error. I don't need to save this data trust transfer it from a small form to the main application.
I also tried doing this all on submit which works however the link is still clickable when the form is blank. Any suggestions would be very welcome.
<form class="form" name="appForm" novalidate action="https://www.url.com?FirstName={{firstname}}" method="Post">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 flowuplabels">
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appfirstname" class="fieldLabel fl_label">
First name<span class="text-danger">*</span>
</label>
<input type="text" name="appfirstname" id="appfirstname" class="form-control fl_input" data-ng-model="firstname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="applastname" class="fieldLabel fl_label">
Last name<span class="text-danger">*</span>
</label>
<input type="text" name="applastname" id="applastname" class="form-control fl_input" data-ng-model="lastname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appemail" class="fieldLabel fl_label">
Email<span class="text-danger">*</span>
</label>
<input type="email" name="appemail" id="appemail" class="form-control fl_input" data-ng-model="email" ng-required />
<span class="form-bar"></span>
<p ng-show="appForm.appemail.$invalid && !appForm.appemail.$pristine" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class="form-group">
<button id="btnSend" class="btn btn-red" ng-disabled="!firstname || !lastname || !email">Join us</button>
</div>
</div>
</div>
</div>
</div>
</form>
Typical as soon as I ask I solve
should have used get and just put the url ie:
It will then ass the query string using the input name as the query name so much simpler that what I was trying to do
I'm trying to send the form data of my web page using jquery get() method. But when I submit the form only few of the field data where sent to the server.
Form:
<form class="form-horizontal" id="addpost" method="GET" action="">
<div class="control-group">
<label class="control-label" for="form-field">Post Title</label>
<div class="controls">
<input type="text" id="form-field" placeholder="Post Title" name="Post-title" value="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="form-field-11">Content Here</label>
<div class="controls">
<textarea name="post-content" value="" class="autosize-transition span12" id="form-field-11" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea>
</div>
</div><!-- Insert Image Code -->
<div class="control-group">
<div class="widget-main">
<div class="controls">
<div class="ace-file-input">
<input id="id-input-file-2" type="file">
<a class="remove" href="#"></a>
</div>
</div>
<div class="controls">
<div class="ace-file-input ace-file-multiple">
<input id="id-input-file-3" type="file" multiple="">
<a class="remove" href="#">
<i class="icon-remove"></i>
</a>
</div>
<label>
<input id="id-file-format" type="checkbox" name="file-format">
<span class="lbl"> Allow only images</span>
</label>
</div>
</div>
</div><!-- Insert Image Code -->
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-tags">Tag input</label>
<div class="controls">
<input id="form-field-tags" type="hidden" placeholder="Enter tags ..." value="Tag Input Control" name="tags">
</div>
</div>
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-select-3">Select Category</label>
<div class="controls">
<label for="form-field-select-3">Chosen</label>
<select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Category...">
<option value="">
</option><option value="Blog">Blog
</option><option value="News Letter">News Letter
</option></select>
</div>
</div>
<div class="control-group" style="float:left; margin-right:25px">
<div class="controls"><button type="submit" class="btn btn-info">
<i class="icon-ok bigger-110"></i>
<input type="submit" value="" id="posubmit" style="opacity:0"/>Submit</button>
<button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button>
</div>
</div>
<div id="resp" style="float:left; margin-top:5px">
<img id="loading" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" />
</div>
</form>
JavaSccript:
$('#addpost').submit(function(e){
if(use_ajax)
{
$('#loading').css('visibility','visible');
$.get('test.php',$(this).serialize(),
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#resp","* Please ensure all fields are filled.","error");
else
{
$("#resp").show('slow').after('<p id="resp-mes" style=" color:#000000; text-decoration: bold;">Success....</p>');
}
$('#loading').css('visibility','hidden');
setTimeout( "jQuery('#resp').hide('slow');",3000 );
setTimeout( "jQuery('#resp-mes').hide('slow');",5000 );
});
}
e.preventDefault();
}
)};
In this only 3 field values where sent to server.
That is Post-title, post-content and tags
I don't know why this happening.
Any help would be appreciated.
you have two issues.
Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)
jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.
following is a note in jquery serialize documentation page -
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.
Its because you have missed "name" attribute in select element
<select class="chzn-select" id="form-field-select-3" name="form-field-select-3" data-placeholder="Choose a Category...">
I have checked in my local, and now this is working fine.
Please check and let me know if any issue.
Thanks
I see that attrbute name="" is required and some of the input elems are missing those. so you can try placing this attribute and see if this solves the issue:
<select class="chzn-select" name="your-elem-name">
//--------------------------^^^^^^^^^^^^^^^^^^^^^-----try placing the name attr
ok of this entire form, only four elements may get sent through if all four are populated/selected from a higher index than zero;
the ones with these names;
"tags"
"file-format"
"post-content"
"Post-title"
this is because those are the only tags with a name attribute defined.
please give all the elements you want to post through to the server a name attribute with the post index you want to use to access them with.