I want to make simple HTML page, something like "calculator". I need that values in table will appear after button clicking it will insert data into table but it will reload page itself - this not what I need, I need to see that data.
Is possible to do it? thanks, here is my form:
here is link to jsFiddle: http://goo.gl/6cWY0r
You should not mix up your form-submit with the calculations you are trying to do. On submitting a form the data gets sent to a server and the page will reload. If you want to avoid that simply create a button which does not submit your form like I did here:
http://jsfiddle.net/tdo6q9km/2/
So all you really have to do is to add another button
<button id="calc"> Calculate </button>
outside of your form.
$('button').on('click', function(e){
$("table").append("<th scope=\"row\">1</th><td>Mark</td><td>Otto</td><td>#mdo</td>");
e.preventDefault();
});
Related
My goal of the question is to make the input field clickable again after using the blur() method.
This code is based on a person list which are clickable to get the details of the person with PHP and JQuery. The PHP and MySQL querys works well.
The first request of the Database via PHP will be loaded by using the the html(data) to the Match-List. But on the following code, I can request the GET-Function only one time with the PHP Data inside the match-list. When I close the match-list by using the blur() method and trying to click again on the input field, then the match-list won't come out again. It's an only-one time request without reloading the whole browser. How can I implement a function which renews the GET-request and loads the content again without reloading the page?
HTML
<div class="header-navbar">
<nav class="navbar navbar-expand-lg navbar-dark"> <li class="searchField">
<!-- Search Field -->
<form class="form-inline">
<input class="form-control mr-sm-2" id="searchValue" type="search" placeholder="Suche" aria-label="Search" autocomplete="off">
</form>
</li>
</nav>
</div>
<!-- Where the data comes out -->
<div id="match-list">
</div>
JQuery
$(document).ready(function(){
$('#searchValue').click(function(){
$.get("./sources/models/click_match.php", function(data) {
$('#match-list').html(data);
});
});
// Hides the match-list if user clicks it outside
$('#searchValue').blur(function(){
$('#match-list').hide();
});
});
#match-list is hidden when input is blured. Data is pushed into, just element is hidden - show it on click event.
$('#searchValue').click(function(){
$.get("./sources/models/click_match.php", function(data) {
$('#match-list').show().html(data);
});
});
I have created a form with 5 tabs in jquery-steps.
How to clear the form, once a i close the form and again reopen i get all fields are filled with the values.
I want to reset the form without page refresh..
Thanks
$("form input").val("");
Something like that, with jQuery.
I want to have a form on the main section of my webpage with buttons along the bottom of this section to submit it.
I also want to have a side bar with links to other pages, but make it so that whenever a link is clicked it acts as a button to submit the form too. (ie in the HTML, the code for these links will be outside of the form tags, but I would like them to still act as buttons for the form)
Is this possible?
You can solve this very easy without JavaScript in HTML5:
<input type="submit" form="id_of_the_form" value="Submit">
<form id="id_of_the_form" action method></form>
And you can style those buttons as you like. As in the example, the button can be placed at any point within the dom - no need to put it into the form.
Use the following onclick handler in your link, replacing formId with the ID for the form you want to submit...
onclick="document.getElementById('formId').submit();return false;"
Update
As #Juan (and others, especially #JoeTaylor) have mentioned, the above will not fire any client-side validation code associated with the form. The easiest way that I'm aware of to make it do so is to fire the click event of a submit button within the form. For instance, this could be used on your link...
onclick="document.getElementById('formSubmitButton').click();return false;"
Although you don't mention anything to do with server-side processing, I will take the assumption that is the point of your form. One additional thing I would say on the back of this is that you should ALWAYS replicate the validation back on the server. JavaScript is very easy to bypass, and so you should make sure the values reaching your server are correct, and never assume the JavaScript has done it's job.
The easiest way to ensure your form is submitted and validated by whatever function you've attached is not to call the form's submit() method, but to call its submit button's click() method instead.
Consider the following form:
<form id="bar" method="post" action="/echo/html/">
<input type="text" id="foo" name="foo">
<input type="submit" value="Submit">
</form>
Right now, clicking submit doesn't do anything special. But what if you wanted to ensure the text input had a value before sending anything off to the server? You might accomplish that as follows:
function validateBarForm() {
var txt = this.querySelector("input[type=text]");
if (txt.value == "") {
txt.style.outline = "solid red 2px";
return false;
}
}
document.getElementById("bar").onsubmit = validateBarForm;
Now if you click submit the form won't be submitted with a blank text input. But what if you submit the form programmatically? Let's add a link first...
submit form
Note that this link is outside of the form tag. We can trivially attach a submission function:
function submitBarForm() {
document.getElementById("bar").submit();
}
document.getElementById("submit-bar").onclick = submitBarForm;
We click "submit form" and... Whoops! The validation function is not performed! There are a few ways to skirt this issue, but my favourite is to simply have JavaScript simulate a click to the submit button. I find this holds up to changes a lot better than hardcoding a call to the validation function.
function submitBarForm() {
document.querySelector("#bar input[type=submit]").click();
}
Now when you click the link, the form is validated, and if everything checks out it's submitted too. But don't take my word for it--head on over to jsfiddle.net and see for yourself.
By adding an onclick javascript function to your form.
document.forms["myform"].submit();
Where "myform" is the id of your form. Here's a nice walkthrough: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
For example, the button might be:
<button onclick="document.forms['myform'].submit();">Hi</button>
Yes the button's click event add document.getElementById('formId').submit();
<form name="myform" action="action.php">
// Your form
</form>
Submit form
Or you can use jQuery:
<form name="myform" action="action.php">
// Your form
</form>
Your text
I do this myself with hidden submit buttons in the actual form, and outside of the form - anywhere else on the page - labels that reference the submit button and fire it.
In the form:
<input type='submit' id='hiddenSubmit'>
And anywhere else:
<label for='hiddenSubmit'>click me!</label>
Seems to do the job.
I'm making a web page using CGI scripting which has a form users need to fill out. The general layout is:
<form>
textfield (username)
textfield (password)
textfield (email)
submit button
</form>
What I would like to do is add a button that checks to see if the username they've entered is available. My problem is the way I'm trying to go about doing this is by writing:
<form>
<form>
textfield (username)
submit button
</form>
textfield (password)
textfield (email)
submit button
</form>
This doesn't work, the submit button instead submits the outer form. Here are the things I've considered trying but have not worked:
Put a form at the end of the first form. Problem: I have no idea how to align the "validate" button next to the username text field button without making it float which causes a bunch of other issues with the page.
Put values on the submit buttons and make the submit do different things based on which button was clicked. Problem: the web page that I want to make a "POST" request to is different based off which button is pressed. Seeing as I put the action="mypage.cgi" in the portion of the code, and not the button portion, I don't know how to make it go to different sites based on which button I press.
First of all it is a good idea to give all forms names.
So you can easily distinguish between forms.
Next, attach onClick even to each button that would call a function with a different paramenter: 1,2,3. Each button would send its own parameter. In the function you just look at the paramenter and submit appropraite form.
<form name='form1'>
....
<button type="button" onClick=doIt(1);>Submit</button>
</form>
<form name='form2'>
....
<button type="button" onClick=doIt(2);>Submit</button>
</form>
<form name='form3'>
....
<button type="button" onClick=doIt(3);>Submit</button>
</form>
<script>
function doIt(formid)
{
if(formid==1)
{
document.form1.submit();
}
if(formid==2)
{
document.form2.submit();
}
...
}
</script>
Have multiple submit buttons with different names. Check for each on the post back.
The approach that I have used for nested forms is to use tag instead of tag,
and then appending the form tags at the time of clicking submit buttons.
I have written a small JQ Plugin-'dynaForm' for the same, and its very easy to implement.
Please refer to ==> http://anupampdhyy.wordpress.com/2014/09/29/dynaform/
and
you can also watch a demo for same at :
https://www.youtube.com/watch?v=CFQia8EsoPQ&feature=youtu.be
I hope this helps you to implement nested forms in your HTML code. :)
You probably need to make two different form actions, so that you don't submit two completly different values.
I'm trying to have users enter info into a form (via radio buttons), manipulate the input data, and write resulting text onto the middle of a web page--beneath the radio buttoned form. So I have variables assigned to whenever a user selects a radio button, the onClick event calling a function something like:
function saveValue1(value) {
someVariable=value;<br>
}
And when users click a Submit button, a function works like it's supposed to, ultimately writing an output string. The problem is how to write the string value in the middle of the page. I have this [pseudo]code at the end of the function (pretend the string I want to write to the page is named aVariable):
document.getElementById('aPlace').innerHTML=aVariable;
And of course there's HTML in the displayed page like this:
<div id="aPlace"></div>
After a user pressed the form's Submit button the correct output variable is displayed very briefly, and then disappears. Why is this? And how should I be writing this code instead?
Thanks for helping a newbie, as always.
The form is probably submitted. put a "return false" at the end to stop it submitting the form
It seems that the browser is refreshing? How is the form data handled?
If the form is needed only to add the text to the page, I would add a button
<button onclick="saveValue1("+value+");")>
and avoid submitting the form.