I have the following HTML form code:
<div data-role="popup" id="-add" data-theme="c" class="ui-corner-all" data-dismissible="false" data-overlay-theme="a" style="min-width:550px;">
<div data-role="content"> Delete
<form id="item-form" action="#" formaction="process" data-ajax="false">
<input type="hidden" name="type" value="hidden1" />
<input type="hidden" name="how" value="hidden2" />
<input type="hidden" name="loc" value="hidden3" />
<input type="hidden" name="itemtype" value="hidden4" />
<div align="left">
<h3> Add</h3>
</div>
<div class="popup-hrule"></div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<label for="location_name">Name</label>
<input type="text" name="location_name" id="location_name" value="">
</div>
<div class="ui-block-b" data-schema="types">
<label for="type_name">Type</label>
<select name="type_name" id="type_name">
<option data-item=".textarea:name; .value:id; .repeat:true"></option>
</select>
</div>
<div class="ui-block-a">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="">
</div>
<div class="ui-block-b">
<label for="city">City</label>
<input type="text" name="city" id="city" value="">
</div>
<div class="ui-block-a">
<label for="state">State</label>
<input type="text" name="state" id="state" value="">
</div>
<div class="ui-block-b">
<label for="zip">Postal</label>
<input type="number" name="zip" id="zip" value="">
</div>
<div class="ui-block-a">
<label for="_lat">Latitude</label>
<input type="number" name="_lat" id="_lat" value="">
</div>
<div class="ui-block-b">
<label for="_lon">Longitude</label>
<input type="number" name="_lon" id="_lon" value="">
</div>
</div> <a data-role="button" data-inline="true" onclick="$(this).closest('[data-role=popup]').popup('close');">Cancel</a>
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
</form>
</div>
</div>
Since this is an ADD form I would like to close the form and clear all the fields except for the hidden ones at the top which are flags that tell me what I have to do with the data. When I execute the code it clears all the data in the form including the hidden fields so the second time I can't add a new record.
A best approach for me would be to close the form completely so I don't have to erase the fields in the form which are going to get new data when I try to open it again.
You're clearing all input elements:
$(this).closest('form').find('input').val('');
If you want to clear only some of them, you need to target specifically the ones you want. For example, if you want to clear all non-hidden input elements:
$(this).closest('form').find('input[type!="hidden"]').val('');
Worst case would be that you have to turn this one line of code into a couple of lines of code to identify the elements you want. But as long as there's some jQuery-selectable pattern to identify the ones you want, that's what you need to do.
A best approach for me would be to close the form completely so I
don't have to erase the fields in the form which are going to get new
data when I try to open it again.
$("#item-form").remove();
If the hidden fields are populated from server, you can reset the form, so all form fields will be reset to value which were there during page reload.
$('#item-form')[0].reset();
The plain JS way of doing it
document.getElementById("item-form").reset();
Updated after discussion with OP
Cancel
function resetForm() {
$('#item-form')[0].reset();
$(this).closest('[data-role=popup]').popup('close');
}
Change this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
For this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input[type!=\'hidden\']').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
So that you are selecting just those input elements with type not equal to hidden.
Related
I have a single page website that has three buttons (styled with jQuery Mobile) as a menu which, when clicked, show different content that is contained on hidden "div". However, on the main page I have a form connected to mysql which lets users join in, but when you fill the form and click the button "submit", the page "kind of reloads" and the header buttons don't work anymore. So, when form is submitted on main div, menu stops to work (it doesn't display and hide content anymore) Is there any solution to this?
(I've included a snippet but here the problem is not seen as I can't connect it to mysql).
function updateContent(hash) {
var newClass = hash.substring(1);
var newContent = $("." + newClass).html();
$("#content").html(newContent);
$("#content").css("display", "none");
}
if (window.location.hash) {
updateContent(window.location.hash);
}
$(".contentUpdate").click(function() {
updateContent($(this).attr("id"));
$("#content").fadeIn();
$(".contentUpdate").removeClass("ui-btn-active");
});
.hiddenContent {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="menu">
<div data-role="navbar">
<ul>
<li><a class="contentUpdate" id="#swim">Swim</a></li>
<li><a class="contentUpdate" id="#cycle">Cycle</a></li>
<li><a class="contentUpdate" id="#run">Run</a></li>
</ul>
</div>
<!-- /navbar -->
</div>
<div id="content">
FORM
<div id="joinForm">
<form method="post">
<label for="name">Name and Surname(s)</label>
<input type="text" id="name" placeholder="Adam Smith" value="" name="name" />
<label for="email">Email</label>
<input type="text" id="email" placeholder="example#esade.edu" value="" name="email" />
<label for="phone">Phone</label>
<input type="text" id="phone" placeholder="+34 671 542 893" value="" name="phone" />
<fieldset data-role="controlgroup">
<p>Choose the sports you're interested in:</p>
<input type="checkbox" id="swimming" name="swimming" value="" />
<label for="swimming">Swimming</label>
<input type="checkbox" id="cycling" name="cycling" value="" />
<label for="cycling">Cycling</label>
<input type="checkbox" id="running" name="running" value="" /> <label for="running">Running</label>
</fieldset>
<div align="right">
<button type="submit" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" name="submit" id="submit" value="submit">Submit</button>
</div>
</form>
</div>
</div>
<div class="hiddenContent swim">
swim
</div>
<div class="hiddenContent cycle">
cycle
</div>
<div class="hiddenContent run">
run
</div>
Thank you!
So I have these radio buttons that a user can select and then I need a text input inside of it. How can I validate these inputs so that they are required to select a radio option, and if it is one of the first two, make sure they fill out the text inputs? I assume I need to use the jquery.validator.addMethod somehow, but i'm really lost on what I need to do. I'd really appreciate some help. Thanks so much!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="itemPricing" class="clearfix">
<div class="row">
<div class="col-sm-12" form-group>
<label for="itemPricing" class="required">Pricing</label>
<span id="helpBlock" class="help-block">Select how you want pricing to display on your website.</span>
</div>
<!-- Regular Price -->
<div class="col-sm-12 form-group">
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="regularPrice" value="">
<label for="regularPrice" class="required">Regular Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="salePrice" value="">
<label for="salePrice" class="required">Sale Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="emailPrice" value="">
<label for="emailPrice" class="required">Email for Price</label>
</div>
</div>
</div>
</div>
</div>
<!-- end itemPricing -->
<button type="submit" class="btn btn-success save ladda-button" data-style="zoom-in">Save</button>
Yes, skipping server side validation is not an option, but you get a better user experience if you also validate on the client side too. Waiting for the round trip to the server before the user becomes aware of the problem is a sure way to piss the user off. The radio buttons can have onChange handlers that check to see if the button is selected and set the required status of the textbox accordingly.
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
So I'm having some basic html, that contains of a modal box with a <form>, I take that html and append it to a div next to <body>, everything displays correctl only that the form submit doesn't work, it doesn't work via enter or submit button.
$(document).ready(function() {
var windowWidth = (parseInt(window.innerWidth) - 15) + 'px',
windowHeight = $('body').css('height');
$tk = $("#take-survey");
var $html = $tk.css({'width': windowWidth, 'height': windowHeight}).clone();
$tk.remove();
$($html).appendTo(".put-me");
$('body .put-me #take-survey').show();
});
<div id="take-survey" style="width: 1843px; height: 2120px; display: block;">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Dear User,<br><br>
Our goal is to provide the best service possible. Please take a 1 minute to complete the following customer service questionnaire. Your comments will enable us to see how we're doing overall and find out how we can improve.<br> It only takes 1 minute!
</div>
<div class="modal-body">
<form name="newSurvey" action="index.php?id=25&L=1&tx_arxsurvey_fesurvey[action]=create&tx_arxsurvey_fesurvey[controller]=Survey" method="post">
<div style="display: none">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][extensionName]" value="ArxSurvey">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][controllerName]" value="Survey">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][actionName]" value="new">
<input type="hidden" name="tx_arxsurvey_fesurvey[__hmac]" value="a:3:{s:9:"newSurvey";a:4:{s:6:"whyUse";i:1;s:13:"otherServices";i:1;s:11:"suggestions";i:1;s:8:"tellMore";i:1;}s:6:"action";i:1;s:10:"controller";i:1;}77fcb50f86112b3acd1aa7f6eff2b4adeac7a664">
</div>
<label for="userProfile">
What is your user profile? <span class="required">(required)</span>
</label>
<select name="tx_arxsurvey_fesurvey[newSurvey][userProfile]">
<option value="Real Estate Agency">Real Estate Agency</option>
<option value="Real Estate Marketing">Real Estate Marketing</option>
<option value="Floor Drawing Services">Floor Drawing Services</option>
<option value="Project Developers">Project Developers</option>
<option value="Property Management">Property Management</option>
<option value="Interior Design">Interior Design</option>
<option value="Architect">Architect</option>
<option value="Private User">Private User</option>
<option value="Furniture Retailer">Furniture Retailer</option>
</select>
<label>If other please specify:</label>
<input type="text" name="tx_arxsurvey_fesurvey[newSurvey][userProfileOther]">
<label for="useStatus">
How often you use PlanningWiz? <span class="required">(required)</span>
</label>
<div class="hold-radios">
<input type="radio" id="dailyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Daily">
<label for="dailyUse">Daily</label>
<input type="radio" id="weeklyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Weekly">
<label for="weeklyUse">Weekly</label>
<input type="radio" id="monthlyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Monthly">
<label for="monthlyUse">Monthly</label>
<input type="radio" id="rarelyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Rarely">
<label for="rarelyUse">Rarely</label>
</div>
<label for="whyUse">
Why are you using a room planner? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][whyUse]"></textarea>
<label for="otherServices">
Are you using other room planning services as well? If so, why? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][otherServices]"></textarea>
<label for="suggestions">
What suggestions for improvement would you have? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][suggestions]"></textarea>
<label for="tellMore">
I'd also like to tell you that: <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][tellMore]"></textarea>
</form></div>
<div class="modal-footer">
<input class="save" type="submit" name="" value="Create new">
<input type="button" value="Skip for now!" class="skip">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
Submit button not inside the form so close the </form> tag after the submit button
<div class="modal-footer">
<input class="save" type="submit" name="" value="Create new">
<input type="button" value="Skip for now!" class="skip">
</div>
</form> // add form close here
You need to reinitialize the form. Just like this:
$(document).find("form").trigger("create")
"In JQM 1.4 you can simply call $(your_form).enhanceWithin() to have JQM render all elements inside your cloned form. In JQM 1.3.2 this is not available, so I guess you would have to initialize things using trigger("create") for example."
There are a same issue here
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.