So this is tough to describe but I cannot figure it out, I feel like i am close however!
Basically I have a list of things, that need to be organised.
lets pretend its books, I have all these books, with all the information on them (author, length, title, genre). If I wanted to search my array of books specifically for comedic books. I would tick the comedy tickbox and hit search.
I have gotten this to work easily! the tricky part is that I would like it to search straight away when it is selected, however my javascript searches through checkboxes to see which checkboxes are selected before it runs my code that eliminates the answers that are irrelevant. so it needs to be a checkbox value that is submitted.
Is there a way I can have an image that functions as a button, that carries a value of a checkbox...???
so far I have gotten this close:
<div class="wells">
<input type="image" value="comedy" src="img/pieces/comedy.png"
alt="comedy" onclick="myFunction()" checked>
</div>
I know myFunction works and does what it is told.
I literally need the value of the checkbox to be used as a submit button.
the long way is like this:
<img class="imgcomedy" src="img/pieces/comedy.png"> :
<input type="checkbox" class="roundedOne" name="comedy" value="comedy">
then the user would scroll to the submit button and hit send, sending the value of the checkbox to the function myFunction().
I know myFunction works and does what it is told.
I literally need the value of the checkbox to be used as a submit button.
You can give image which behaves as checkbox, when you click on submit it gives values like true.or false for that check box.
One possible solution, depending on what your actual requirements are...
You can use a <button> instead of a checkbox; the contents of a button are fully customizable with essentially any HTML...
<button type="submit" class="roundedOne" name="comedy" value="comedy">
<img class="imgcomedy" src="img/pieces/comedy.png">
</button>
You may want this as a submit button, and/or attach a javascript click-handler.
If you need several categories chosen together, such as "list things in either category drama or comedy" which you can do with checkboxes, you have several options.
You could also include a checkbox but keep it hidden, and then check/uncheck it by using your click-handler attached to the button.
You could keep an <input type="hidden" value=""> field and set the value in your click-handler, adding and removing categories; for example
initial: value=""
after clicking the comedy button: value="comedy"
after clicking the dramay button: value="comedy,drama"
after clicking the comedy button again: value="drama"
Related
I'm trying to make my radio buttons look like normal buttons - how would I do that? I have seen a lot of other questions regarding this but i am not able to get a definite answer. This is what I have tried:
<input name="question${questionNumber}" id="q&a" class="press" type="radio" value="${letter}"><label for="q&a">${letter}</label>
However, my javascript code is not logging it and I am still having to click the radio button for the javascript to recognise that I have clicked the button and it's value is only found if I click a radio button. How do I solve this issue?
Why use a radio button at all if you want it to look like a normal button? Radio buttons are for selecting 1 option out of many, like in a multiple-choice test. Their design reflects this purpose and most people know how to interact with radio buttons when they see them. If you use a normal button, you can use
Element.addEventListener(“click” function() {
// do your stuff
})
I have a workaround to this, so I'm more just curious than actually needing a solution.
I have a form with client side validation that, if validation passes:
Hides the form (with user input values intact)
Builds and shows an unordered list in the same page summarising what will be submitted
Within the summary list, provides the user the option to make changes if they wish to do so before finally submitting the form.
One of the fields is a radio button group, where each option has a value which is a combination of 2 data when JavaScript is off:
<input type="radio" name="date" value="{productCode}: {DD Mmm YYYY}">
When JavaScript is present, the value is split:
<input type="hidden" name="product-code" value="{productCode}">
<input type="radio" name="date" value="{DD Mmm YYYY}">
This split happens when the user proceeds past validation to the summary page state.
A. If they go on directly to submit the form, their date selection persists and all works fine.
B. But (in Chrome 47 at least) when the user gets to the summary state and then makes changes (to other fields), their date selection is lost on form submission, and so server side validation reports an error.
This happens even though, when the user chooses to makes changes:
The date selected is not messed with – the form is merely shown again and the summary ul cleared of text and hidden
The selected radio button still shows as selected
Here's the jQuery function called when the user decides to make changes:
function changeBooking() {
// assume changes will be made so clear summary values
$('#summary li[id^="summary-"] > [data-value]').text('');
// switch views from summary back to booking form
$('#summary, #do-booking').hide();
$('#book fieldset.panel, #do-summary').show();
$('#book').scrollView(20);
}
And it still happens when JavaScript adds an explicit checked attribute to the selected date after splitting the date and code values.
So I infer there is some sort of internal browser event happening that I can't figure.
I'd be grateful if someone can suggest why there should be a difference in radio button selection persistence between cases A and B at all.
For what it's worth, my workaround is to have the initial values of the radio group be presented in name="code-date", a field value that never gets messed with. And the JavaScript splits the value into 2 hidden fields – name="product-code" and name="date" – which are initially blank and remain so when JavaScript is off.
I have a form that saves user entered values on submit with php.
Some of the fields are in div's that are display:hidden until an onclick or onchange function changes that div to show.
How can I show only the divs containing fields with saved values after the form has been submitted? I have saved the values in the always visible fields but cannot trigger their functions.
I am using very little jquery because I am new to the syntax and would prefer to implement solutions I can understand and adapt. Simple jquery is acceptable if it is a better/quicker/easier solution.
Thanks
Code Example:
<input type="radio" id="customer" name="jobtype" value="customer" onclick="getJobType()" autofocus>Customer
<input type="radio" id="store" name="jobtype" value="store" onclick="getJobType()">Store
<span id="customerjobs" style="display:none">
<select id="customer" name="customer" onchange="createJobsList(this.value)">
*various options*
</select>
<span id="jobslist"><br></span>
</span>
The first span (id=customerjobs) is initially hidden. Upon selection from the radio's, all but the corresponding span is set to display:none and the selected is set to display:block. On submit, the selected radio is saved, but the onclick isn't called to show the span.
The second span (id=jobslist) content is populated by innerHTML using the results of an ajax call to PHP when a selection is made. On submit, the selected option is saved, but the onchange isn't called to fill the span.
So I need to trigger the onclick of a saved radio value to show my content and trigger the onchange of a saved select to populate additional content.
Note: I used onblur with javascript to set the focus initially so any action would trigger the content but it caused an unnecessary pause in filling the form that I didn't want.
Page loads with only a radio selection.
User clicks radio button.
Onclick function changes style of span id=customerjobs to display:block.
The select input inside the span is now visible. The user selects an option.
Onchange function makes an ajax call to request information from the server which is placed in span id=jobslist.
User submits form to same page.
Form saves entered values so they are still selected when page reloads.
Onclick and onchange functions are not triggered by PHP saved values so steps 3 and 5 never occur. Page is left with only the radio buttons unless it is clicked again.
Well, I have a jsfiddle to illustrate my problem using default selections because I cannot use PHP to save entered values.
Imagine the form has just been submitted and the values saved are the checked radio button(customer) and the selection from the drop down(1) which adds the word "customer".
Ideally, the entire form would still be visible (The selected radio, the selected option and the content added to the last span "customer").
Instead, only the selected radio is visible unless it is clicked again to unhide the select drop down. The drop down retains its' value as well, but the content in the last span will only appear onchange.
http://jsfiddle.net/L5H2u/31/
Try it out and advance thanks for any suggestions.
Can you hook a function to onload that checks the radio buttons and simulates the click by calling getJobtype()? That will get the initial case where the radio button is already the way the user wants it. Further clicks will work as you planned.
Edited to add: If I understand you right, all is well the first time the page is loaded because the user has to click something and that runs your getJobType() function. However, when the page is reloaded, the correct radio button is already checked, the user doesn't change anything, and your function doesn't run. If that's correct, running getJobType() from onload should fix it.
You may need something like <input type="hidden" id="firstrun" value="true"> The PHP would set that to false on subsequent loads of the page, and the onload function would only make things happen if "firstrun" was false. Edit: You don't need this because getJobType() has no default action; keep reading.
Edited still more: You have checked="checked' on the Customer radio button, so if the user is a customer, even the initial run doesn't reveal the hidden material.
Remove checked="checked" when the page is initially loaded so that on the initial presentation, neither button is checked.* Then add window.onload=getJobType; to the end of your JavaScript.
On the initial load, getJobType() will do nothing since it checks both buttons and has no default action. When a button is clicked, getJobType() will run and act based on the button that was clicked.
When the page is loaded a subsequent time, one of the buttons will be checked and when onload runs getJobType() it will perform the corresponding action.
The radio buttons, SELECT values, and any other form elements that are preserved and "reflected" by the server-side PHP will be correct when the form is loaded the second (and subsequent) times. Where you need an onload JavaScript function is when one of those values also changes something else, such as making a hidden DIV visible. If there are functions other than getJobType() that manipulate the DOM, it will likely be cleaner to write an init function that sets up the DOM based on the values of the form elements as preserved by the PHP process.
* I normally advocate having some button checked by default so that the user can always get back to the initial state. This case seems to be an exception.
I have a login page with 2 radio buttons "new account" and "existing user". when "new account" is selected the "User" field auto populates with the text "New Account" and the "Password" field remains blank. I need to grey out the fields so that they are uneditable when the "new account" radio button is selected, but still pass along the information in the fields because it is used to gain access to the database. I can disable the fields to get the desired uneditable greyed out fields, but the information does not get passed along to the database.
I have tried to fix this by creating two hidden fields (which auto populate with the needed information for database access) to take the place of the "user" and "password" field which allows me to disable the visible fields while "new account" radio button is clicked and which still passes along the new user login info that never changes. This works fine until I try to login as an existing user, in which case my two hidden fields do not auto populate with the users input for their existing account information.
There may be a much simpler approach to fixing this problem, but all of my research and trials have not been successful yet. I have been reluctant to ask this question as it seems so simple and frequently used approach for a login page, but all of my searching has not yielded any thing that has worked yet. I appreciate any input or navigation in the right direction.
I'm pretty sure the correct and painless solution for your problem is to use two different form tags (take care to not nest them) and show/hide the form depending on the selected radio button.
And for the convenience of your user you should copy the username from one form to the other if he has already filled the user field and switches to the other version later.
EDIT
The complete solution:
HTML
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm1"> Form 1</label>
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm2"> Form 2</label>
<hr>
<div class="hiddenForm" id="divForm1">Put form 1 in here</div>
<div class="hiddenForm" id="divForm2">Put form 2 in here</div>
JS
// if someone clicks on one radio button
$('.formSwitcher').change(function(){
// get the form id we want to show (from the "data-form" attribute)
var formIdToChange = $(this).data('form');
// hide all forms first
$('.hiddenForm').hide();
// show the specific form
$(formIdToChange).show();
});
// initially hide all forms
$('.hiddenForm').hide();
// initially call the change method if one radio is already selected on page load
$('.formSwitcher:checked').change();
Are you saying that you need to change the existing user fields because they will grant access to the database? I think what you want to do is to change the properties of fields depending on what is selected. For example if you need the auto populate fields to be set when the user clicks new user then write something like
document.form.AutoPopUser.value="required value"
and when the person clicks on the existing user you can do
document.form.AutoPopUser.value=""
or if even having that part exist will mess up the existing user log in then you could delete that entire section by putting it inside a div and creating or destroying it depending on the selected option. I feel like I'm not being very clear but I think what you need is a clever set of onClick functions to get rid of things you dont need and add in the ones you do need. If you could post some code to go with this that would be awesome.
I've seen this question asked in .asp threads but I'm not using .asp so the answers aren't very helpful. I'm using html but can use javascript if need be to accomplish this goal.
What I have is a standard html input with a datalist for the available options like so:
<input id="test_input" list="test" name="test" placeholder="Type your answer" value="" />
<datalist id="test">
<select>
<option>Apples</option>
<option>Oranges</option>
<option>Grapes</option>
</select>
</datalist>
The problem is that if someone types "g," or "ap," or anything at all, actually, and press the submit button, it does not select the default record. It will narrow the list down, but typing "Grapes" and pressing enter does not get the same result as actually clicking on "Grapes" in the select.
How do I force first record to be selected, even if the user only types a portion of that record?
I don't think this is the best method, since you can't "reset" when you wrote. So when i start to type apple, and i missing "l", i will type appk, then i say "oh god, i missed", i retry. I'll type apple again, but the typed value will be appkapple, if you don't make a setinterval to clear the already typed value after a time, but that does not makes sense.
Why you don't try an autocomplete, or a select field with options?