I'm using iron-form and I'm trying to POST a file to a (currently local) server. I'm having two buttons, one to actually send the file and one to cancel. I'm having a problem cancelling. Here's the form:
<form is="iron-form" action="http://localhost:7733/receivedoc" id="restForm" method="post" >
<table class="starter-inputs">
<tr><td>
<px-file-upload
id="uploadComponentId"
message="Drag and drop files here, or click the button below."
multiple=false
accept=".xls,.xlsx">
</px-file-upload>
</td></tr>
</table>
<button class="btn btn--large btn--icon" id="saveDataSetButton">
<i class="fa-briefcase">Generate Pacing File</i>
</button>
<button class="btn btn--large btn--icon" id="cancelDataSetButton">
<i class="fa-briefcase">Cancel</i>
</button>
<div class="output"></div>
</form>
The cancelDataSetButton is being handled as:
this.$.cancelDataSetButton.addEventListener('click', function() {
console.log('restForm.cancelDataSetButton click')
restForm.reset();
restForm.querySelector('.output').innerHTML = 'Operation cancelled.';
});
HOWEVER, since By default, a native element (or input type="submit") will submit this form., the POST gets fired regardless. How can I prevent the Cancel button from POSTing?
it's a good question.
Couple things I would like to highlight here...
First of all, let's refresh some basics regarding HTML spec:
1) <button> without attribute type will act as type=submit as default attribute, that's why both of your buttons will submit the form.
2) <button> is supporting type="reset" which will reset all your fields into initial value(s) (e.g. clear them) and will not submit a form, so there are no JS handler code is needed for that at all.
In total, I would recommend to do some adjustments in your HTML code, related to buttons block:
<button type="submit" class="btn btn--large btn--icon" id="saveDataSetButton">
<i class="fa-briefcase">Generate Pacing File</i>
</button>
<button type="reset" class="btn btn--large btn--icon" id="cancelDataSetButton">
<i class="fa-briefcase">Cancel</i>
</button>
Please make note, that for cancelDataSetButton no JS code is needed (to clear the field), and you could delete whole event listener:
this.$.cancelDataSetButton.addEventListener('click', function() {
and so one.
Some references to catch up:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
Related
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
I want to build a form using react-final-form that has multiple submit buttons, where each submit button sets a different value in the form. Essentially, I want to create a form that looks something like this in rendered HTML:
<form>
Are you over 18 years old?
<button type="submit">Yes</button>
<button type="submit">No</button>
</form>
However, I can't figure out how to make react-final-form treat these different submit buttons as setting values in the form. I tried combining component state, <input type="hidden">, and onClick handlers, like this:
class FormWithMultipleSubmits extends React.Component {
state = {
value: undefined
};
setValue = value => this.setState({ value: value });
render() {
return (
<Form>
Are you over 18 years old?
<Field
name="adult"
component="input"
type="hidden"
value={this.state.value}
/>
<button type="submit" onClick={() => this.setValue(true)}>
Yes
</button>
<button type="submit" onClick={() => this.setValue(false)}>
No
</button>
</Form>
);
}
}
However, that doesn't seem to work -- probably because the value property on the <Field> component is only used for checkboxes and radio buttons.
Can someone give me a nudge in the right direction, for how to solve this properly?
Here's a Sandbox that shows how.
I have the following HTML:
<label for="file-input-76eb2" id="ember3042" class="c-text-input c-text-input o-grid-cell--6 file-upload ember-view">
<input id="file-input-76eb2" type="file" accept="text/csv" style="display: none;">
<span class="c-file-upload__input-filename"></span>
<a class="c-button c-button--single-action-primary c-file-upload__input-button">
Select
</a>
</label>
I have managed to get a Capybara::Node:Element corresponding to the label tag, but I can't get to the input. The id is dynamic- constantly changing. Moreover, I need to upload a file to this input tag.
Is there any information what I can do? This is all using google-chrome-headless.
This is using Ruby, with Capybara, with Selenium.
Looks like
label_element.find(:xpath, '//input') did it!
<div class="sortable-sections">
<fieldset class="section draggable" id="flSectionType">
<div class="btn-drag section-handle hidden-view">
</div>
<div class="section-header">
<span class="section-label">Job Requirements</span> <a class="section-info" href="#more-info"
title="Minimum Education, Minimum Work Experience, Required Licenses/Certifications, Required Skills, Knowledge, and Abilities needed to perform the job.">
?</a>
</div>
<div class="sortable-items">
</div>
<a class="section-add-item hidden-view" id="addJR" href="#add-item" data-item='{"id":"addJR","template":"requirement","item_type":"Job Requirement"}'>
Add a new Job Requirement</a>
</fieldset>
<fieldset class="section draggable">
</fieldset>
<fieldset class="section draggable">
</fieldset>
<div>
The above code will generate a list of sections which can be dragged with in the sortable-sectons.
I am using the following script to remove sections manually and adding it back to sortable-sections, but it is not registering the jquery events.
var $section = $('.sortable-sections').find($('#flSectionType');
$('.sortable-sections').find($('#flSectionType').remove();
......
.......
$('.sortable-sections').append($section.val());
After appending the section, the event which are registered for the section-add-item css classes are not triggering.
Note:
instead of "on" used the "live" method. but it is not holding all attributes.
Edit:
Event code:
$('.section-add-item').on('click', function (e) {
that.addSection(this);
e.preventDefault();
});
instead of drag and drop, manually i am ordering the section on initial load.
.section-add-item must already exist when adding the event and the usage of on is wrong
$('body').on('click', '.section-add-item', function (e) {
});
instead of the body you can add another parent of .section-add-item that already exists before .section-add-item is created.
Has anyone been able to get the jQuery UI Dialog buttons to respond to click_button or selenium.click? I can't seem to be able to get this to work.
Basically, I'm trying to test a form in a jQuery UI Dialog in a Rails app using Cucumber/Webrat/Selenium.
I have a page with many table rows, and each row on click fires off a dialog box with a form. Each form element has a unique id so the markup is valid.
Since the buttons can be created dynamically by the Dialog plugin, I initialize the dialog to add a 'Save' and 'Cancel' button. Interestingly, the plugin inserts a button tag, not an input tag. I also add ids on open as shown below, so the buttons can be targeted by the testing framework.
$('.inventory_dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
'Save': function() {
// ajax submit stuff
},
Cancel: function() {
// cancel stuff
}
},
open: function() {
// add ids to buttons for selenium
var inventory_id = $(this).attr('id').split('_').pop();
$('.ui-dialog-buttonpane')
.find('button:contains("Save")').attr('id', 'inventory_'+inventory_id+'_save_button')
.end()
.find('button:contains("Cancel")').attr('id', 'inventory_'+inventory_id+'_cancel_button');
}
});
The markup looks like:
<div id="inventory_dialog_392827" class="inventory_dialog">
<form action="/suppliers/22/listings/27738/inventory/392827" class="edit_inventory" id="edit_inventory_392827" method="post"><div style="margin:0;padding:0"><input name="_method" type="hidden" value="put" /></div>
<div class="input_block">
<label for="inventory_392827_new_quantity">Quantity</label>
<input id="inventory_392827_new_quantity" name="inventory[new_quantity]" type="text" value="10" />
</div>
<div class="input_block">
<label for="inventory_392827_claim_quantities">Groups of</label>
<input id="inventory_392827_claim_quantities" name="inventory[claim_quantities]" type="text" value="6-8" />
</div>
</form>
</div>
My Cucumber step (presently) looks like:
When /^I click the "(.+)" button in the inventory dialog$/ do |button_name|
debugger
selenium.click "//button[#id='inventory_#{#current_offer.id}_#{button_name.downcase}_button']"
selenium_wait
end
When I run Cucumber and it hits 'debugger', I am able to manually 'selenium.click' in the input fields.
selenium.click "//input[#id='inventory_392827_new_quantity']"
This successfully puts a cursor in that field. However, clicking the button does not work:
selenium.click "//button[#id='inventory_392827_save_button']"
When I type that in the command line debugger, it returns nil (which I believe is success, since there is no exception), but Firefox doesn't do anything. The dialog box stays open in the browser. When I output response.body, that button is present.
I also tried
click_button "inventory_392827_save_button"
but the 'selenium_wait' command times out which means it doesn't see that element.
I'm stuck...
Does the problem go away if you change it to "fireEvent ... click" or to clickAt?
It might be better to locate your button by another location strategy such as XPath or CSS. If you add the HTML of the button(s) then I'll try to give some suggestions.
If your target button has a class of 'submit' for example you could use:
css=input.submit
If the target button has a value of 'Click Me' you could use:
//input[#value='Click Me']
Another suggestion would be to use the id attribute without the unique number, so the following may work for you:
//input[substring(#id, string-length(#id) -11, 12) = '_save_button']
I had a similar problem, and here's how i got it done (using Capybara/Selenium/Factory_Girl).
The jQuery UI Dialog buttons generates this HTML, in my case with two buttons Add and Cancel:
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Add</span>
</button>
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Cancel</span>
</button>
</div>
But the click_button method doesn't work because the actual button name is a span
nested inside the button tag, as you can see above.
So i wrote in the .feature step:
When I press the jquery dialog "Add" button
And i added this to my 'base.rb':
# jQuery Dialog buttons
When /^I press the jquery dialog "([^\"]*)" button$/ do |button_text|
page.find("div.ui-dialog-buttonpane").find('span', :text => button_text).click
end