I have a form which calls a javascript function. This function will only works when called from a certain page on my site (homepage). I am looking to put the form in the header of my website so that it can be populated from other pages, redirect to the homepage and then call the onsubmit function. Is there a way that I can accomplish this?
My html that I am using for the form at the moment is -
<form action="#" onSubmit="runRoute();return false;" id="routeForm">
<input type="text" id="routeDistance" value="" placeholder="1" />
<select id="routeUnit">
<option value="miles">miles</option>
<option value="Km">km</option>
</select>
<input type="text" id="routeStart" value="" placeholder="postcode or location" />
<input type="submit" value="plan my route" class="submit" />
</form>
Thanks.
Related
How can I implement the on-click event in javascript for below use-case
When I click the button after the entire <form> tag should be loading.
If you want to submit a form and call upon a function when you click the submit button, you can do this :
<input type="submit" value"Submit" onclick="return yourFunction();" />
With HTML 5 form attribute on the button;
<form id="myForm" method="get" action="/">
<input type="text" name="name" />
</form>
<input type="submit" form="myForm" />
I have an HTML form that has a submit button. I want this button to be disabled when it is clicked. But I also want the form to get submitted.
I am not using ajax request to submit the form. The PHP script that handles the form takes a long time. So some users just click it after a few seconds and the form gets submitted twice which leads to two rows with the same data in the database.
Here's what I tried so far
<form method="POST" action="xyz.php">
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="submit" onclick="$(this).attr('disabled', true);" value="Submit" />
</form>
The onclick event on submit button disables the button but it also don't let the form to be submitted. But I want the form to be submitted and also want the button to be disabled.
You May try the below code
onclick="this.disabled=true;this.form.submit();this.value='Submiting...';"
If you're using jQuery, then here's a fully-jQuery, unobtrusively handled version which would work.
If you were to give your form an ID, you could make it handle that form specifically - this example will handle all forms on your page.
$(function() {
$("form").submit(function(event) {
$(this).find('input[type="submit"]').prop("disabled", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="xyz.php">
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="submit" value="Submit" />
</form>
Note that you should use .prop() rather than .attr() to set properties such as "disabled"
(see http://api.jquery.com/attr/).
I have 2 forms. I ask for an API-KEY int he first form to load values account in some inputs of the second form and submit it.
The first form:
<form id="formAPI" name="formAPI">
<label for="" >API-KEY</label>
<input type="text" class="form-control" id="inputApi" placeholder="XXX-XXX>
<input id="continue" type="submit" value='Continue' onclick="submit_api()"/>
</form>
The second is like this:
<form id="form2" >
<label for="inputName3" >Name</label>
<input type="text" id="inputName3">
<label for="selectDevices" >Device</label>
*here devices have to be loaded automatically due to the API KEY*
<select class="form-control" name ="device_s" id="id_devices">
<option value="1"> Device 1 </option>
<option value="2">Device 2</option>
<option value="3">Device 3</option>
</select
<input id="rule1" type="text" placeholder="Give a rule" />
<input id="btn2" type="submit" value='Submit' />
</form>
I have no choice if the page is reloaded outright or not. the essential is to preload some data from the second form via the API KEY of the first form.
You can use LocalDB js in your form1.
Create a js to write your api values and when submit the form2... receive this infos and fill where you need it.
Localdb support refresh and don't loose data.
Example:
https://www.codeproject.com/Tips/1021483/Localdb-js
I'm trying to find the simplest, non-expert-coder solution to displaying a search query.
I have a search form where onclick of the submit button it displays the form value underneath. This is the code:
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value" />
<div id="output"></div>
The page reloads on submit rather than going to another page.
Is there a simple way to manipulate my code do display the value in the output div automatically upon page load, rather than onclick?
So whatever was placed in the search box will automatically be displayed once the page loads after refresh or submit. If nothing was entered, then nothing will show.
There are many ways to achieve this, but this would do the job:
<input type="text" name="searchfield" id="searchfield" value="" />
<button onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value">Submit</button>
<div id="output"></div>
And using PHP,
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" />
<div id="output">
<?php
if($_GET['searchfield'])
echo $_GET['searchfield'];
?>
</div>
I have two forms in my jsp page, first form have input values and second form have submit button,
i can't use both in same form because of some issue. now i want to access first form value into second form.
My Sample Code is Here,
<form name="onchange" id="first">
<div><input type="text" name="n1"></div>
<select onchange="document.forms['onchange'].submit();" name="select">
<option value="A">A</option>
<option value="A">A</option>
</form>
<form action="servlet" id="second">
<input type="submit" name="sub" value="Submit">
</form>
I need to access a first form value to second form on submit. is it any way to access? Thank You.
I dont exactly know what you want to do.But you cant send data of one form using a submit button of another form.
You could do one thing either use sessions or use hidden fields that has the submit button.
You could use javascript/jquery to pass the values from the first form to the hidden fields of the second form.Then you could submit the form.
Or else the easiest you could do is use sessions.
IN Jquery
<form>
<input type="text" class="input-text " value="" size="32" name="user_data[firstname]" id="elm_6">
<input type="text" class="input-text " value="" size="32" name="user_data[lastname]" id="elm_7">
</form>
<form action="#">
<input type="text" class="input-text " value="" size="32" name="user_data[b_firstname]" id="elm_14">
<input type="text" class="input-text " value="" size="32" name="user_data[s_firstname]" id="elm_16">
<input type="submit" value="Continue" name="dispatch[checkout.update_steps]">
</form>
$('input[type=submit]').click(function(){
$('#elm_14').val($('#elm_6').val());
$('#elm_16').val($('#elm_7').val());
});
This is the jsfiddle for it http://jsfiddle.net/FPsdy/102/