How to make a button disable/enable on click? - javascript

I have html which is something like, not exactly like this, but just to give you an idea.
<input type="text" disabled="disabled" name="ip" />
<input type="text" name="name" />
<input type="text" name="email" />
<input type="submit" value="send" />
the IP field is disabled, I want to put a button right next to it, which will enable the field without refreshing the page.
Can you please help me do this?
Thanks in advance

<input type="text" disabled="disabled" name="ip" id='ip' />
<input type="button" name="control" id="control" />
<input type="text" name="name" />
<input type="text" name="email" />
<input type="submit" value="send" />
Now put jquery code at end of file
$( "#control" ).click(function() {
$('#ip').toggleDisabled();
});

try this one:
<input type="text" disabled="disabled" name="ip" id="ip" />
<input type="button" value="Refresh" onclick="$('#ip').attr('disabled',false);">
<input type="text" name="name" />
<input type="text" name="email" />
<input type="submit" value="send" />

Give ID for your textbox.
<input type="text" disabled="disabled" name="ip" id="YourID"/>
And in jquery :
$(document).ready(function(){
$('#YourButtonID').click(function(){
if($('#YourID').prop('disabled'))
$('#YourID').prop('disabled', false)
else
$('#YourID').prop('disabled', true)
//Do nothing if not required.
});
})

Consider your buttons as shown below:
<input type="text" disabled="disabled" name="ip" /> <input type="button" id="myButton" />
Now, on clicking button right next to it you have to remove the disabled attribute of ip button in jquery as:
$("#myButton").click(function(){
$("input[name='ip']").removeAttr('disabled');
});
That's it..!!

You can use attr("disabled",false) to remove disabled attribute
Demo

you can try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function enable(){
$('#ip').prop("disabled",false);
}
</script>
<input type="text" disabled="disabled" name="ip" id="ip" />
<input type="button" value="Refresh" onclick="enable();">

Check this javascript for a working example and a possible solution using javascript.
Check this jQuery 1.6+ using jQuery 1.6+.
If you want to use jQuery 1.5-, just change prop by attr.
Hope it useful!

Related

How can I show and hide the form in HTML page?

I have an html form which is supposed to appear only after clicking a submit button. I have added simple JavaScript to display the same on click.
Intention is show the update form on click of the button above it. Can anyone help me out to find what I did wrong?
function showForm() {
alert('Form has been submitted');
document.getElementByClass(UpdateForm - section).style.display = 'block';
}
.UpdateForm-section.hidden {
display: none;
}
<input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" />
<br><br><br>
<!-- Update details form here -->
<div>
<form action="" method="post" class="UpdateForm-section">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button" />
</form>
</div>
Try the below changes in your code.
In CSS:
remove .hidden from .UpdateForm-section.hidden
In JS:
use querySelector instead of getElementByClass and wrap the name of the class in quotes.
Wokring code:
function showForm() {
alert('Form has been submitted');
document.querySelector('.UpdateForm-section').style.display = 'block';
}
.UpdateForm-section {
display: none;
}
<input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" />
<br><br><br>
<!-- Update details form here -->
<div>
<form action="" method="post" class="UpdateForm-section">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button" />
</form>
</div>
I suggest you to have the following approach: define a desired style when your element will be shown:
.UpdateForm-section { // here we set the default style of the div -> not displayed
display: none;
}
.UpdateForm-section.active { // here the CSS selector is stronger, so it will override the previous statement
display: block;
}
Then in your javascript, you just add the "active" class to the element when you want it to show:
function showForm() {
alert('Form has been submitted');
document.querySelector(".UpdateForm-section").classList.add('active'); // Prefer to use an id to select an unique element to avoid miss coding
}
You just need to save your form in a variable, and you can easyly change it after it. You will need to remove .hidden from your css.
You need to use form[0], because when you make getElementsByClassName, you are getting an array:
function showForm() {
alert('Form has been submitted');
var form = document.getElementsByClassName("UpdateForm-section");
form[0].style.display = 'block'
}

I need a script to generate time in sending form

