Alpine.js Data isn't Updating - javascript

The value of submitDisabled isn't affected/updated by the function submitActivator WHEN it's evaluated in the button below
<script>
window._alpineSubmitObj = {
submitDisabled : false,
submitActivator: (e)=> {
this.submitDisabled = (e.target.value == "select");
console.log(this.submitDisabled) // here the value is successfully updated.
}
}
</script>
<div x-data="_alpineSubmitObj">
<form method="post" action>
<select x-on:change="submitActivator" name="name">
<option value="select">Select</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
<button
x-on:click.prevent="console.log(submitDisabled)" // the value isn't updated, it's always false
x-bind:disabled="this.submitDisabled"
type="submit">Submit
</button>
</form>
</div>

You have two errors. The first one is in submitActivator method where you bind this to the wrong context with the arrow syntax. Using submitActivator(e) {...} we access the correct context, so submitDisabled can be set. The second error is at the button, when you use x-bind, you don't need to add the this. prefix to access properties: x-bind:disabled="submitDisabled".
I also provide a more compact version of the problem where I use x-model directive to access the dropdown's value. We can skip using submitActivator there.
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs#3.x.x/dist/cdn.min.js"></script>
<script>
window._alpineSubmitObj = {
submitDisabled : false,
submitActivator(e) {
this.submitDisabled = (e.target.value == "select");
console.log(this.submitDisabled)
}
}
</script>
<div x-data="_alpineSubmitObj">
<div x-text="`Value of submitDisabled: ${submitDisabled}`"></div>
<form method="post" action>
<select x-on:change="submitActivator" name="name">
<option value="select">Select</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
<button x-on:click.prevent="console.log(submitDisabled)"
x-bind:disabled="submitDisabled"
type="submit">Submit
</button>
</form>
</div>
<h2>Using x-model</h2>
<div x-data="{selector: 'select'}">
<select x-model="selector">
<option value="select">Select</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
<button :disabled="selector == 'select'" type="submit">Submit</button>
</div>

Related

Is there any way where I can remove custom validations in HTML and add alerts?

I am trying to remove custom validations in HTML that occur with "required" attribute in the form. I do want the validations but I want to introduce "alerts" for the inputs.
<form>
<div>
<span>Search_word</span>
<input type="text" required></input>
</div>
<div>
<span>Frequency</span>
<select required>
<option disabled selected value></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button>Search</button>
</div>
</form>
Even when I am setting alerts with onlick() method on both, they are coming up twice. If I set up alert only on form, then It's not coming up for the dropdown option. And I am not able to figure out how to remove the custom validations. Is there a way I can turn them to alerts?
You can use classes on HTML to listen the event on JavaScript:
HTML:
<form>
<div>
<span>Search_word</span>
<input type="text" class="required"></input>
</div>
<div>
<span>Frequency</span>
<select class="required">
<option disabled selected value></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button id="search">Search</button>
</div>
</form>
JavaScript:
document.getElementById('search').onclick = function changeContent() {
var requireds = document.getElementsByClassName('required');
var error = 0;
for (var i = 0, len = requireds.length; i < len; i++) {
if (requireds[i].value == "") {
var error = error + 1;
}
}
if (error > 0){
if (error == 1) {
alert("There is a required field to inform");
} else {
alert("There are requireds fields to inform");
}
} else {
// ....
}
}
EDIT
In order to keep the HTML validation and introduce a alert message, you can use in HTML:
<form>
<div>
<span>Search_word</span>
<input type="text" required oninvalid="this.setCustomValidity('Enter the search word here'); alert('You have to enter a search word');"
oninput="this.setCustomValidity('')">
</div>
<div>
<span>Frequency</span>
<select class="required" required oninvalid="this.setCustomValidity('Select a frequency'); alert('You have to select a frequency');"
oninput="this.setCustomValidity('')">
<option disabled selected value></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button id="search">Search</button>
</div>
</form>

How to reset tail.select list to default?

