I have 2 div in my web page. what I need is submit only form_div when press the submit button.
<div id="main">
<div id="form_div">
<form name="form">
<input type="submit" name="save" id="save"/>
</form>
</div>
<div id="other_div"></div>
</div>`
In jquery,
you could call
$("your-custom-selector").click(function(){
//Do-whatever. This code only runs when your customselector is pressed.
});
In JavaScript
document.getElementById("your-custom-selector").addEventListener("click", myFunction);
function myFunction() {
//Do-whatever. This code only runs when your customselector is pressed.
}
Related
I have a code where I want the page to close when the box is clicked with the "box-search" class
But even though I said don't consider the form and the elements inside the form, the form will be closed when the form and input are clicked.
$(".box-search *").not('form, form *').click(function() {
$(".box-search").fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-search">
<div class="container" style="font-size: 40px; color: red;">
<button type="submit" class="close-box-search">Close</button>
<form method="get" action="">
<input type="text">
<button type="submit">Search</button>
</form>
</div>
</div>
I found the answer to my question
To select the parent, but not apply to the child
We use the following code
$(".box-search").click(function (e) {
if( $(e.target).hasClass("box-search") || $(e.target).hasClass("container") || $(e.target).hasClass("close-box-search") ){
hideBoxSearch()
}
});
Why form with only one text input (without any buttons) will submit, but with two text inputs won't?
Example: https://codesandbox.io/s/form-submitting-ztqpz?fontsize=14
Add a submit button on each form (few inputs too) and it will work both with button and pressing enter
<div class="panel">
<div class="panel-title">Few inputs</div>
<form action=".">
<input type="text" />
<input type="text" />
<button type="submit">Click</button>
<output name="result" />
</form>
</div>
</div>
you can do it in many ways,
best one is with tabindex to prevent tab reach this button -
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />
Also you can hide your button link this. or you can go with java script function like this -
<script type="text/javascript">
// Using jQuery.
$(function() {
$('form').each(function() {
$(this).find('input').keypress(function(e) {
// Enter pressed?
if(e.which == 10 || e.which == 13) {
this.form.submit();
}
});
$(this).find('input[type=submit]').hide();
});
});
</script>
I'm testing out using iron-form with custom elements. The issue I'm having is the form is not being submitted when I press enter. For example this form right here works on enter:
<iron-form>
<form id="loginForm">
<paper-card heading="Welcome Back!" elevation="1" animated-shadow="true">
<div class="card-content">
<input type="text" label="Username" value="{{username}}">
<input type="text" label="Password" value="{{password}}">
</div>
<div class="card-actions">
<button disabled$="[[fetching]]" type="submit">Login</button>
</div>
</paper-card>
</form>
</iron-form>
I have an event listener in my connectedCallback method listening for the iron-form-presubmit event
connectedCallback() {
super.connectedCallback();
this.addEventListener('iron-form-presubmit', function(event) {
event.preventDefault();
alert('working')
});
}
The issue is when I switch the html input elements to paper-input elements the form no longer submits on enter.
<iron-form>
<form id="loginForm">
<paper-card heading="Welcome Back!" elevation="1" animated-shadow="true">
<div class="card-content">
<paper-input type="text" label="Username" value="{{username}}"></paper-input>
<paper-input type="text" label="Password" value="{{password}}"></paper-input>
</div>
<div class="card-actions">
<button disabled$="[[fetching]]" type="submit">Login</button>
</div>
</paper-card>
</form>
</iron-form>
You can use <iron-a11y-keys> to call a submit method when the [enter] key is pressed.
<iron-a11y-keys target="loginForm" keys="enter" on-keys-pressed="submit"></iron-a11y-keys>
<iron-form id="loginForm">
...
</iron-form>
In your custom element definition, add a method:
submit: function () {
this.$.loginForm.submit();
}
I have tow buttons inside my form,
one is a submit and the second is a simple button (like cancel button that close the dialog).
Code:
<dialog id="addSubjectDialog" style="width:20%; height:25%;">
<div style="width:100%; hegit:20%;"><h2 style="font-size:100%;"><fmt:message key="add_subject_dialog_title" /></h2></div>
<form action="addSubject" method="post" >
<div style="width:100%; hegit:20%;">
<h2 style="font-size:100%;"><input id="SubjectName" name="SubjectName" style="font-size:100%;text-align: right;"></input> <fmt:message key="insert_subject_name" /> </h2>
</div>
<div style="height: 60px;margin-top:5% ;">
<fmt:message key="save" var="save"/>
<input type="submit" class="btn btn-success" style=" float: left; width:40%; "value="${save}"></input>
<button id="cancelSubSubjectDialog" class="btn btn-warning" style="float: right; width: 40%;" ><fmt:message key="cancel" /></button>
</form>
</div>
</dialog>
the code of the cancel button is in a script:
<script type="text/javascript">
window.onload = function () {
document.getElementById("cancelSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
document.getElementById("saveSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
}
function ShowDialog(dialogName) {
selectList();
document.getElementById(dialogName).showModal();
}
</script>
In the onLoad function I set the cancel button action.
*I have another dialog in my page that do the same things and include cancel and save buttons too, and it's working fine.
When I click on the cancel button the "addSubject" is called;
What is wrong in my code? Why does the action is called if I click on cancel button too?
I'm having 2 buttons to load 2 separate forms, events and offers. when a user clicks on a button i want to load the relevant html form and make the buttons disappear.
events loads events.html
offers loads offers.html
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" />
<input name="c_offer" class="clr" type="button" value="offer" />
</form>
</div>
load the form to
<div id="form_body"> </div>
i want make sure that the buttons are disappear after the user has clicked.
Can someone give an idea how to do it?
You need to use $.load() to get the HTML from your external HTML pages. Try something like this:
HTML
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" id="eventsBtn" />
<input name="c_offer" class="clr" type="button" value="offer" id="offersBtn" />
</form>
</div>
jQuery
$("#eventsBtn").on('click', function() {
$("#form_body").load('events_loads_events.html');
});
$("#offersBtn").on('click', function() {
$("#form_body").load('offers_loads_events.html');
});
More information on load();
If you use jQuery then this is quite easy:
$('#form1 input').on('click', function(event) {
var $target = $(event.target);
$('#form_body').load($target.data('url'));
$('#form1').hide();
})
You would have to change you html into this:
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" data-url="http://www.path-to-your-form-html-for-this-button.com/"/>
<input name="c_offer" class="clr" type="button" value="offer" />
</div>