Object required in validation - javascript

I am trying to validate code in javascript. Here is my code:
if(document.getElementById("name").value == ""){
alert("Name is a required field");
document.getElementById("name").focus();
return false;
}
name is id in my html page:
<div class="app-form-box">
{% if review %}
{% if not review.name %}
<input type="text" alt="" onkeyup="return validateField(name)" tabindex="2" name="name" id="name" class="disabled inputtxtlarge" onfocus="highlightInput(this.id)" onblur="return (!validateField(name) || unhighlightInput(this.id))" maxlength="50" value="{{name|moonescape}}" disabled="disabled"/><span> </span>
{% else %}
<input type="text" alt="" onkeyup="return validateField(name)" tabindex="2" name="name" id="name" class="inputtxtlarge" onfocus="highlightInput(this.id)" onblur="return (!validateField(name) || unhighlightInput(this.id))" maxlength="50" value="{{name|moonescape}}"/><span> </span>
{% endif %}
{% else %}
<input type="text" alt="" onkeyup="return validateField(name)" tabindex="2" name="name" id="faname" class="inputtxtlarge" onfocus="highlightInput(this.id)" onblur="return (!validateField(name) || unhighlightInput(this.id))" maxlength="50" value="{{name|moonescape}}"/><span> </span>
{% endif %}
<div class="servererror">
{% if form_errors.name %}
* {{ form_errors.name|join:"| " }}<br/>
{% endif %}
</div>
</div>
But I am getting OBJECT REQUIRED. Please suggest how to put check in js file for this. Thanks

Related

Shopify adding two products to cart with one checkout button

So I have a bundle I created to add two products to cart once those products are selected. I want them to be added to cart at the same time. I'm currently only getting one product being added, with the name="id". How can I create the values in input for both to checkout?
Here's my form:
<form method="post" action="/cart/add" class="col-button ">
<input id="idPrice" type="hidden" name="id" value="" />
<input id="designPrice" type="hidden" name="id" value="" />
<input min="1" max="2" type="hidden" id="quantity" name="quantity" />
<button name="checkout" {%unless product.available %}style='margin-bottom:20px;'{% endunless %}type="{% if settings.cart_action == 'ajax' %}button{% else %}submit{% endif %}" name="add" class="collection-add-to-cart {% if settings.cart_action == 'ajax' %} ajax-submit {% endif %}action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %} {% if product.available == false %}disabled{% endif %}" data-label={{ add_to_cart_label | json }}>
{{ 'layout.general.checkout' | t }}
</button>
</form>
Thanks in advance!

How to change required = false to an input that is required

