Probably a stupid question but please bear with me on this one:
Is it possible, with the use of jQuery/javascript, to make it so that when you click one button it clicks/submits multiple buttons?
This will probably help make answering the question easier:
<div class="form-item form-type-select form-item-field-status-10-field-status-und-select">
<select size="0" name="field_status[10][field_status][und][select]" id="edit-field-status-10-field-status-und-select" class="select-or-other-select form-select chzn-done" style="width: 100px; display: none;">
<option value="">- select -</option>
<option selected="selected" value="In">In</option>
<option value="Gym">Gym</option>
<option value="Lunch">Lunch</option>
<option value="Out">Out</option>
<option value="select_or_other">Other</option>
</select>
<div id="edit_field_status_10_field_status_und_select_chzn" class="chzn-container chzn-container-single" style="width: 100px;" title=""><a tabindex="-1" class="chzn-single" href="javascript:void(0)"><span>In</span></a>
<div style="left: -9000px; width: 98px; top: 25px;" class="chzn-drop">
<div class="chzn-search">
<input type="text" autocomplete="off" style="width: 63px;">
</div>
<ul class="chzn-results">
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_0">- select -</li>
<li style="" class="active-result result-selected" id="edit_field_status_10_field_status_und_select_chzn_o_1">In</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_2">Gym</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_3">Lunch</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_4">Out</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_5">Other</li>
</ul>
</div>
</div>
</div>
This way:
<input type="button" id="triggerAll">
<input type="button" class="button1">
<input type="button" class="button2">
<input type="button" class="button3">
$('#triggerAll').on('click',function(){
$('.button1,.button2,.button3').trigger('click');
});
Or this way:
<input type="button" id="triggerAll">
<input type="button" class="processed">
<input type="button" class="processed">
<input type="button" class="processed">
$('#triggerAll').on('click',function(){
$('.processed').trigger('click');
});
Or this way:
<form class="monitorChanges">
<label>
Pick one:
<select data-defaultvalue="" name="other">
<option value="" selected></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</label>
<label>
Other:
<input type="text" data-defaultvalue="" name="other">
</label>
<input type="submit">
</form>
<input type="text" value="Trigger All" id="triggerAll">
$('.monitorChanges').on('change keyup',"input,textarea,select",function(){
var defaultValue = $(this).data('defaultvalue');
if ($(this).val() !== defaultValue){
$(this).parent().parent().find('input[type="submit"]:not(.processed)').addClass('processed');
}
else {
$(this).parent().parent().find('input[type="submit"].processed').removeClass('processed');
}
});
$('#triggerAll').on('click',function(){
$(this).parent().find('form input[type="submit"].processed').trigger('click');
});
$('#mybtnId').click(function(){
$('button, input[type=button]').not('#mybtnId').trigger('click');
});
Here is an example specific to you:
$('.processed').on('click', function (e) {
//real event
if (e.originalEvent !== undefined) {
$('.processed').click();
}
//manually triggered event
else {
alert($(this).text() + ' triggered');
}
});
Hope this helps! You can see it working in this jsFiddle example
I came up with a solution that does the trick for me:
// Find input(s) that have changed. Add class to their hidden submit button.
$(function() {
$("input, select").change(function() {
$(this).closest('td').find('input.ajax-processed').addClass("changed");
});
});
// One button to submit all input(s) that have changed.
$('.submit-all').click(function(){
$('.changed, input[type=button]').not('.submit-all').trigger('click');
});
Thanks guys for all of your help. It took a combination of all of your advice to get this beast working and it also helped me to rethink what I was trying to accomplish.
That's what worked for me, using pure JavaScript. I used the onclick event on a list item (li) containing two reset button's. They control different form's and one of them is not displayed in the list item (style="display:none;"). Of course, you can make the same implementation in any type of input.
<ul>
<li onclick="document.getElementById('btn-clear-1').click(); document.getElementById('btn-clear-2').click();">
<input class="btn" id="btn-clear-1" form="frm1" type="reset" value="Clear" />
<input class="btn" id="btn-clear-2" form="frm2" type="reset" value="Clear" style="display:none;" />
</li>
</ul>
But what I did is unnecessary code for what I was looking for. It could be <li onclick="document.getElementById('#frm1').reset(); document.getElementById('#frm2').reset();">Clear</li>
(Commentary made only to avoid bad coding in this board)
Related
I'm working on an assignment and I'm having some trouble.
I have an input, select and button that needs to be cloned when pressed that button. Once it is pressed, I need to have another button that when clicked makes disappear the cloned item.
So far I have everything up until the last button that makes it disappear.
Here's my code:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" id="menos"/>')).appendTo(".grupo-tel");
});
});
$("#menos").click(function() {
$(this).closest('div').find('#todo-tel').remove();
});
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>
You need to use classes instead of ids, since ids need to be unique
You need to use event delegation $(document).on("click", ".menos", function() {})
Check code below:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" class="menos"/>')).appendTo(".grupo-tel");
});
$(document).on("click", ".menos", function() {
$(this).closest('.nuevo-tel').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>
I don't know how to put this. This has got a bit messy. I couldn't use the right words to ask the question. Here is my code:
<div id="addfieldcontainerdropdown">
<div id="addDropdownfield">
<div id="div0">
<select name="0" style="margin: 20px" id="0">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input style="margin: 7px" id="1" placeholder="Value" onkeyup="check_if_value_set(this); return false;"
type="text">
<span style="margin: 7px;cursor: pointer;" onclick="remove_fields(this);return false;"><iclass="fa fa-times"></i></span>
</div>
<div id="div2">
<select name="2" style="margin: 20px" id="2">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input style="margin: 7px" id="3" placeholder="Value" onkeyup="check_if_value_set(this); return false;"
type="text">
<span style="margin: 7px;cursor: pointer;" onclick="remove_fields(this);return false;"><i class="fa fa-times"></i></span>
</div>
<div id="div4">
<select name="4" style="margin: 20px" id="4">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input style="margin: 7px" id="5" placeholder="Value" onkeyup="check_if_value_set(this); return false;"
type="text">
<span style="margin: 7px;cursor: pointer;" onclick="remove_fields(this);return false;"><i class="fa fa-times"></i></span>
</div>
</div>
<a href="javascript:void(0)" onclick="show_new_text_field(this);event.preventDefault();return false;" style="cursor:pointer">
<span id="add_new_span" class="addnew" style="float: none;margin-left: 1%;"><i class="fa fa-plus fa-fw"></i>Add New Field</span>
</a>
</div>
You can see there is a function named "show_new_text_field(this)" at the bottom of the code. Using this function, i need to get the id of say, div4 or select box of id 4. How can this be done ? I tried using prent() and closest(). Nothing worked. Any type of suggestions would be appreciated.
Thanks in advance !!
Something like this?
var lastDiv = $("[id^=div]").last(); //Get Last div whose ID begins with "div"
var lastDivId = lastDiv.attr('id'); //Get ID of that div
var firstSelect = lastDiv.find('select').first(); //Get the first 'select' of that div
var firstSelectId = firstSelect.attr('id'); //Get that select's ID
console.log("Last Div: " + lastDivId); // "Last Div: div4"
console.log("First Select in " + lastDivId + ": " + firstSelectId); //"First Select in div4: 4"
In the event your div won't always start with "div", you could just select the last child div of your parent (addDropdownfield) by doing this:
var lastDiv = $("#addDropdownfield div").last(); //Get all children divs of addDropdownfield - from that list, just the last one
I used Chosen plugin in angular this is the snippet of the code
<select ng-model="vendor_value" ng-options="vendor.text for vendor in vendors" ui-jq="chosen" ui-options="{width: 300px}"></select>
then this will rendered in the browser
<select ng-model="category_value" ng-options="category.text for category in categories" style="border-color: red; display: none;" ui-jq="chosen" ui-options="{width: '300px', no_results_text: 'Press enter to add ', placeholder_text_single: '' }" class="ng-pristine ng-untouched ng-valid">
<option value="?" selected="selected" label=""></option>
<option value="0" label="Games">Games</option>
<option value="1" label="Baby">Baby</option>
<option value="2" label="Shoes">Shoes</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 300px;" title="">
<a class="chosen-single chosen-default" tabindex="-1"> <----- I want to insert a class after form is submitted in the angular controller
<span>Select an Option</span>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
In this line
<a class="chosen-single chosen-default" tabindex="-1">
I want to insert a class after form is submitted. How can I insert class in a dynamically created html line by chosen plugin in angular controller?
I need some help displaying a div with a form inside of it whenever someone selects a certain option from a tag. My code is this:
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
And I want to display the last form when the email option is selected. I kinda want it to work like this: http://www.apple.com/privacy/contact/ High standards I know but whatever haha Thanks in advance for any help!
Are you looking for something like this? http://jsbin.com/okakuy/edit#javascript,html
Whenever the select option is changed, we hide whichever div is visible, and show whichever div has the current select value as its id attribute.
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
Coupled with this markup:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>
I am trying to populate data in my fields depending on the value selected in the drop down box. I have passed the dropdown option select to the javascript function, but having problem in updating the form fields. Please check my code for the error I've committed.
This is my html code:
<div class="form-ui">
<span class="form-elements reqField">
<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
<option value="1">Please Select</option>
<option value="2">Mrs.Jane Smith</option>
<option value="3">Mr.Junior Smith</option>
</select>
</span>
<span class="form-elements reqField">
<select id="itle1" class="dropdown">
<option value="1">Mr.</option>
<option value="2">Ms.</option>
<option value="3">Mrs.</option>
</select>
</span>
<span class="form-elements">
<input id="FirstName1" type="text" class="text" value="" />
</span>
<span class="form-elements reqField">
<input id="LastName1" type="text" class="text" value="" />
</span>
</div>
And the javascript code:
function populateData(value,person){
if(value==2){
$('#Title'+person).value=3;
$('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";
}
if(value==3){
}
}
jQuery uses val() to get and set values.
So your js function should be
$('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");
and not
$('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";
Also
<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
should be
<select class="dropdown" onchange="populateData(this.value,1)">
quick answer is that I think you need to use val() not value - can't quite remember how it works with select though
http://api.jquery.com/val/
HTML ID error here <select id="itle1" class="dropdown">
Should be Title1 not itle1
Also I think the javascript should look like this
function populateData(value,person){
if(value==2){
$('#Title'+person+' option[value="3"]').attr('selected','selected');
$('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");
}
if(value==3){
}
}
You could use a FORM instead of a DIV, and the attribute name, instead of id.
They were designed a long time ago to manage forms.
You can use jQuery for that, but everything is already built-in in pure Javascript to handle forms.
<form class="form-ui">
<span class="form-elements reqField">
<select class="dropdown" onchange="populateData(this)">
<option value="1">Please Select</option>
<option value="2">Mrs.Jane Smith</option>
<option value="3">Mr.Junior Smith</option>
</select>
</span>
<span class="form-elements reqField">
<select name="title" class="dropdown">
<option value="1">Mr.</option>
<option value="2">Ms.</option>
<option value="3">Mrs.</option>
</select>
</span>
<span class="form-elements">
<input name="FirstName" type="text" class="text" value="" />
</span>
<span class="form-elements reqField">
<input name="LastName" type="text" class="text" value="" />
</span>
</form>
<script>
function populateData(sel){
var form = sel.form,
value = sel.options[sel.selectedIndex].value;
switch(value){
case '3':
form.FirstName.value = 'Junior';
form.LastName.value = 'Smith';
form.title.value = '1';
break;
case '2':
break;
default:
}
}
</script>