How can I reset select values from tail.select (Link to https://github.com/pytesNET/tail.select) using JS or JQuery, I tried changing the value from select, but it doesn't help.
<select class="form-control searchSelect">
<option value="" selected disabled> </option>
<option value="1">V1</option>
<option value="2">V2</option>
<option value="3">V3</option>
</select>
<button type="button" class="resetList">Reset List</button>
<script>
let tselect = tail.select('.searchSelect', {
search:true,
deselect:true,
hideSelected:true,
hideDisabled:true
});
$(document).on('click', '.resetList', function(){
$('.searchSelect ').val();
$(".searchSelect option:selected").removeAttr("selected");
$('.searchSelect').val(null).trigger('change');
});
</script>
I have tried till
$('.searchSelect ').val();
$(".searchSelect option:selected").removeAttr("selected");
$('.searchSelect').val(null).trigger('change');
I read the documentation, but I couldn't figure it out.
You can use the reload() method of the tail.select() object:
let tselect = tail.select('.searchSelect', {
search:true,
deselect:true,
hideSelected:true,
hideDisabled:true
});
document.querySelector("button").addEventListener("click", () => tselect.reload());
<script src="https://cdn.jsdelivr.net/npm/tail.select#latest"></script>
<select class="form-control searchSelect">
<option value="" selected disabled> </option>
<option value="1">V1</option>
<option value="2">V2</option>
<option value="3">V3</option>
</select>
<button type="button" class="resetList">Reset List</button>
If you don't want to clear the text that is in the filter input, then use can use the query() method without arguments:
let tselect = tail.select('.searchSelect', {
search:true,
deselect:true,
hideSelected:true,
hideDisabled:true
});
document.querySelector("button").addEventListener("click", () => tselect.query());
<script src="https://cdn.jsdelivr.net/npm/tail.select#latest"></script>
<select class="form-control searchSelect">
<option value="" selected disabled> </option>
<option value="1">V1</option>
<option value="2">V2</option>
<option value="3">V3</option>
</select>
<button type="button" class="resetList">Reset List</button>

page is still reloading with event.preventDefault();

if the select drop-down menu has value of NULL, it should stop the page from loading. The jQuery works alerting the user of the issue, however the page still continues to the next page. Any assistance would be superb. Thanks
Luke
<fieldset class="form-group">
<label for="question-1">1. What age group are you?</label> <br>
<select class="drop-down" id = "ageChoice">
<option value="">Please Select</option>
<option value="16minus">16 or below</option>
<option value="16-18">16 to 18</option>
<option value="19-25">19 to 25</option>
<option value="26-34">26 to 34</option>
<option value="35-42">35 to 42</option>
<option value="43-50">43 to 50</option>
<option value="51-60">51 to 60</option>
<option value="61plus">61+</option>
</select>
</fieldset>
<input class="btn btn-primary" type="button" id= "next" value="Next" onClick="location.href='first-test.html' ">
$("#next").click(function () {
var age = $('#ageChoice');
if (age.val() === '') {
event.preventDefault();
alert("Please select your age group, thank you.");
}
else
return;
});
Ok, so because you have two click handlers, the event is being processed twice. The 'Default' you are trying to prevent is not the onClick="location.href='first-test.html' . That is being processed after your jQuery click function. So we take the onClick out of the html. and add the functionality to the jQuery click event (we could do it either way, but becuase you already have most of the code set up already we'll do it this way)
Here is the reworked code:
<fieldset class="form-group">
<label for="question-1">1. What age group are you?</label> <br>
<select class="drop-down" id = "ageChoice">
<option value="">Please Select</option>
<option value="16minus">16 or below</option>
<option value="16-18">16 to 18</option>
<option value="19-25">19 to 25</option>
<option value="26-34">26 to 34</option>
<option value="35-42">35 to 42</option>
<option value="43-50">43 to 50</option>
<option value="51-60">51 to 60</option>
<option value="61plus">61+</option>
</select>
</fieldset>
<input class="btn btn-primary" type="button" id= "next" value="Next">
and the jquery:
$("#next").on('click', function (event) {
var age = $('#ageChoice');
if (age.val() === '') {
alert("Please select your age group, thank you.");
} else {
location.href='first-test.html'
}
});

assign a javascript variable value depends on html drop down list section

I have a drop html list. If I select an option from dropdown, I have to assign dropdown value to the javascript variable and display it on html
Here is my code
HTML:
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
Javascript:
function changeHiddenInput (objDropDown)
{
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}
But whenever I am submitting the values,it giving error. anything wrong here ?
DEMO
On your demo, you've selected the default onLoad option in jsfiddle.
This causes the site to wrap your entire code within a callback function, meaning that your showit function is not a global function as required by DOM0 inline event handlers.
Change this option to no wrap(head) and it will work.
The code you have will work good on a page, assuming you have the <script> tags for the javascript.
Fiddle here
About your <button onclick="changeHiddenInput (objDropDown)">Try it</button>, objDropDown is not defined... and also add type="button" otherwise the default is a submit button.
I made some changes for the demo, so my code is:
html
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
javascript
var select;
window.onload = function () {
select = document.getElementById('dropdown');
console.log(select);
}
function changeHiddenInput(objDropDown) {
console.log(objDropDown);
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}

Refreshing select after selected option is changed by jQuery

I'm updating the selected option programmatically using jQuery, but nothing changes in the browser. (That is, the old selected option remains selected instead of switching to the newly selected option.) Suggestions?
Thanks. --Jeff
I have a simple form like this:
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p> Task A: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form></div>
and my jQuery code looks like this:
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var form = $(this).parents('form');
var assigned = form.find(':selected').first().val();
form.find(':selected').each(function(index){
$(this).val( assigned ).change();
});
}
);
});
</script>
I'm updating the selected option programmatically using jQuery
Not as far as I can see. You're re-setting the value of the selected option, but not doing anything as far as I can tell to the actual select box.
To change a select box, you need to identify it, then call val on it, not one of its option elements.
I can't make out what you want your input[name="button1"] to do, but here's an example of updating a select box: Live copy | source
HTML:
<select id="theSelect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="button" id="theButton" value="Click me">
JavaScript:
jQuery(function($) {
$("#theButton").click(function() {
$("#theSelect").val("2");
});
});
Separately, as j08691 pointed out in the comments, you can't assign the same id value ("assigner") to more than one element. id values must be unique in the document. Your code doesn't show you using that id, so this may well be unrelated, but it's worth flagging up.
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p>
Task A: <select name="assignment[]" id="assigner2">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner3">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var assigned = $("#assigner").val();
$('#form1 select').val( assigned );
}
);
});
</script>

Categories

Resources