My html file has a select, with three different options. If you select one it will display different inputs depending on what option you choose, but these inputs are required by default, and I can't send the form if I don't fill all the inputs.
function yesnoCheck(that) {
if (that.value == "1") {
document.getElementById("ifStudent").style.display = "block";
} else {
document.getElementById("ifStudent").style.display = "none";
}
if (that.value == "2") {
document.getElementById("ifAcademic").style.display = "block";
} else {
document.getElementById("ifAcademic").style.display = "none";
}
if (that.value == "3") {
document.getElementById("ifWorker").style.display = "block";
} else {
document.getElementById("ifWorker").style.display = "none";
}
}
<div class="select">
<select onchange="yesnoCheck(this);" name="school_role" required>
<option value="">--------</option>
<option value="1">Student</option>
<option value="2">Academic</option>
<option value="3">Employee</option>
</select>
</div>
<div id="ifStudent" style="display: none;">
<label class="label">Account number</label>
<input class="input" type="text" name="account_number" value="{{ studentform.account_number.value }}" placeholder="Account number">
<div class="help is-danger">
{% for error in studentForm.account_number.errors %}{{ error }}{% endfor %}
</div>
<div id="ifEmployee" style="display: none;">
<label class="label">Employee Number</label>
<input class="input" type="text" name="employee_number" value="{{ employeeForm.employee_number.value }}" placeholder="Employee number">
<div class="help is-danger">
{% for error in employeeForm.employee_number.errors %}{{ error }}{% endfor %}
</div>
<div id="ifAcademic" style="display: none;">
<label class="label">Academic number</label>
<input class="input" type="text" name="academic_number" value="{{ academicForm.academic_number.value }}" placeholder="Academic number">
<div class="help is-danger">
{% for error in academicForm.academic_number.errors %}{{ error }}{% endfor %}
</div>
Add required attribute to all inputs. I'm not confident in code style, but as a logical example:
<input ... name="account_number" required="{{school_role === 1}}" ... />
Add </div> to each section
Give each div a class of hide
Toggle the hide on change of the select
toggle the required
const ifs = [...document.querySelectorAll("[id^=if]")];
document.getElementById("school_role").addEventListener("change", function() {
const val = this.options[this.selectedIndex].textContent;
ifs.forEach(ifDiv => {
ifDiv.classList.toggle("hide", !ifDiv.id.includes(val))
const input = ifDiv.querySelector("input");
if (ifDiv.classList.contains("hide")) input.removeAttribute("required")
else input.setAttribute("required", true)
});
})
.hide {
display: none;
}
<div class="select">
<select name="school_role" id="school_role" required>
<option value="">--------</option>
<option value="1">Student</option>
<option value="2">Academic</option>
<option value="3">Employee</option>
</select>
</div>
<form>
<div id="ifStudent" class="hide">
<label class="label">Account number</label>
<input class="input" type="text" name="account_number" value="" placeholder="Account number">
<div class="help is-danger">
{% for error in studentForm.account_number.errors %}{{ error }}{% endfor %}
</div>
</div>
<div id="ifEmployee" class="hide">
<label class="label">Employee Number</label>
<input class="input" type="text" name="employee_number" value="" placeholder="Employee number">
<div class="help is-danger">
{% for error in employeeForm.employee_number.errors %}{{ error }}{% endfor %}
</div>
</div>
<div id="ifAcademic" class="hide">
<label class="label">Academic number</label>
<input class="input" type="text" name="academic_number" value="" placeholder="Academic number">
<div class="help is-danger">
{% for error in academicForm.academic_number.errors %}{{ error }}{% endfor %}
</div>
</div>
<input type="submit">
</form>

Filter Datalist input

