Enable submit button with javascript - javascript

First, i have a code that i need to know if the user has clicked on one submit button, then, i need one function to enable another submit button that is disabled by disabled="disabled".
Here's my noob function (Needs improves, does not work).
:
<script>
function EnableSend() {
if(document.getElementById("Submit_Facebook").click(); {
document.getElementById("submit").disabled = false; }
}
</script>
And now the code:
1 - Disabled Submit: (Will be enabled after user click on Submit_Facebook submit button).
<input id="submit" name="submit" type="submit" value="" disabled="disabled">
2 - Other submit that will make the disabled submit enabled.
<form method="post" class="button" action="<?=$PHP_SELF;?>"">
<input id="Submit_Facebook" name="Submit_Facebook" type="submit" value=""onclick="EnableSend()">
</form>
3 - Php part
<?php
if (isset($_POST['Submit_Facebook'])) {
echo "<script>alert('You now can proceed to step two.');</script>";
echo '<script type="text/javascript"language="javascript">window.open("#");</script>';
exit;
}?>
Well, my english is not that good, but if you guys need any detail just contact me, thanks for your attention.

jsFiddle
<input id="submit" name="submit" type="submit" value="send" disabled="disabled">
<input id="Submit_Facebook" name="Submit_Facebook" type="submit" value="" onclick="EnableSend();">
<script type="text/javascript">
function EnableSend() {
document.getElementById("submit").disabled = false;
}
</script>

You got to remove disabled attribute from input.
Something like this:
var EnableSend = function(){
$( "#submit" ).removeAttr('disabled');
};

Related

PHP 2 actions from a single Button

I am wondering how to get 2 actions in PHP from a single Button.
Attached here is an screenshot of the page:
I have the following code:
For the Submit button
<form method='POST'>
<div class="form-group">
<input type="text" name="s_amount" style='width:20%;' required>
<input type="submit" class="btn btn-primary" name="submit" value="Submit" />
</div>
</form>
<?php
$s_amount = $_POST['s_amount'];
echo $s_amount;
?>
AND for the Submit Code button
<button id="submitcode"type="button" class="btn btn-default">Submit Code</button>
<pre><code id="output">.../...</code></pre>
When the Submit code is pressed, this executes the following script
<script>
$(document).ready(function(){
$("#submitcode").on("click", function(){
ocpu.seturl("https://public.opencpu.org/ocpu/library/base/R")
//arguments
var mysnippet = new ocpu.Snippet("V_CT="+$('[name="CT"]:radio:checked').val()+"\r V_TP="+$('[name="LENGTH"]:radio:checked').val()+$('#input2').val());
//perform the request
var req = ocpu.call("identity", {
"x" : mysnippet
}, function(session){
session.getObject(function(data) {
//data is the object returned by the R function
$("#output").text(data);
});
});
})
});
</script>
What I would like to have is a single button, which not only gets the value next to the first submit button (here 12, see attached pciture) but also executes the script.
Many thanks !
try giving id to form tag and on click on submitcode button call the form using its id.
for ex.
<form method='POST'>
function(session){
session.getObject(function(data) {
//data is the object returned by the R function
$("#output").text(data);
// using form id call the form
$("#formdata").submit(); // it will simply submit the form.
});
});
<form method="post" id="formdata"> <!--assign id to form tag-->
</form>
Could finally do it very easily using js.
<input type="text" id="VTP" value="0">
and get the value in the javascript form
document.getElementById("VTP").value
# nikhil borikar: Thanks but it did not work

After submit, input text disappears and reload the page(AJAX)

