I have a form using the jqtransform jQuery plugin that gives forms an aesthetic makeover. However, I can't get my onclick events to fire.
I have a form setup similar to this:
<select name="person">
<option value="1">Yes</option>
<option value="2">No</option>
<option class="maybe" value="0">Maybe</option>
</select>
I also have a hidden div container which expands the form:
<div class="expander" style="display:none;">
More info <input type="text" name="moreinfo" />
</div>
Then the final piece of the puzzle:
<script>
$(".maybe").click(function () {
$(".expander").show("slow");
});
</script>
Any help would be greatly appreciated.
try using the change event instead of click.
http://api.jquery.com/change
here's a working example: http://jsfiddle.net/dwick/Sh4PA/
This is a dirty workaround, but works for me...
change the type of your input field to reset, then add an onclick event handler
<input type='reset' value='submit' onclick='$(#myFormId).submit()' />
Related
I would like to know how to go about watching for the first change event on a series of form fields/input elements (I have multiple selects/dropdowns and text inputs), and trigger something, but only trigger it once. Not every time an item is changed. And any one of the fields can trigger it.
My situation is I have a services calculator that outputs both a quote for self funding and also estimates which government package level will cover their needs, there's a lot of select input elements/dropdowns and I want any one of these to be able to trigger the event above but only once, (first interaction with the calculator basically) but they are not in a form because we don't need to submit anything, just display the results (this is dynamically updated as fields are changed using .onchange). All of this calculation logic is working correctly I don't need help with any of that.
I just want to know how one would approach this with vanilla JS, if at all possible?
Use event delegation: add an input event listener to an element that's a parent of all the <form>s (it could be the document.body):
let hasRun = false;
document.querySelector('.container').addEventListener('input', (e) => {
if (hasRun) return;
hasRun = true;
console.log('Handler running');
});
<div class='container'>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
</div>
Or, with the once option (warning, not supported in IE):
document.querySelector('.container').addEventListener(
'input',
(e) => {
console.log('Handler running');
},
{ once: true }
);
<div class='container'>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
</div>
I have a form being rendered in a React component. Inside the form are an input field, an option dropdown, and a button to submit.
Basically when the button is clicked, I want to pass the selected option into the onSubmit handler, which in the code below is chef.id.
The problem is, all the chef objects are mapped inside the form, and I'm not sure how to extract the selected chef, to pass into onSubmit.
I didnt use this for the event listener methods because I'm using redux, though I suppose that's not relevant to this particular problem.
return (
<div className="form-input">
<form onSubmit={handleSubmitRecipes(**chef.id**)}>
<input onChange={handleChange}/>
<select>
{chefs.map(chef => <option value={chef.name}>{chef.name}</option>)}
</select>
<button>Create</button>
</form>
</div>
)
Thanks in advance!
If you are willing to try some original DOM operations, maybe below codes can help you.
<form>
<input name="name" />
<select name="age">
<option>10</option>
<option>20</option>
<option>30</option>
</select>
<button>submit</button>
</form>
const [form] = document.getElementsByTagName("form");
form.addEventListener("submit", function(event) {
console.log(form.age.value);
console.log(form.name.value);
event.preventDefault();
}, false);
I need assistance determining when my form was submitted via an onChange event for a Select as opposed to the user clicking on the Submit button.
To complicate matters, I need to be able to identify the difference in PHP.
Sample HTML:
<form name='editdata' method='post' action='/editpage/recordnumber'>
<select name='select1' onchange='this.form.submit()'><options...></select>
<select name='select2' onchange='this.form.submit()'><options...></select>
<select name='select3' onchange='this.form.submit()'><options...></select>
<input type='submit' value='Submit' />
</form>
Ultimately, I just need something to latch onto using PHP that identifies whether the form was submitted by an onChange event or by a press of the Submit button.
So far I have found that I can name my submit button 'submit'. This will set $_POST['submit'], thereby telling me that the user clicked the button. However, my onChange event this.form.submit() which is applied to a couple of my Selects stops functioning when I add the name attribute to my submit button.
If I could add some sort of queryString to the end of my submit URL with one method or the other, I think that would get the job done.
You could set a hidden field which gets updated by the event:
<form name='editdata' method='post' action='/editpage/recordnumber'>
<input type="hidden" name="submitted_on_change" value="0">
<select name='select1' onchange='form_submit()'><options...></select>
<select name='select2' onchange='form_submit()'><options...></select>
<select name='select3' onchange='form_submit()'><options...></select>
<input type='submit' value='Submit' />
</form>
<script>
var form_submit = function() {
// update the hidden field to 1
// then submit the form
}
</script>
You can call multiple functions inside your onchange and fill another field with the name of the select field that caused the submission of the form (or it is empty when submit button was pressed):
<form name='editdata' method='post' action='/editpage/recordnumber'>
<input type='hidden' name='field' value='' />
<select name='select1' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<select name='select2' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<select name='select3' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<input type='submit' value='Submit' />
</form>
I have a form with select box. With JavaScript on, I take the change event to define the options-values as location.hrefs:
$('select').change(function(){
window.location.href = $(this).val();
});
With JavaScript off, I have a basic form with a submit button. To follow the targets given in the option values, I have to set them to the form action. Do you have any idea how I could get only the selected option as form target e.g. with any CSS selector or something like that?
The form:
<form action="test-1.html">
<fieldset>
<select id="lorem">
<option value="test-1.html">test1</option>
<option value="test-2.html">test2</option>
<option value="test-3.html">test3</option>
</select>
<input type="submit" value="senden" class="submit" />
</fieldset>
</form>
You will have to do this in server-side code. Without JavaScript enabled, there is no way to dynamically change anything in an HTML DOM.
So, submit to some intermediary page that's sole purpose is to redirect and perform the logic there.
How would I go about hiding the select element and whenever I click the button it would get displayed and when I click it again it would hide it? So far I have the following code It seems to not be working as I expected it to. I know toggle is probably the method in solving this problem in jquery.
<form id="myForm">
<input type='button' name='button' id='testbtn' value='Test Button' />
<br>
<select style="visibility:hidden" id='List' name='List'/>
</form>
$("#testbtn").click(function() {
$('#List').toggle();
});
Change:
<select style="visibility:hidden" id='List' name='List'/>
</form>
To:
<select style="display:none" id='List' name='List'/>
</form>
jQuery.toggle modifies the display CSS property
http://api.jquery.com/toggle/
Change visibility:hidden to display:none. JQuery toggles the display attribute.
<form id="myForm">
<input type='button' name='button' id='testbtn' value='Test Button' />
<br>
<select style="display: none;" id='List' name='List'/>
</form>
$("#testbtn").click(function() {
$('#List').toggle();
});
http://jsfiddle.net/apQYD/1/
Don't use visibility:hidden in your inline style. Use display:none instead.
as far as I know, toggle() relies on the display property, not the visibility one.
Try setting display:none instead of visibility:hidden.
<select style="display:none" id='List' name='List'/>
Here mention clearly that
The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
show i suggest another way to use class and remove style="" from select
css :
.hide { display: none };
jQuery:
$("#testbtn").click(function() {
$('#List').toggleClass('hide');
});
DEMO