Is there a way I can set the submit form action outside the form? For instance, this is what I have:
<input type='hidden' name='action' value='update' />
<input type='submit' value='Save' />
But I want to create a text link to effect the same action, something like:
<...action here...>SAVE<...>
<form id="yourFormId" action="..." method="...">
<!-- Your form fields -->
</form>
And later on your page:
<button onclick="document.getElementById('yourFormId').submit()">SAVE</button>
Related
I have a WordPress website with a bar at the top that I can add custom code to.
I'm trying to add an Infusionsoft email signup form to this bar and I want everything to be on the same line. Currently it's showing the field label on the first line, then the email field on the second line and then the submit button on the third line.
I can add whatever code I need to this form and this custom code box and I can also add custom CSS to the theme options themselves.
I've tried a bunch of things and some of them almost work but I can't figure this out.
Any help would be greatly appreciated.
Here's my form code:
<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
<input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
<input name="inf_form_name" type="hidden" value="Web Form submitted">
<input name="infusionsoft_version" type="hidden" value="1.70.0.80421">
<div class="infusion-field">
<label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text">
</div>
<div>
<div> </div>
</div>
<div class="infusion-submit">
<button type="submit">Submit</button>
</div>
I moved the infusion submit div inside the infusion field div. I used display flex and flex-direction row to achieve them on the same row.
I know you're using word press and probably just copy and pasting code. If you plan to do web design work it would be well worth it to study up on HTML and CSS. It's actually not that complicated and you'll have so much control over how things look on your site!
*Edit to center content
<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
<input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
<input name="inf_form_name" type="hidden" value="Web Form submitted">
<input name="infusionsoft_version" type="hidden" value="1.70.0.80421">
<div class="infusion-field" style="display:flex; flex-direction: row; justify-content: center;">
<label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" style="margin-right: 10px;">
<div class="infusion-submit">
<button type="submit">Submit</button>
</div>
</div>
</form>
This prevent enter submit,but at the moment prevent enter in inputs.
I need that enterkey work in inputs but not submit form.
<template id="form-template">
<form action="save-passport" #keypress.enter.prevent method="post" enctype="application/x-www-form-urlencoded" >
<input type="submit" v-show="loaded" v-on:click="saveForm" value="Save" />
<input type="text" required="required" name="field-11" >
<select required="required" name="field-13"><option value=""></option>
</select>
</form>
</template>
Had the same problem. Solution I did was to put the submit method on the opening form tag. Then no need for the input/button type="submit" inside the form at the bottom.
<form class="form" action="" method="POST" #submit.enter.prevent="createForm()">
Also other options available on inputs:
#keydown.enter.prevent
#keyup.enter.prevent
#submit.enter.prevent
I did it this way
first i removed vue modifiers from form tag.
second i chaged type of input from submit to button
and third this my saveForm function
saveForm:function(){
if (someCondition){
event.preventDefault();
}else{
document.forms[0].submit();
}
}
You need to use the prevent modifier. Another thing, your webpage itself must have the focus. Meaning, if you just visit the webpage, prevent won't work. But, if you click somewhere in the form, prevent will work for you.
You can still submit the form via JavaScript using something like document.forms[0].submit();
I have a dynamic form with minimum one checkbox as an array.
<form action="url" method="post" id="whatever">
<input class="checkbox" type="checkbox" name="item_ids[]" value="101" />
<input class="checkbox" type="checkbox" name="item_ids[]" value="102" />
<input class="checkbox validate-one-required" type="checkbox" name="item_ids[]" value="103" />
<button type="submit">
</form>
<script type="text/javascript">
//< ![CDATA[
var customForm = new VarienForm('whatever');
//]]>
</script>
I tried to use the hint from several forums to add the "validate-one-required" to the last checkbox in the group. But when I try to submit my form and I checked the first checkbox Magento told me that I have to select at least one option. Funny! I guess I did it.
Is there something else especially in the javascript area I had to add?
Try attach the class validate-one-required-by-name to all the input fields that you need to validate as long as they have the same name.
I know how to detect which submit button was clicked when I know the name values of each of the buttons. But what if the names are dynamic or defined by another component?
For example, here I can simply check the POST data from this <form> for either alpha or bravo:
<form>
<input type="submit" name="alpha" value="Alpha">
<input type="submit" name="bravo" value="Bravo">
</form>
But that's only because I know I should be looking for those names.
Is there a best practice for handling this type of situation? (Perhaps by rendering an element <input type="hidden" name="submit-button-names" value="dynamic_name1|dynamic_name2|etc">.) I would like a solution that doesn't require JavaScript.
Presuming you have control over the JSP displaying these buttons, just prefix the button names with a string you can look for in the POSTed data. For example prepending "dynamicbutton_" to all of the names like this
<form>
<input type="submit" name="dynamicbutton_alpha" value="Alpha">
<input type="submit" name="dynamicbutton_bravo" value="Bravo">
</form>
Then in your Servlet, look for values with this prefix by calling ServletRequest.getAttributeNames()
You could write a custom tag to set the different inputs to your form based on a list of parameters you give to the tag.
You would end up with the HTML looking something like this:
<form method="POST" action="SelectColour.do">
<p>Select your favorite colour: </p>
<formTags:select name='colour' size='1' optionsList='${applicationScope.colourList}'/>
<input type="SUBMIT" value="Click here to submit">
</form>
Here's a decent guide to creating custom tags.
I have a form where I have a search functionality with a text box(TextBox1) and a submitt button(Button1). Apart from search, there is another set of textbox(TextBox2) and submitt button(Button2). When I write something in search box(TextBox1), and hit enter, the validation message of the second textbox(TextBox2) is shown.
I am not sure how to bind the respective textboxes with submitt buttons. Please help.
Thanks in advance
Depending on how much control you have, the easiest way would be to have separate forms for each texbox/button combo.
<form action="dosomething.php">
<input type="text" name="foo" />
<input type="submit" />
</form>
<form action="dosomethingelse.php">
<input type="text" name="bar" />
<input type="submit" />
</form>
If you can't or don't want to do that, you'll need to look at handling the onkeydown event on the text boxes to prevent an automatic submission. Something like <input type="Text" name="foo" onkeydown="doSubmit(this); return false;" />. Note the return false;, which prevents the default action from taking place.