Ive made a form that has several sections, later sections are hidden but will be displayed after a user clicks a next button on current section. Im trying to do simple "must be filled" validation on this click before the rest of the form is displayed.
As far as i can gather from other questions on here my method should work.. var validate should equal true if errors are found which will stop the form progressing but will allow the form to progress once the fields have been filled and the button is clicked again
However all this seems to do at the moment is validate the very first field and then do nothing. Even if the field is valid it still will not progress with the rest of the actions on the function.
js library : http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js
method im trying to use: http://jqueryvalidation.org/Validator.element/
<div class="col-sm-8 sec-one">
<div class="form-group">
<select name="t1" required>
<option value="" disabled selected>Choose an option...</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="A">A</option>
<option value="D">D</option>
</select>
</div>
<div class="form-group">
<select name="t2" required>
<option value="" disabled selected>Choose an option...</option>
<option value="A">A</option>
<option value="D">D</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<button type="button" class="formbut next1">Next</button>
</div>
var validator = $("form").validate();
$(".next1").click(function () {
validator.element('.sec-one [name]');
if (validator) {
$(".sec-one").slideUp("slow", function () {
$(".sec-two").slideDown("slow");
});
} else {}
});
"As far as i can gather from other questions on here my method should work.. var validate should equal true if errors are found"
I'm not sure where you saw that. In your code, you've dropped the element() part from your conditional. And $('#yourform').validate().element() is supposed to return true if there are no errors.
var validator = $("#myform").validate(); // create the validator variable
validator.element("#myselect"); // test an element
Better way...
Refer to the official website and simply use the .valid() method to test the form and/or individual elements. A true indicates no errors.
$('#myform').valid();
or
$('input[name="myelement"]').valid();
Related
I have very little coding experience, but am generally a quick learner and have been looking things up piece by piece to learn how to create a few simple things I need for a webpage. I want to be able to autofill a form using query strings in my URL (i.e. so that example.com?color=blue will automatically load the form with the option "blue" already filled out in the form section named "color").
Here is the part of my html code that makes the form:
<form id="wsite-com-product-options">
<div class="wsite-com-product-option-groups">
<div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
<label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
<b class="wsite-com-product-title">Photo</b>
</label>
<select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
<option selected="selected" value="">--</option>
<option class="wsite-com-dropdown" value="Pelicans">
Pelicans
</option>
<option class="wsite-com-dropdown" value="Dolphins">
Dolphins
</option>
<option class="wsite-com-dropdown" value="Rams">
Rams
</option>
</select>
</div>
</div>
</form>
So I thought if I typed the URL for my website, followed by ?Photo=Pelicans or ?Photo=Dolphins, that form would automatically be filled out with the answer Pelicans or Dolphins, respectively. Obviously that didn't work, and my understanding now is that I need some javascript code to make the query string work like that? But I have been trying for a couple weeks now to figure out how to do that, examining every relevant example code I could find line by line to try to understand what they were doing, and none of it has worked. Is there a relatively simple code that would accomplish this function, or am I just completely out of my depth as a noob here?
Assuming you're trying to fetch your parameter from the current URL given to your users and would be selecting the element accordingly.
I've written javascript code for you. check if it works.
In case you want to use your current URL update the URL in javascript with window.location.href.
var url_string = "http://www.mywebsite.com?photo=Rams"; //window.location.href (set for current url)
var url = new URL(url_string);
var c = url.searchParams.get("photo");
document.querySelector('option[value="'+c+'"]').selected = true
console.log(c);
<form id="wsite-com-product-options">
<div class="wsite-com-product-option-groups">
<div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
<label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
<b class="wsite-com-product-title">Photo</b>
</label>
<select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
<option selected="selected" value="">--</option>
<option class="wsite-com-dropdown" value="Pelicans">
Pelicans
</option>
<option class="wsite-com-dropdown" value="Dolphins">
Dolphins
</option>
<option class="wsite-com-dropdown" value="Rams">
Rams
</option>
</select>
</div>
</div>
</form>
So I have a form that submits device,color and the problem(with the device) and it displays the correct price underneath nicely using jQuery but I can't figure out how to insert the jQuery result into the hidden input value so that it also sends the price to next page(checkout page) Thanks :)
<form method="POST" action="../action.php">
<select class="custom-select mr-sm-2" name="device" id="inlineFormCustomSelect">
<option value="Motorola Edge">Moto Edge</option>
<option value="Motorola Edge Plus">Moto Edge Plus</option>
</select>
<select class="custom-select mr-sm-2" name="color" id="inlineFormCustomSelect">
<option selected>Select Color..</option>
<option value="Solar Black">Solar Black</option>
<option value="Midnight Magneta">Midnight Magneta</option>
</select>
<select class="custom-select mr-sm-2" name="issue" id="inlineFormCustomSelect3">
<option data-price="£0.00" data-total="" selected>Select Problem..</option>
<option data-price="£40.00" data-total="£42.00" value="Screen Repair">Damaged Screen</option>
<option data-price="£15.00" data-total="£15.75" value="Battery Replacement">Battery Replacement</option>
<option data-price="£35.00" data-total="£36.75" value="Audio Repair">Faulty Audio</option>
<option data-price="£35.00" data-total="£36.75" value="Mic Repair">Faulty Microphone</option>
<option data-price="£35.00" data-total="£36.75" value="Cam Repair">Faulty Camera</option>
</select>
<p><i id="price"></i>+Additional Fees</p>
<p>Total:<span id="total"></span></p>
<script type="text/javascript" language="javascript">
$(function(){
$('select').change(function(){
var selected = $(this).find('option:selected');
$('#price').html(selected.data('price'));
$('#total').html(selected.data('total'));
}).change();
});
*//This is some code I tried below//*
$(document).ready(function(){
$('input[id="price"];').val(price);
});
</script>
<input type="hidden" id="price" name="price" value=''>
<button type="submit" name="submit">
In the case that you are trying to use the same values in an entirely different page. You should know that JS variables do not automatically save, you will lose them after refreshing the page or loading another page.
In order to save variables in the browser, you can use localStorage or localSession. In this particular case, I suggest localSession. localSession will delete the data when the browser is close or the cache is cleared.
Also, you could remove the semicolon ';' from $('input[id="price"];').val(price)
I do not suggest using localStorage or localSession for important forms, this requires back-end. You could use PHP, Node, Django, or any back-end for managing forms. But what you tried was ultimatly right, it's just that there was no variable set to retrive the data from. Hence, why the input could be left empty.
One way you can do this is to update the hidden field when you update the text field.
$(function(){
$('select').change(function(){
var selected = $(this).find('option:selected');
$('#price').html(selected.data('price'));
$('#total').html(selected.data('total'));
$('#hiddenPrice').val(selected.data('price'));
}).change();
});
HTML:
<input type="hidden" id="hiddenPrice" name="hiddenPrice" value="">
Notes:
In your question, the hidden input has the same Id as the text field. That's not valid HTML. So give your hidden input a different Id (such as id='hiddenPrice'). Also, be aware that hidden fields can still be modified by a user. You should validate the posted price in your server side code to verify it is the correct price.
Try these
$('select[name="issue"]').on('change', function() {
var issue = parseFloat($(this).children("option:selected").data('price'));
$('input[name="price"]').val(issue);
// or this one below
$('input[name="price"]').val(issue).trigger('change');
});
Also, try changing the id of your hidden input field and remove or extract this '£' from the data-price.
I got stuck with targeting the correct element and I hope you can help me.
So:
I have fields generated by PHP script:
<fieldset>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
</fieldset>
And I need to initialize an auto complete plugin over each of textfield on focus, based on what is selected inside the select in the row, where is the textbox.
Because of templates of project, where I don't have access, I cannot edit the ID or classes of rows (like numbering the rows), so even this is a simplified solution, it is all like what I am working with.
So, once again, what I need to achieve:
$(input).focus(function(){
Ask_what_is_in_select_at_the_same_row()
Store_value_of_Selected_Option_to_Variable()
});
You can use it this way:
$('div.row :text').focus(function(){
// get the value of the select which is the sibling of focussed text input.
var optVal = $(this).siblings('select').find('option:selected').val();
// now you can use it.
});
DEMO
So ive been spending the last week trying to figure out what im doing wrong.. i have tried to use several other scripts posted to other stack overflow users but can not seem to get anything to do what i need it to do, im still learning html, php and java script so everything is taking me a little while, so any help, advice or input is greatly appreciated.
So in my form i have several input fields that are selection fields, here is some for example:
</div>
<div class="form-field">
<label class="frm">*Approx Property Value</label>
<select name="fldAPV" title="Approx_Property_Value" id="fldAPV" class="form-action select-details">
<option value="100" selected="selected">Select value</option>
<option value="100">£0 - £100,000</option>
<option value="200">£100,001 - £200,000</option>
<option value="300">£200,001 - £300,000</option>
<option value="400">£300,001 - £400,000</option>
<option value="500">£400,001 - £500,000</option>
<option value="600">£500,001 - £600,000</option>
<option value="700">£600,001 - £700,000</option>
<option value="800">£700,001 - £800,000</option>
<option value="9000">£800,001 - £900,000</option>
<option value="1Million">£900,001 - £1,000,000</option>
</select>
</div>
<div class="form-field">
<label class="frm">*Number of Bedrooms</label>
<select name="fldNOBEDS2" title="Number_Of_Bedrooms" id="fldNOBEDS2" class="form-action select-details">
<option value="Not_Sure" selected="selected">I'm Not Sure</option>
<option value="1">1 Bedroom</option>
<option value="2">2 Bedrooms</option>
<option value="3">3 Bedrooms</option>
<option value="4">4 Bedrooms</option>
<option value="5">5 Bedrooms</option>
<option value="6">6 Bedrooms</option>
<option value="7">7 Bedrooms</option>
<option value="8+">8 Bedrooms +</option>
</select>
</div>
<div class="form-field">
<label class="frm">*Reason for Survey</label>
<select name="fldRFS" title="Reason for Survey" id="fldRFS" class="form-action select-details">
<option value="Not-Sure" selected="selected">Not Sure</option>
<option value="Selling">Selling</option>
<option value="Buying">Buying</option>
<option value="Other-Reason">Other Reason</option>
</select>
Now what i am trying to achieve is to have a javascript that will calculate the input value on each field the user selects his/hers answer.. My initial thoughts was to do it with each value="" having a default price value so for example the reason for survey fields, instead of saying "Not-Sure" or "Buying" they will say "50" or "100" to represent the cost of the service.
Is it possible to have a script that would understand code like this for example:
Buying
The reason i say this is i am hoping the value's don't make things confusing, if not then i am happy to use the value="50" for example to determine what the overall cost of the service will be. I guess its the client basically putting together their own package.
The most important part of the script is to make the calculation hidden, so when clicking (View Quote) the form will submit the data either by $_GET or $_POST to page2.php where the client can view their quoted price.
I really hope i have not confused everyone! i see people post very small posts and they seem to get it on the head in one, i can not stress enough i am still learning and we all started somewhere :) This is for my own personal website and one hopes some kind experienced member can help me out, anything is much appreciated as i have spent 6 days trying to figure this out, Thanks!
King Regards
PHP on page2.php:
<?php
If(isset($_POST['submit'])){
$Quote = $_POST['fldST'] + $_POST['fldAPV'] //... For all nummeric Fields
Switch ($_POST['fldPropertyType']){
/* Use the Switch Statement if you want to compare the same variable
(or expression) with many different values, and execute a different piece of code
depending on which value it equals to. */
case 'Semi':
$Quote = $Quote + 20; //Replace 20 wit you're Value
case 'Terraced':
$Quote = $Quote + 50;
//... For all cases
}
//Other Code and Page Content
echo $Quote;
}
else{
//ERROR Page was accessed without filling the form in.
}
?>
I hope this gives you an good Idea how to do it. Not every Client has Javascript enabeld and you don't know about their Maschine Performance. ist the better way to calculate via PHP.
Importend: NEVER echo/print/use POST/GET Variables direktly! Thats a big leck of Security. Always Filter your User Inputs to prevent Cross-Site-Scripting (XSS)
http://phpsec.org/projects/guide/2.html
http://resources.infosecinstitute.com/website-hacking-part-vi-input-validation-filtering-php/
http://phpsec.org/projects/guide/1.html#1.4.3
<---------------------------------------------- Update ----------------------------------->
When using the code above, Dreamweaver is saying that
Switch ($_POST['fldPropertyType']){
has a syntax error. Would this affect the script running before I add all the values or is it something simple to rectify?
Thanks
HTML:
<form>
<select>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
<button type="submit">continue</button>
</form>
Javascript:
$('button').on('click', function(e) {
e.preventDefault();
var total = 0;
$('select').each(function(){
total += Number($(this).val());
});
$.ajax({
type: 'POST',
url: 'page2.php',
data: { total: total },
dataType: 'json',
success: function(result){
console.log(result);
}
});
});
PHP:
header('Content-Type: application/json');
echo JSON_encode($_POST['total']);
Problem is, I don't know either language. I'm pretty good at modifying existing scripts but I can't seem to find any that suit my needs.
I want to be able to have two drop down menus and a button. From the two dropdowns lets say you can select variable A and variable B, then when the button is pressed, I want it to show an item from a list which satisfies both A and B (preferably without a refresh or need for PHP).
Are there any existing scripts like this which I can modify or is it too much to do without knowing the language?
Thanks.
Something like this. Insted of alerts put your filtering code.
<body>
<script>
function onSelect(){
var selectmenu1=document.getElementById("select1");
var selectmenu2=document.getElementById("select2");
alert("First value: " + selectmenu1.options[selectmenu1.selectedIndex].value);
alert("Second value: " + selectmenu2.options[selectmenu2.selectedIndex].value);
}
</script>
<select id="select1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" onclick="onSelect();" value="Submit!"/>
</body>