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/).
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 a html form with input fields that require a value before submission and to achieve this I am using the required attribute in html5 Which is shown in the snippet below with the header Form One.
The problem is I'd like to add a confirm pop-up message after the delete button is clicked -- asking if the user wants to continue.
I have done this in the snippet shown below with the header Form Two but the problem is, the required attribute is not showing when the input field is empty and submitted.
The form gets submitted before the required method is triggered. Anyone has any ideas to solve this html5 incompetence?
THANKS
<h2>Form One </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
<hr>
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" onclick="confirm('Are you sure you want to submit')" value="Delete">
</form>
Try using onsubmit on your <form> rather than the button.
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page"
onsubmit="return confirm('Are you sure you want to submit?')">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
Browser form validation only kicks in on a submit event.
This will also prevent your form from submitting if the user chooses to "Cancel" the popup.
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 am making an HTML5 page with multiple forms. Each input box has its own submit button to convert the temperature unit into another (Celsius to Kelvin, etc.). What tags or attributes do I need to make the submit button focus when its input box is focused or typed in by the user?
Javascript (made from coffeescript) is used in this file. There is no CSS.
You can use javascript for this
write onfocus="hilight(form_number);" on each input box.
and in your function you can hilight the button
<form name="form1">
<input type="text" onfocus="hilight(1)" />
<input type="submit" id="btn_1" class="button" />
</form>
<form name="form2">
<input type="text" onfocus="hilight(2)" />
<input type="submit" id="btn_2" class="button" />
</form>
<form name="form1">
<input type="text" onfocus="hilight(3)" />
<input type="submit" id="btn_3" class="button" />
</form>
<script>
function hilight(opt)
{
document.getElementById('btn_'+opt).style('','');//you can add any styles to button here
}
</script>
Have you tried using the onblur event of the input box to set the focus to the respective submit?
Interesting problem. I have a client who wants the add to cart button to be an image. That's fine, submit via javascript in an onclick on the image. But when I look at the values being sent, quantity is always 1 (or whatever I set it as in the code). In other words, I can't change the value of quantity.
<form name="AddToCartForm<?=$index?>" id="AddToCartForm<?=$index?>" action="[cartaddress]" method="post">
<input type="hidden" value="1" name="insert" />
<input type="hidden" value="<?=$subcategory['Name'];?>" name="category" />
<input type="hidden" value="<?=$item['ProductNumber'];?>" name="prodnumber" />
<input type="hidden" value="<?=$item['Name'];?>" name="prodname" />
<input type="hidden" value="<?=$item['Price'];?>" name="prodprice" />
<input type="hidden" value=".10" name="handling"/>
<input type="hidden" value="10" name="weight" />
<p><?=$item['Description'];?></p>
<p><strong>Quantity:</strong> <input type="text" name="quantity" size="10" value="1"/></p>
<p><strong>Price:</strong> $<?=number_format($item['Price'], 2);?></p>
<p>
<img onclick="document.getElementById('AddToCartForm'+<?=$index?>).submit();" style="cursor:pointer;" src="images/cart_button.png" width="100" height="111" alt="add to cart" />
</p>
</form>
(If I use a submit button, the quantity goes through.)
You can use <input type="image"> instead of <img>. It acts like submit button.
Your onlcick merely submits, it doesn't do anything to change the value of quantity...so it's doing what you told it to. Before submitting you need to read the value of quantity, add 1 to that, and write the new value back to quantity.
Although the solution is already given, I think I got the cause of the problem:
document.getElementById('AddToCartForm'+<?=$index?>).submit();
I think the 'onclick' submits the wrong form. Would it also work if you changed it to document.getElementById('AddToCartForm<?=$index?>').submit();?