So I've been stuck on this problem for a day or so now and I'm still not getting very far. I'm using a django inline form-set, this allows for all previous saved forms to be displayed and then one extra empty form. I'm using javascript (jQuery) to hide all the forms until a user clicks an "edit" or "add new" button (p tag styled to look like an a tag) then the form is slideToggled for the user to see then edit.
The problem I'm running into is when the form isn't valid according to my regex in the forms.py. The form doesn't save, obviously, but the slideToggle closes. If you click the edit button again it opens with error messages over the fields that had incorrect input.
What I'm wanting is that if those error messages are present, I want the form to be open and showing which fields need to be corrected. Here's the code before submitting a form:
<div>
<p class="show_edit_ops button black small">Add New »</p>
<p class="show_edit_ops button black small" style="display:none;">Nevermind «</p>
<div class="formWrapperClass">
<div class="fieldWrapper">
<div class="form_errors"></div>
<p class="field_label"><label for="id_location_set-0-street">Street</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-street" id="id_location_set-0-street" /></p>
<p class="field_help_text">Enter your residence number and street</p>
</div>
<div class="fieldWrapper">
<div class="form_errors"></div>
<p class="field_label"><label for="id_location_set-0-street2">Street2</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-street2" id="id_location_set-0-street2" /></p>
<p class="field_help_text">Enter your apartment number or P.O. box</p>
</div>
<div class="fieldWrapper">
<div class="form_errors"></div>
<p class="field_label"><label for="id_location_set-0-city">City</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-city" id="id_location_set-0-city" /></p>
<p class="field_help_text">Enter your city</p>
</div>
And the form goes on, but you get the idea. And this is one of the fieldWrapper div's after submission with an incorrect input:
<div class="fieldWrapper">
<div class="form_errors"><ul class="errorlist"><li>You must enter a street</li></ul></div>
<p class="field_label"><label for="id_location_set-0-street">Street</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-street" id="id_location_set-0-street" /></p>
<p class="field_help_text">Enter your residence number and street</p>
</div>
I've tried many things to test to see if errorlist exists, that way if it does I can style that form to be open after a bad submit. I've tried find and children pretty extensively, but possibly incorrectly, in ways like this:
if($(".form_errors").find($(".errorlist")) == true){
document.write("error!");
}
But with no luck. If I take out the == true then I get 'error!' on every page of my site. I'm baffled, so any help would be great. All I really need is a correct check to see if errorlist exists, I'm pretty sure I can take it after that.
Thanks!!
Try this:
if($(".form_errors").find($(".errorlist")).length){
Related
I have an index page which displays the information for two seminars. Each seminar has its own unique reference number as shown in the code below. When the user clicks the apply now button in a specific section, it redirects the user to the registration page. However, I want the Reference number on that page to be automatically filled out based on the button the user clicked. For example this is my index page:
<section class="sec">
<p class= "prt"> 1. PRT Seminar </p>
<p> Reference number: S00001 </p>
<a href="register.php">
<button id="button1">Apply Now</button>
</a>
</section>
<section class="sec">
<p class="prt"> 2. Developing a Written Diversity Statement Seminar</p>
<p> Reference number: S00002 </p>
<a href="register.php">
<button id="button2">Apply Now</button>
</a>
</section>
This is my registration page
<form id="registerForm" method="post" action="process.php" novalidate="novalidate">
<h1> User Registration Form </h1>
<fieldset class="info">
<p><label for ="reference"> Seminar reference number: </label>
<input type="text" name="reference" id="reference" maxlength="10" size="10" required="required"/>
</p>
</fieldset>
</form>
So, if the user clicks on the apply now button under PRT Seminar, the registration page should have S00001 filled out next to seminar reference number. How can I do that using Javascript?
You can redirect your users to the registration page and and pass in a query string into the url. So your registration page url could look like https://myapp.com/registration-page?seminar=S00001.
Then you can parse the query string on the registration page and render the seminar value inside of your HTML where you need it. You can write your own Javascript logic to do this or you can use an npm package like qs to help you out.
Just make sure that you're only including the parsed values into your HTML in a safe way. So don't use innerHTML, etc. to render the value.You can read this article from OWASP on how to avoid common security mistakes.
You can pass the reference number as a parameter in the register link and then on the registration page you can take that parameter and put it in the input.
This is how you can pass it in the link
This is how to take params from url with javasrcipt
https://gomakethings.com/getting-all-query-string-values-from-a-url-with-vanilla-js/
I think you can add an event listener to the button and then just get the place you want to fill in and change it's value.
I have a big form for a website, with multiple required fields, and all of them are working perfectly, when i click submit on the form, the web page scroll to the field's location with an error message, except on two parts, the "Number of travelers" and the "Date of the trip".
This is the HTML for both of them:
<div class="sect-txt" style="margin-top:100px;" id="op">
<h1> Date of the trip </h1>
<div class="al">
<h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check In </h1>
<input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-in" name="checkin" required />
</div>
<div class="al">
<h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check Out </h1>
<input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-out" name="checkout" required />
</div>
<a href="#four">
<div class="btn-nxt" style="position:relative;top:137px;">
NEXT
</div>
</a>
</div>
<div class="sect-txt">
<h1> Number of travelers </h1>
<input type="number" class="f-2" placeholder="Adults" name="adults" required/>
<input type="number" class="f-3" placeholder="Children" name="childrens" required/>
<a href="#fif">
<div class="btn-nxt-b">
NEXT
</div>
</a>
</div>
And this is a link to the page in action: http://www.eliteware.co/92/form/
Your button is not focusable because you are trying to hide it when it has to receive focus again. Check the following link for more information about why this happens. Basically, you are hiding the object that is supposed to receive focus when validation is needed. If you don't want this to happen, you can probably do validation before hiding, or unhide the object if validation fails.
https://stackoverflow.com/a/28340579/616813
Also, do remember, if an error log exists, that is the first point to check if you receive an error. That is the whole point of error log, to give you a starting point to debug.
Or as Andreas said, "Fix the damn errors in the console... :)".
Edit:
Because it was killing me, I tried to reverse engineer your application. All it took was comparing the textbox that was working, and the one that was failing to find the problem. Really, that easy.
aria-required="true"
Your "Adults" and "Children" input fields have this property. You need required="true" instead.
Check your css and update that. And no, I have no idea why "aria=required" and "required" property behave differently. It is something new to learn for sure.
Ok I have been building this nutrition plugin for wordpress, trying to find a solution for this simple task that a couple of lines of js should work.... just to uncheck the other check boxes when one is checked.
I have 4 input's nested in div's as per this:
<div class="nutrition-mc-group nutrition-mc-group-activity-level">
<div class="nutrition-mc-selection-box">
<div class="nutrition-mc-checkbox-outter">
<input type="checkbox" id="squared-checkbox1">
<label class="nutrition-mc-checkbox" id="mc-sedentary-select" for="squared-checkbox1"></label>
</div>
<p class="nutrition-mc-notes nutrition-mc-notes-switch">Sedentary</p>
<p class="nutrition-mc-description">Typical desk job / Sitting most of the day</p>
</div>
<div class="nutrition-mc-selection-box">
<div class="nutrition-mc-checkbox-outter">
<input type="checkbox" id="squared-checkbox2">
<label class="nutrition-mc-checkbox" id="mc-lightly-active-select" for="squared-checkbox2"></label>
</div>
<p class="nutrition-mc-notes nutrition-mc-notes-switch">Lightly Active </p>
<p class="nutrition-mc-description">Walking around a good amount, retail jobs</p>
</div>
<div class="nutrition-mc-selection-box">
<div class="nutrition-mc-checkbox-outter">
<input type="checkbox" id="squared-checkbox3">
<label class="nutrition-mc-checkbox" id="mc-moderately-active-select" for="squared-checkbox3"></label>
</div>
<p class="nutrition-mc-notes nutrition-mc-notes-switch">Moderately Active</p>
<p class="nutrition-mc-description">Walking constantly in a fast paced environment, waiting tables</p>
</div>
<div class="nutrition-mc-selection-box">
<div class="nutrition-mc-checkbox-outter">
<input type="checkbox" id="squared-checkbox4">
<label class="nutrition-mc-checkbox" id="mc-vigorously-active-select" for="squared-checkbox4"></label>
</div>
<p class="nutrition-mc-notes nutrition-mc-notes-switch">Vigorously Active</p>
<p class="nutrition-mc-description">Very labor intensive, construction workers</p>
</div>
</div>
Now the js is a little different, I have tried to simplify it as much as possible:
this.allActive = this.mod.find( '.nutrition-mc-group-activity-level input');
_init: function(){
this.allActive.on('change', $.proxy( this._uncheckActivityBtn, this ) );
},
_uncheckActivityBtn: function(){
$(this.allActive).not(this).prop('checked', false);
},
It runs fine, but its like it is not recognizing the not(this) part argument.
if I change the .prop to true it changes the argument and all the inputs become checked when checking one. I cant figure out why it is not understanding the this part of the argument and not excluding the currently selected box.
I tried to just move everything in the one function but when doing a debug the output gave an error for the not(this) operator, saying something about it being unspecified.
We had similar requirement in our project and we turned up using radio button. Just change the styling as per your style guide.
Note: all radio button inputs must have the same name.
How I can change the text that is in the jdialog box message for each row?
As you can see, in every row in the column Order Details there is a Show button.
I would like for each row to have different text there.
I tried changing the name values, and I also put inside every td element the code for the button, but it still doesn't work.
The specific code for the text:
<div id="dialog-form" title="Order Details">
<p class="validateTips">Spicy Sandwitch</p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips">Sandwitch only lettuce</p>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget"
The full code here
In order to make the content of the dialog changes from record to another
You didn't explain How will you load the custom content? but I'll guide you to how to customize the dialog content per record.
First: Create a JS method called openDialog(), this method can take the context of the dialog as a parameter, or it may take just the record ID and load the content via AJAX or something
function openDialog(content="", record_id=0)
{
if(content.length > 0) // if you're passing content as a paramter
dialog.html(content);
if(record_id!=0) // if you're passing the record ID as a paramter
{
// load content via ajax or something
dialog.html("loaded content via AJAX for user number "+record_id);
}
dialog.dialog("open");
}
Then call this method in each "Show" button you have
<button id="create-user-1" onclick="openDialog('Hello User #1');">New Show</button>
<button id="create-user-2" onclick="openDialog('',2);">New Show</button>
Update actually your full code is a little bit messy but as you requested, I tried to apply my solution on your fiddle code, here's my working example
https://jsfiddle.net/doaa_magdy_55/qtvw75z6/20/#&togetherjs=jSCLnBoUen
atm the text that appears in there is hardcoded on your html
<p class="validateTips">Spicy Sandwitch</p>
unless you change it with javascript this text "Spicy sandwitch" will always be the same no matter how much times you create a new one. I didnt really read all your code because its way too big , but you can do something like this to adress each one of your entries individually(atribute them ids)
<div id="dialog-form" title="Order Details">
<p id="something1.0" class="validateTips">Spicy Sandwitch</p>
<p id="something1.5" class="validateTips">More</p>
<form>
<fieldset>
<label id="something2.0" for="name">More Comments</label>
<p id="something3.0" class="validateTips">Sandwitch only lettuce</p>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
and then, when you create a new entrance of your row , you can go to each id specifically and decide what is shown
$('#something1.0').text('new Spicy sandwitch');
$('#something2.0').text('moreeee');
Make the following changes to your code:
Define elements inside the dialog with references to hold your dynamic content
<div id="dialog-form" title="Order Details">
<p class="validateTips field1"></p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips field2"></p>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
Define the content you want for each row, statically or via AJAX
var order1 = {
field1: 'Spicy Sandwich',
field2: 'Sandwich Only Lettuce'
};
var order2 = {
field1: 'Epic Pizza',
field2: 'Pizza Without Pinneaple'
};
var orders = [order1, order2];
Edit the code to populate the dialog
$(".showDialog").button().on("click", function() {
var row = $(this).closest('tr').index();
$('#dialog-form .field1').html(orders[row].field1);
$('#dialog-form .field2').html(orders[row].field2);
dialog.dialog("open");
});
I try to make my checkout page more friendly and how to do this:
I have guest form`s and save button after them. And after guest info is saved (instead payment option) are show send my order button - this is from one module Cash on delivery, but instead to choice only this i move button to be showed directly.
BUT: Many clients are confused from this "save" button. I want to marge this two buttons in one.
How to do this? What is the best solution: to add some js when for save button or adding new button instead these 2?
You can see the problem page in my live shop here: http://bijutaniki.com/porychka (do not forget to add product like: http://bijutaniki.com/prysteni/8-prysten-na-nastroenieto.html - and shop is on bulgarian)
Now process looks like that:
What i want to do:
I try two times to add new button with js instead these to but without success. May be if use "save" button and add js to click on other "send order" button will be more easy because when "save" been clicked check fields above and if fields are valid show message.
What are you think, how to combine this buttons.
Thanks!
EDIT:
Save button and message:
{$HOOK_CREATE_ACCOUNT_FORM}
<p class="submit">
<input type="submit" class="exclusive button" name="submitGuestAccount" id="submitGuestAccount" value="{l s='Save'}" />
</p>
<p style="display: none;" id="opc_account_saved">
{l s='Account information saved successfully'}
</p>
<p class="required opc-required" style="clear: both;">
</p>
Send order button (with smile):
<div class="cod_cofirm">
<form action="{$link->getModuleLink('cashondelivery', 'validation', [], true)|escape:'html'}" method="post">
<input type="hidden" name="confirm" value="1" />
<p class="cart_navigation" id="cart_navigation">
<input type="submit" value="{l s='Send order' mod='cashondelivery'}" class="extraorderbutton" />
</p>
</form>
</div>
Because prestashop have controllers may be need to show code from some controller?
I guess there is no valid answer without showing us code, I'll try it anyway:
$('NEW_Send_Order_btn').click(function(e){
e.preventDefault();
$('Save_btn').trigger('click');
if($('Save_btn').hasClass('well_done')){
$('Send_my_order').trigger('click');
}
});