I need a code so I can place a date on this infusion form so I can track the day they submit it.. I think there is an onClick code I found but it did not work.
<form class="infusion-form" action="https://xxxx.infusionsoft.com" method="post">
<input name="DATE" type="hidden" value="">
<p>*First Name:</p>
<input id="inf_field_FirstName" class="default-input" name="inf_field_FirstName" type="text" />
<p>*Last Name:</p>
<input id="inf_field_LastName" class="default-input" name="inf_field_LastName" type="text" />
<p>*Email Address:</p>
<input id="inf_field_Email" class="default-input" name="inf_field_Email" type="text" />
<p>*Primary Phone No:</p>
<input id="inf_field_Phone1" class="default-input" name="inf_field_Phone1" type="text" />
<p>*Address:</p>
<input id="inf_field_Address2Street1" class="default-input" name="inf_field_Address2Street1" type="text" />
<p>*City:</p>
<input id="inf_field_City2" class="default-input" name="inf_field_City2" type="text" />
<p>*State:</p>
<input id="inf_field_State2" class="default-input" name="inf_field_State2" type="text" />
<input id="Submit" class="btn button inf-button" name="Submit" type="submit" value="Submit" />
</form>
Thanks
Here is a simple method to achieve what you've asked for. The date format is edited to toISOString as suggested by Bakudan in the comments above.
Also mentioned in the comments it is better to set the time of the submission on the server, this way you can make sure the time on the computer is current and avoid a user falsifying the time.
window.onload = function(){
var dateStr = new Date().toISOString();
var dateInput = document.getElementById('submissionDate');
dateInput.value=dateStr;
}
<input id="submissionDate" type="hidden" name="submissionDate" value="">

JQuery solution for AWeber Subscriber Form - No Redirect

How do i add some form of JQuery solution to the below code so that users are using the redirect but instead have a nice response back saying 'Thanks for subscribing'?
Also, is this the best way - The JQuery solution? Or should i try JS
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1337" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="blah" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="1237" />
<input type="hidden" name="meta_adtracking" value="blah" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<input type="text" name="name" autocomplete="off" required placeholder="First name">
<input type="text" type="email" name="email" required placeholder="Your Email">
<input type="submit" name="submit" value="Subscribe">
</form>
Edit - But have it be presentable, i.e. I want to put the text within a DIV, not Alert the user with a pop up or redirect them to my page.
$("form").submit(function(){
alert("Thanks for subscribing");
});
edit ##
Stack overflow jQueryUI Modal confirmation dialog on form submission

Link button with data in url

I would like to make a button link to another page. Furthermore, I would like to include some data in the url. The onclick method works, but I was trying to do it without JavaScript. The form submit method almost works, but does not send the data (id1 and id2). Any suggestions? Is it best to use JavaScript? Thank you
<input type="button" value="Clickable Button - onclick" onclick="window.location.href='http://www.google.com?id1=123&id2=345'" />
<form action="http://www.google.com?id1=123&id2=345"><input type="submit" value="Clickable Button - Submit" /></form>
You need to add some hidden fields to your <form>:
<form action="http://www.google.com">
<input type="hidden" name="id1" value="123" />
<input type="hidden" name="id2" value="345" />
<input type="submit" value="Clickable Button - Submit" />
</form>
Below is a non-js solution:
<form method="get" action="http://www.google.com">
<input type="hidden" name="id1" value="123" />
<input type="hidden" name="id2" value="345" />
<input type="submit" value="Clickable Button - Submit" />
</form>
<form action="http://www.google.com">
<input type="submit" value="Clickable Button - Submit" />
<input type="hidden" name="id1" value="123" />
<input type="hidden" name="id2" value="345" />
</form>
A better alternative, though, is to use a normal link and use CSS to style it look like a button if necessary. Links Want To Be Links.

How do I stop this.form.reset() from firing my form action?

Okay here is my issue. I am using custom graphics for my submit/reset form buttons, but as soon as you press reset the form action is committed and I do not want that to happen and I have been searching the internet for a answer without any luck. I am including the form code as well in hopes as I might of just missed something.
<form class="contact" name="con_form" action="../includes/mailer.php">
First Name*: <input type="text" name="first_name" value="" /><br />
Last Name*: <input type="text name="last_name" value="" /><br />
Contact Number*: (<input type="text" name="area_code" value="" size="3" />) <input type="text" name="first_three" value="" size="3" /> <input type="text" name="last_four" value="" size="4" /><br />
Email Address*: <input type="text" name="email" value="" /><br />
I would like to*:
<select>
<option>--- Select One ---</option>
<option>Comment</option>
<option>Suggestion</option>
<option>Inquiry for employment</option>
</select><br />
Comment or Suggestion: <textarea size="1024"></textarea><br /><br />
<input type="image" src="images/sub_idle.gif" onsubmit="../index.php" alt="Submit" /> <input type="image" onclick="this.form.reset()" src="images/res_idle.gif" alt="Reset" />
</form>
input type="image" defines the image as a submit button. If you just want it to be a clickable image that triggers some javascript, there's no need to make it an input at all.
the <input type="image" input is actually a submit button
I would try this as a starting point: (not the best way probably)
<img onclick="this.form.reset();" src="images/res_idle.gif" alt="Reset" />
Don't use input type=image, use an A-tag with a CSS background.
.buttonImage {
background-image:url(/images/sub_idle.gif);
height:20px;
width:60px;
display:block
}
You can change the type to "button" and apply a css class to the button to customize the button.
<input type="button" onclick="this.form.reset()" class="resetbutton" />

Categories