I have two drop down list inputs ,both of them comes from datalist , i want that base on the input that the user choose, to filter the other input to show only relevant results .
I am rendering the data from python back to HTML page
The data contains company name and bank account number,
So i want base on the company that user choose to show only the relevant account to the selected company
<form id="the_form" method="POST">
{% csrf_token %}
From:
<input name="start_date" class="datepicker" type="date" value={{start_date}}/>
To:
<input name="end_date" class="datepicker" type="date" value={{end_date}}/>
<input type="text" list='List_of_Companies' data-search-in="Company" id="Input1" name="Companyname" placeholder="Choose a Company" value="{{ Company}}"/>
<input type="text" list='List_of_Accounts' data-search-in="Account" id="Input2" name="Accountname" placeholder="Choose an Account ID" value="{{ Account_Id}}"/>
<br> <br>
<button name="action" type="submit" id="showccounts" value="show">Show</button>
<button name="action" type="submit" value="download">Download</button>
<datalist id="List_of_Companies">
<select id="filenamelist" size="5" class="select">
{% for Company in info_list %}
<option value="{{ Company.3 }}">{{ Company.3 }}</option>
{% endfor %}
</select>
</datalist>
<datalist id="List_of_Accounts">
<select id="filenamelist" size="5" class="select">
{% for Company in info_list %}
<option value="{{ Company.0 }}">{{ Company.3 }}</option>
{% endfor %}
</select>
</datalist>
</form>
{% load staticfiles %}
<div id="loading" style="width:300px;height:300px;display:table-cell; vertical-align:middle; text-align:center">
<img src="{% static "app/images/Loading_icon.gif" %}" style="margin:auto">
</div>
<table id="theTable" hidden>
<thead>
<tr>
{% for c in columns %}
<th>{{ c }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for r in rows %}
<tr>
{% for c in r %}
<td>{{ c }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
{% block scripts %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

how to disable input type = text on check box click if i have many inputs of the same name

I'm getting many data and i'm looping into them in html so there are many inputs with the same name
My html code :
{% for Permission in Permissions %}
<tr>
<td style="text-align:center;"> {{Permission.perm_label}} </td>
<td style="text-align:center;"> <input type="checkbox" class="permUsersClass" id="permUsers" name="permUsers" value="permUsers" {% if Permission.perm_users != 0 %} checked {% endif %}> <input type="text" id="permUsersText" name="Users" value="{{Permission.perm_users }}" > </td>
<td style="text-align:center;"> <input type="checkbox" id="permProfile" name="permProfile" value="permProfile" {% if Permission.perm_profile != 0 %} checked {% endif %} > <input type="text" id="permProfileText" name="Profile" value="{{Permission.perm_profile }}"></td>
<td style="text-align:center;"> <input type="checkbox" id="permSchedule" name="permSchedule" value="permSchedule" {% if Permission.perm_schedule != 0 %} checked {% endif %}> <input type="text" id="permScheduleText" name="Schedule" value="{{Permission.perm_schedule }}"> </td>
<td style="text-align:center;"> <input type="checkbox" id="permAccount" name="permAccount" value="permAccount" {% if Permission.perm_accounting != 0 %} checked {% endif %}> <input type="text" name="Accounting" value="{{Permission.perm_accounting}}"> </td>
</tr>
{% endfor %}
My javascript functiom
$('.permUsersClass').change(function () {
$('input[name=Users')[0].disabled = !this.checked;
}).change();
In javascript how to disable specific text box and not just the first one

Putting URL variables into HTML form with JS or JQuery

I am trying to pass variables in the URL like this to fill a HTML and Liquid form and submit it once it's populated:
http://www.example.com/login?customer_email=admin#website.com&customer_password=123456
The closest thing I've found to what I'm trying to achieve is this question. I'm losing my marbles because I don't understand how the variables are put into the form.
Can someone please break it down / explain?
Here is the form code:
{% form 'customer_login' %}
<h1>Login</h1>
{% include 'form-errors-custom' %}
<label for="customer_email" class="hidden-label">Email Address</label>
<input type="email" value="" name="customer[email]" id="customer_email" placeholder="Email" {% if form.errors contains "email" %} class="error"{% endif %} autocorrect="off" autocapitalize="off" autofocus>
{% if form.password_needed %}
<label for="customer_password" class="hidden-label">Password</label>
<input type="password" value="" name="customer[password]" id="customer_password" placeholder="Password" {% if form.errors contains "password" %} class="error"{% endif %}>
<p>
Forgot your password?
</p>
{% endif %}
<div class="text-center">
<p>
<input type="submit" class="btn" value="Sign In">
</p>
or Return to Store
</div>
{% endform %}
If you are looking to get the parameters from the URL client side (using JS/Jquery, as per your tags), you can get the query string (using location.search) and extract the key/value pairs, then allocate them however you wish.
//var str = location.search
var str = 'customer_email=admin#website.com&customer_password=123456';
var pairs = str.split('&');
var email = pairs[0].split('=')[1];
var password = pairs[1].split('=')[1];
$('#customer_email').val(email);
$('#customer_password').val(password);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" value="" name="customer[email]" id="customer_email" placeholder="Email" autocorrect="off" autocapitalize="off" autofocus>
<input type="password" value="" name="customer[password]" id="customer_password" placeholder="Password" class="error"{% endif %}>
The parameters that are passed in the url like in your case are like the get request and can be received in the same way as you would receive the parameters submitted by the form with method="get". And then you put the variable in the value attribute of the form fields in current page.

Categories