first: always is the same action.
two: the form has multiple "CSS SUBMITS" like
<form action="/myaction" method="POST">
<a id="foo1" name="foo1" href="#" role="form_button">submit1!</a>
<a id="foo2" name="foo2" href="#" role="form_button">submit2!</a>
<a id="foo3" name="foo3" href="#" role="form_button">submit3!</a>
<input type="submit" id="canfoo" name="canfoo" value="I can process this"/>
</form>
<script>
$('a[role=form_button], div[role=form_button], span[role=form_button]').bind( 'click', function(){ $('form').submit(); } );
</script>
how can I do in /myaction this:
if ($_POST['foo1']) { action; return; } // :(
if ($_POST['foo2']) { action; return; } // :(
if ($_POST['foo3']) { action; return; } // :(
if ($_POST['canfoo']) { action; return; } // THIS WORKKKKKSS!!
How can I do to foo1, foo2, foo3 to work?
(I use jQuery like:
$('a[role=form_button], div[role=form_button], span[role=form_button]').bind( 'click', function(){ $('#actiontodo').val(this.id); $('form').submit(); } );
), then, in the other side (action),
I do:
IF ($_POST['ACTIONTODO'] == "foo") { action; return; }
BUT, I DON'T LIKE THIS SOLUTION! I WANT THE <A behave as well as <input type="submit"
Thank you very much for your help!
You shouldn't give priority to visual over usability, that's a huge mistake. Anyway, you can stylize any button/input to suit your needs without any problem, just grab a good CSS tutorial.
Don't reinvent the wheel.
You can use any element you want to trigger a .submit() event.
http://api.jquery.com/submit/
For example, this form:
<form id="targetForm" action="/myaction">
<input type="text" value="Oh hai!"/>
</form>
Can be submitted by the following jQuery:
$('#targetForm').submit();
However, you can style buttons and input fields without too much trouble in CSS.
Update:
I'd agree with Ben that you should reconsider doing form submissions this way.
For multiple submission triggers..
So if you have multiple triggers you need a hidden field to record this information for POST.
Something like this will do the trick...
<form id="targetForm" action="/myaction">
<input type="text" name="myText" value="Oh hai!"/>
<input type="hidden" name="whichTrigger" value="default" />
</form>
And then each trigger would do ...
$('#whichTrigger').val("myTriggerName"); // A different value for each one of course.
$('#targetForm').submit();
I solved this problem as is:
<form action="/myaction" method="POST">
<div id="foo1" name="foo1" href="#" role="form_button"><button type="submit">submit1!</button></div>
<div id="foo2" name="foo2" href="#" role="form_button"><button type="submit">submit2!</button></div>
<div id="foo3" name="foo3" href="#" role="form_button"><button type="submit">submit3!</button></div>
<input type="submit" id="canfoo" name="canfoo" value="I can process this"/>
</form>
!!!!!!!!!!!!!!!!!!! THANKS!
Related
I would like to submit form when an element is selected - skipping pressing the submit button.
I tried using onchange="this.form.submit()", but it's not working here.
This is the code:
<form action="" method="get">
<div class="ui floating dropdown labeled search icon button dd">
<input type="hidden" name="nutr_code">
<span class="text">Select nutrient</span>
<div class="menu">
<div class="item" data-value="ca">Calcium</div>
<div class="item" data-value="fe">Iron</div>
<div class="item" data-value="mg">Magnesium</div>
<div class="item" data-value="zn">Zinc</div>
</div>
</div>
<br><br>
<input type="submit" value="Show results">
</form>
Because you are using GET method you can redirect with javascript by constructing the url yourself.
$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
location.href = 'http://example.com/?nutr_code=' + value;
}});
Second option is changing the input field 'nutr_code' with the value from the callback as shown above
$('input[name="nutr_code"]').val(value);
and submit the <FORM/> from js.
$('form').submit();
EDIT:
Example of second option.
$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
// Uncomment if semantic is not updating the input before submit.
//$('input[name="nutr_code"]').val(value);
$('form').submit();
}});
You need to define action in form tag or add some method to submit button
<input type="submit" value="Show results" onclick="someFunction()">
You need to define someFunction() too if you follow this way. Thanks
You Can Use Jquery
$(document).ready(function(){
$("input[name='nutr_code']").on('input',function(e){
$("input[type='submit']").trigger( "click" );
});
});
I'm developing a Question&Answer website in php and I want to print the answer comments when I press the button. Everything works like a charm but only on the first button. I have an idea why this does't work, I guess it only takes into account the first id that it finds.
So , my question is, is there any way to name the element I want to call based on its id? For example:
<button class="btn icon-chat" title="Add a comment on this answer"
type="button" id="showarea . {answer['answerid']"} name="showarea" value="Show Textarea">
Comment</button>
<div id="textarea">
{include file="comment_form.tpl"}
</div>
But how would I call this PHP variable on my JS function?
$("#textarea, #textarea-ok").hide(); // or you can have hidden w/ CSS
$("#showarea").click(function(){
$("#textarea").show();
});
$("#textarea-ok, #cancel").click(function(){
$("#textarea").hide();
});
Is this the best approach? Any advise regarding to the JS code you can give?
Kind Regards
Live method should be ok
$("body").on("click", ".myClass", function(){
// do it again // or #myId
});
Don't forget about an event with an Id selector can be only on one element, and class on every one...
Edit with example
<div class="post-button clearfix">
// i changed this button as well
<button class="btn icon-chat show-textarea" title="Add a comment on this answer" type="button" data-answer="{$answer['publicationid']}">Comment</button>
<div class="textarea">
{include file="comment_form.tpl"}
</div>
</div>
// comment_form.tpl
// i added a master container
<div class="comment-form">
<form method="post" action="{$BASE_URL}controller/actions/comments/create_comment.php">
<textarea name="comment" rows="4" cols="40" class="qa-form-tall-text"></textarea>
// i deleted the wrong input here
<input type="hidden" name="answerid" value="{$answer['answerid']}" />
<input type="hidden" name="questionid" value="{$question['publicationid']}" />
// i changed these 2 buttons as well
<button type="button" class="textarea-cancel qa-form-tall-button qa-form-tall-button-comment">Cancel</button>
<button type="submit" class="textarea-ok">Ok</button>
</form>
</div>
Then you change the script with class in selector like :
...
$('.comment-form').hide();
$("body").on("click", ".show-textarea", function(){
$('.comment-form').show();
});
$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
$('.comment-form').hide();
});
....
More about Jquery Selector : https://www.w3schools.com/jquery/jquery_ref_selectors.asp
More about live method wit .on() :
https://www.w3schools.com/jquery/event_on.asp
More about Html forms
https://www.w3schools.com/html/html_forms.asp
Read these docs to be ok with yourself ;)
We have a magento site that is using the WebForms2 plugin and ends up using something like the following generated code for a form:
HTML
<form action="http://example.com/magento/index.php/webforms/index/iframe" method="post" name="webform_2" id="webform_2" enctype="application/x-www-form-urlencoded" class="webforms-lg-test" target="webform_2_iframe">
<input type="hidden" name="submitWebform_2" value="1"/>
<input type="hidden" name="webform_id" value="2"/>
<div id="fieldset_0" class="fieldset fieldset-0 ">
<ul class="form-list">
<li class="fields ">
<div id="field_11" class="field type-text webforms-fields-11 webforms-fields-name">
<label id="label_field11" for="field11">Name</label>
<div class="input-box">
<input type='text' name='field[11]' id='field11' class='input text ' style='' value="" />
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<p class="required">* Required Fields</p>
<button type="button" class="button" id="webform_2_submit_button" onclick="webform_2_submit()" title="submit">
<span>
<span>Submit</span>
</span>
</button>
<span class="please-wait" id="webform_2_sending_data" style="display:none;">
<img src="http://example.com/magento/skin/frontend/default/default/images/opc-ajax-loader.gif" alt="Sending..." title="Sending..." class="v-middle"/>
<span id="webform_2_progress_text">Sending...</span>
</span>
</div>
</form>
JS
var webform_2 = new VarienForm('webform_2', 0);
var webform_2_submit = function(){
var form = webform_2;
if(form.validator && form.validator.validate()){
form.submit();
$('webform_2_submit_button').hide();
$('webform_2_sending_data').show();
}
};
The tricky part is that we have an additional tool that works with all forms. Previously we just had it hook into the forms submit handler, but this particular method that Magento/WebForms uses, does not trigger the submit handler.
An example of our tool's code:
var forms = document.getElementsByTagName('form');
for(i=0; i<forms.length; i++) {
forms[i].addEventListener('submit', function() {
alert('form submitted');
}
}
We were also using a jQuery approach, but pared it down to reduce dependancies. It also did not work.
$('form').on('submit', function(e) {
alert('form submitted');
});
Question
Is there something specific in Magento that I could use with this implementation that I could hook into instead of a standard submit handler? Or a different/better way to observe a form's submit handler?
Using Prototype I was able to override the existing submit handler.
VarienForm.prototype.submit = VarienForm.prototype.submit.wrap(function($super, url) {
//-- your code can go before OR after the default form behavior
//-- include this if you want to include the previous submit behavior
$super(url);
return false;
});
I have the below html drill down control which is generated at run time..And i want to disable all the validations on it.
<label class="mark" for="SupportTo_L1" id="SupportTo_L1_Label">select a value </label>
<select aria-labelledby="SupportTo_L1_Label SupportTo_L1_Error" aria-required="true"
class="op-combobox" data-ishorizontal="true" data-drilldowntype="true"
data-register-change-event="true" data-val="true"
data-val-required="<img class='validateicon'
src='https://sxsvc.supp.maro.com/PAdvy0.0.0/Content/Images/16x16-red-alert.png'/><font color='Red'>*</font> Required"
id="SupportTo_L1"
name="SupportTo_L1" title="Technology group involved in the project:">
<button class="submitbutton" id="submit" name="submit" type="submit"
value="submit">Submit</button>
But still it fires a validation on the this drill down when i clicked on the submit button.I tried the below code which didn't work.Anything else i need to disable.
$('#SupportTo_L1').attr(
{'data-val':'false','aria-required':'false'}
);
I have done it like that,
document.getElementById("elemenId").required = false;
I would try this:
$('#SupportTo_L1').removeAttr('data-val');
$('#SupportTo_L1').removeAttr('aria-required');
$("#submit").click (function (e) {
e.preventDefault();
$("select.op-combobox").attr("data-val","false");
$("select.op-combobox").attr("aria-required","false");
});
I have a login form. When the inputs get focused the "forgotten password" and "remember me" elements get shown by adding a css class, when they blur, the elements are hidden again by removing the class "sho". I would like the elements to keep the class "show"if I click either one of them or the login link
$(document).ready(function() {
$('.login *').focus(showlogin);
$('.login *').blur(hidelogin);
});
function showlogin(){
$('.login .hidden').addClass("show");
}
function hidelogin(){
$('.login .hidden').removeClass("show");
}
Html:
<form class="login">
<input type="text"/>
<input type="password"/>
<a class="loginbutton" href="#">Log in</a>
<br />
<a class="hidden" href="#">Forgotten password</a>
<label class="hidden"><input type="checkbox" /> Remember me</label>
</form>
Instead of binding to blur, bind to a click outside the login form.
Here's some code I have in my page that closes my login box when I click outside it, you can adapt it to your needs:
$(document).mousedown(function (e) {
if ($(e.target).closest("#signin").length == 0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});