How to refresh only div on submit button click? - html

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

How to select a box with jQuery but not select the form inside the box?

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 few inputs in it, without any buttons, doesn't submit?

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>

Iron form not submitting on enter with paper input

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();
}

What cause to button working like a submit button?

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?

load external files using ajax/query

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>