Why my page reloads even I used ajax to it and it also disappears my input text after clicking the submit button. I already used show to solve it but it doesn't work.
<form method="POST" action="<?php $_SERVER['PHP_SELF'];?>">
<input type="text" name="name" id="name">
<span id="namenotif" style="color:red;"> <span>
<br>
<input type="text" name="price" id="price">
<span id="pricenotif" style="color:red;"> <span>
<br>
<input type="submit" name="submit" id="save"><br>
</form>
<script>
$(document).ready(function() {
$(document).on("click","#save",function(){
var name = $("#name").val();
var price = $("#price").val();
if(name==""){
$("#namenotif").html("Enter a name");
$("#name").show("fast");
$("#save").show("fast");
}
else if(price==""){
$("#pricenotif").html("Enter a price");
$("#price").show("fast");
$("#save").show("fast");
}else{
$.ajax({
url:"addproduct.php",
type:"POST",
data:{name:name,price:price},
success:function(data){
alert("Successful");
}
});
}
});
});
</script>
add return false to end of function, that handle click event
Two solutions:
Change the button type='submit' to type='button'
or ( and preferably )
Change the event listener to listen for the form's onSumbit event then call event.preventDefault or in jQuery, I think you just do return false in the callback.
The form is being submitted I think, because it is the default behavior of submit button to submit the form, no matter if you used ajax or not. so you can prevent the default behavior by simple adding a code in jquery. Modify the code like this:
$(document).on("click","#save",function(e){
e.preventDefault();
...............
Rest of the codes can remain same. so only prevent the default action, it should work.
Its because of type="submit"
Use
<input type="button" name="submit" id="save"><br>
Or
<a href="javascript:void(0) id="save">
or
jquery's preventDefault();

Two button submit form issue

Hi successfully made a form where there are two submit buttons.
I needed two buttons because I need each button to take the form to a different place, while get/post the information in the first form.
This is how I did it
Javascript:
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
}
<form id="form1" method="post" >
<div class="f-row">
<label for="pick">Pick-Up Address</label>
<input type="text" input name="pick" required value="<?php echo isset($_POST['pick']) ? $_POST['pick'] : ''; ?>"/>
</div>
<input type="button" onclick="submitForm('page2.php')" class="btn small color left" value="ADD ANOTHER STOP" />
<input type="button" onclick="submitForm('page3.php')" class="btn medium color right" value="Continue" />
</form>
It works, both buttons submits to the relevant pages.
But now there is one problem I can't seem to fix, previously if the form was not filled, and i clicked submit, it would ask me to fill up the required fields, now it does not anymore.
If required fields are not filled up, it still submits the form.
I need button 1 to not require required fields to be filled up, and button 2 to require it as button 2 submits the form, while button 1 brings it to a new form to fill up with other details before they submit from there.
Anyone know of a way I can sort this?
You can try this: <input type="text" name="pick" id="pick" required/> and in the javascript
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
if (document.getElementById('pick').value) {
form.submit();
}}
else{
alert('Please fill the required field!');}
You just need to use jquery to validate the form when the first button is clicked and you can use formaction attribute on the button to specify where the button should go when it's clicked.
$('document').ready(function(){
$('#btn1').on('click',function(){
var pick = $('input[type="text"][name="pick"]').val();
if(pick == ""){
alert("enter pick");
return false;
}else{
$(this).submit();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" >
<div class="f-row">
<label for="pick">Pick-Up Address</label>
<input type="text" name="pick" value="your value">
</div>
<button type="submit" formaction="page2.php" class="btn small color left" id="btn1">ADD ANOTHER STOP</button>
<button type="submit" formaction="page3.php" class="btn medium color right">Continue</button>
</form>
You could use jQuery for this.
if ($('#something').length)
This will check if there exist an element with the id 'something', but not if it is empty or which value it has.
To check this you can use:
if($('#something').val().length>0)
or
if($('#something').val() != "")
Do with it what ever is needed.
You could even add this check within your submitForm function just above the current code.
Try this:
<script>
function submitForm(action) {
var a = $("input[name=pick]").val();
if(a) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
} else {
alert('please fill the required field');
return false;
}
}
</script>
Using this way(simple way):--
<form id="myForm" name="myForm" onSubmit="encriptar_rc4();return false;">
<input type="submit" name="submitOne" value="submitOne" class="submitButton" />
<input type="submit" name="submitTwo" value="submitTwo" class="submitButton" />
</form>
<script>
$(function(){
$(".submitButton").click(function(e){
alert($(this).attr("name"));
});
encriptar_rc4();{
alert('hola');
}
});
</script>

Codeigniter doesn't return first submit name from multi form page

I have a multi form page in view:
<?php echo form_open("account"); ?>
// input fields
<input type="submit" name="change-password" value="Change Password"/>
</form>
<?php echo form_open("account"); ?>
// input fields
<input type="submit" name="change-email" value="Change Email"/>
</form>
And in controller I'm checking:
if (!empty($_POST['change-password']))
{
//
}
if (!empty($_POST['change-email']))
{
//
}
$_POST['change-password'] is always null.
So I tried to switch them places and even added third form. Whatever I do, I can't get submit name from FIRST submit form, but can get them from second, and third.
UPDATE:
I have found the bug.
I didn't mention this, but my submit buttons on forms have an id="submit-btn"
and JavaScript that prevent double submit is making all the trouble:
$("form").one('submit', function() {
$('#submit-btn').prop("disabled", true);
});
And I don't understand why, but this is another question.
Add unique hidden fields for both forms and check that fields name in method (here post) in controller.
<?php echo form_open("account"); ?>
// input fields
<input type="hidden" name="first_form" value="first_form"/>
<input type="submit" name="change-password" value="Change Password"/>
</form>
<?php echo form_open("account"); ?>
// input fields
<input type="hidden" name="second_form" value="second_form"/>
<input type="submit" name="change-email" value="Change Email"/>
</form>
if ($_POST['first_form'])
{
// inside first form
}
if ($_POST['second_form'])
{
// inside second form
}

disable a form submit button until a textarea has been populated?

can someone please help because i have tried various javascripts to get my form submit button to stay disabled until a user enters text into the textarea but nothings working.
i want the submit button to be disabled until a user enters some text. any suggestions please?
<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
<textarea id="bio" textarea name="bio" data-id="bio" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales." onKeyUp="checkWordCount();" data-required="true"><?php echo htmlspecialchars($profile['bio']); ?></textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit"/>
</form>
<script type="text/javascript">
function disable()
{
if(document.textarea.bio.value=="")
{
document.textarea.submit.disabled=true;
}
else
{
document.textarea.submit.disabled=false;
}
}
</script>
There are many things wrong with your code:
Try not to use inline javascript
your textarea onKeyUp calls a function that does not exist
you are trying to set the disabled state of the wrong element (you actually have invalid javascript)
you have some invalid html too
This is what you want:
HTML
<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
<textarea id="bio" name="bio" data-id="bio" data-required="true" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales.">
<?php echo htmlspecialchars($profile['bio']); ?>
</textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit" />
</form>
JAVASCRIPT
window.onload = function () {
document.getElementById("bio").onkeyup = checkWordCount;
checkWordCount();
};
function checkWordCount() {
if (document.getElementById("bio").value == "") {
document.getElementById("submit").disabled = true;
} else {
document.getElementById("submit").disabled = false;
}
}
Here is a working example
You are trying to disable the textarea instead of the submit button. Your code isn't valid JavaScript.
Keep the submit button disabled initially and enable it only when the textarea has something in it. Also, since you're using a placeholder for the textarea, your textarea would never be empty, so a check for
document.getElementById("bio").value = ""
would always return false unless the user changes it.
try this
<body onload="disable()">
<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
<textarea id="bio" textarea name="bio" data-id="bio" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales." onKeyUp="disable();checkWordCount();" data-required="true"></textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit"/>
</form>
</body>
<script type="text/javascript">
function disable()
{
if(document.getElementById("bio").value=="")
{
document.getElementById("submit").disabled=true;
}
else
{
document.getElementById("submit").disabled=false;
}
}
</script>

Categories

Resources