<form id="form2" name="form2" action="">
<div class="form_colour" id="formcolour"><img src="../Images/red_car.jpg" alt="" width="370" height="124" />This car is
<label for="textarea"></label>
<input name="text_1" type="text" class="form_colour" id="text_1" />
</div>
<p> </p>
<p><img src="../Images/green_car.jpg" width="370" height="124" />This car is
<input name="text_2" type="text" class="form_colour" id="text_2" />
</p>
<p>
<img src="../Images/Yellow_car.jpg" width="370" height="124" />This car is
<input name="text_3" type="text" class="form_colour" id="text_3" maxlength="8" />
</p>
<p>
<input name="confirm" type="button" class="form_colour" id="confirm" value="Confirm" />
</p>
</form>
I currently have the following code for a form which has 3 text fields in them(Code for the form is above this and the Javascript code is below this text).
My aim is based on the input of the text values the user will either get a message and stay on the page or if they are correct get a message and go to another page. I did this previously for drop down lists. and all i did was just change the variables from the drop down list names to the text field names. Now when i run this, nothing happens, do i need to do something more ???
</script>
<script type="text/javascript">
function checkValues() { // this line must be within the script tags
var a = document.form2.text_1.value;
var b = document.form2.text_2.value;
var c = document.form2.text_3.value;
if (a == "red" && b == "green" && c == "yellow"){
alert ("Correct you have won press OK for your Reward!")
window.location.href = "Reward.html"; // redirect to new page
}
else {
alert ("Not right Please try again!");
window.location.href = "Money_Match.html";
}
}
</script>
</script>
you haven't called your script on button click, check working example here http://jsfiddle.net/3CgcH/7/
you need to specify onclick handler for button which will call checkValues function
<input name="confirm" type="button" class="form_colour" id="confirm" value="Confirm" onclick="checkValues();" />
more proper way would be to use addEventListener and attachEvent to register events on html elements
Related
I have a form in which i use multiple Checkbox. On Checkboxes i use JavaScript for validation If I checked all checkbox, it proceeds ahead otherwise it show an alert message.
My code is working Well
Problem
Because i have Two Button on my form and they have different functionality. I want to post value of Button on my action page
My Code goes here
<script>
function letter_submit(){
var pr = document.getElementsByName('pr'),
i = 0;
var allAreChecked = true;
for( ; i < pr.length; i++ )
{
if( pr[i].checked=='' ) {
allAreChecked = false;
}
}
if (!allAreChecked) {
alert("Please Check All Checkboxes");
exit;
} else {
alert("All OK");
document.getElementById("approve_letter").submit();
}
}
</script>
<form action="letter_approve_action.php" id="approve_letter" name = "approve_letter" method="POST" >
<input type="checkbox" name="pr" id="pr" value="" /> NL is appropriately addressed.
</br>
<input type="checkbox" name="pr" id="pr" value="" /> Checked Press Release
</br>
<input type="checkbox" name="pr" id="pr" value="" /> Applicable Methodology is rightly Marked
</br>
<input type="checkbox" name="pr" id="pr" value="" /> Respective Sector Study on Website is Updated Within Last 12 Months.
</br>
<button type="button" name="btn_submit" id="btn_submit" value="Approve" onclick="letter_submit();">Approve</button>
<button type="button" name="btn_submit" id="btn_submit" value="Re - Submit" />Re-Submit</button>
</form>
On action page i use
echo $submit = $_POST ['btn_submit'];
and i got an error
Notice: Undefined index: btn_submit in C:\xampp\htdocs\Work_Que_Backup\login\pacra-all\w_q\nl\letter_approve_action.php on line 26
You may use <button> tag.
For example:
<form method="post">
<input type="text" name="myText" value="some text here..."/>
<button type="submit" name="myButton" value="buttonValue">Submit</button>
</form>
The label tht is displayed is "Submit" but you can access your button value from the server with a different value.
It will be accessible with php on server side as:
echo $_POST['myButton']; //buttonValue
The problem in your code is that your button is of type "button", and you trigger the POST by javascript - so the value for btn_submit is never set.
Change the button type to "submit" and move the event handler onclick=... to the form tag onsubmit=.... In your javascript function, you can the cancel the submit by returning false.
I'm making an html page with images, where the user clicks their image, to log in to their invoice page. This is what I have so far:
<script type="text/javascript">
function showHideForm(formid)
{
var _form = document.getElementById(formid);
_form.style.display = (_form.style.display != "block") ? "block" : "none";
return false;
}
</script>
<p>
<a href="#" onclick="return showHideForm('hiddenForm1');">
<img src="" width="150" height= "150" />
</a>
</p>
<form id="hiddenForm1" style="display: none;" method="post" action="user1_login.php">
<input type="text" name="user" placeholder="Name" required /><br />
<input type="text" name="pass" placeholder="Password" required/><br />
<input type="submit" name="Submit" value="Submit" />
</form>
<p>
<a href="#" onclick="return showHideForm('hiddenForm2');">
<img src="" width="150" height="150" />
</a>
</p>
<form id="hiddenForm2" style="display: none;" method="post" action="user2_login.php">
<input type="text" name="user" placeholder="Name" required /><br />
<input type="text" name="pass" placeholder="Password" required/><br />
<input type="submit" name="Submit" value="Submit" />
</form>
It works nicely except that if you click on other images, you get several instances open at the same time.
Is it possible to tack a bit of code to the beginning of the javascript to close any open instances before it runs the code to open a new form?
The logic is simple, have a class for openedform. On click event remove that class from the existing opened forms and add the class to the currently clicked form. Here is how to do it with jquery.
function showHideForm(formid)
{
// var _form=$("#"+formid); (in jquery)
var _form =document.getElementById(formid);
//select all existing opened forms and remove the class
$('.openedForm').removeClass('openedForm');
//add the openedForm class to the currently clicked
$(_form).addClass('openedForm');
return false;
}
Add the following code into your css file.
.openedForm
{
display:block !important;
}
If you need to alter the css of elements using javascript try to use classes. This way you make your javascript code cleaner and readable and your styling logic stays separated from the main logic.
Avoid using inline styles as much as possible.
Working demo:
https://jsbin.com/nigivu/edit?html,css,js,output
I am trying to open another form to get inputs after submitting one. In my code, I want to edit a node in my array and by getting the first input I make the program find my node to edit. If the input is valid -the input is one of the nodes in my array-, I want it to open another on the same place as the first one. How can I do that?
<p>
EDIT AN EXISTING NODE
</p>
<form action="#" style="display: none;" id="editNodeForm">ID or Name:
<input type="text" id="toEdit" size="20" style="width: 50%; height: 2em;">
<br />
<br />
<button type="button" class="myButton" form="editNodeForm" style="width: 50%;" onclick="editExistingNode();">Submit</button>
<br />
<br />
</form>
What I would do is put all the fields inside a form, and separate the steps with divs.
On page load, you hide all the steps (except the first one). After clicking the button, the next step gets displayed.
The last step won't have a button, but a submit button, making it fire the form.
$(function() {
$('form>div:not(:first)').hide(); /* hide all but first step */
$('form').on('click', 'button', function(e) {
e.preventDefault();
var currDiv = $(this).parent() ,
nextDiv = parent.next('div');
$(currDiv).hide();
$(nextDiv).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
Step 1 / 3
Add some value: <input type="text" /><br />
<button>Next step</button>
</div>
<div>
Step 2 / 3
Add some value: <input type="text" /><br />
<button>Next step</button>
</div>
<div>
Step 3 / 3
Add some value: <input type="text" /><br />
<input type="submit" value="Save form" />
</div>
</form>
Try to replace the the line
nextDiv = parent.next('div');
with:
nextDiv = $(this).parent().next('div');
in the code of the comment above, if it's not working
I have 4 textboxes and a submit button in my web page.
Suppose the user enters data in 2 fields and then clicks the submit button.
I now want to know in which textbox the cursor was located just before the submit button was clicked.
Any idea on how to do this in Javascript?
You're looking for document.activeElement, which returns the currently focused element.
Your question does specifically say in javascript, but FWIW here is another option in jQuery:
Working jsFiddle here
HTML:
<input id="in1" type="text" /><br />
<input id="in2" type="text" /><br />
<input id="in3" type="text" /><br />
<input id="in4" type="text" /><br />
<input type="button" id="mybutt" value="Submit" />
jQuery:
var inFocus = false;
$('input, textarea').focus(function() {
inFocus = $(this).attr('id');
});
$('#mybutt').click(function() {
alert('Cursor was last in element id: ' + inFocus);
});
you can use document.activeElement
here is the simple example for the same.
<head>
<script type="text/javascript">
function GetActive () {
if (document.activeElement) {
var output = document.getElementById ("output");
output.innerHTML = document.activeElement.tagName;
}
}
</script>
</head>
<body onclick="GetActive ();">
Click anywhere on the page to get the active element
<input id="myInput" value="input field" />
<button>Sample button</button>
<div id="output"></div>
</body>
I have this code
<html>
<include jquery>
<script>
function crea()
{
var html = '<form method="get" id="popUpForm" name="popUpForm" action="form_ricorda_dati.php"><hr /><input type="hidden" name="mio" value="1" />input3<input type="text" name="input3" value="" /><br />input4<input type="text" name="input4" value="" /><br /><input type="submit" id="11" value="Procedi" /></form><br />submit';
var div = document.getElementById('cont');
div.innerHTML = html;
}
function prova()
{
$('#popUpForm').submit();
}
</script>
<body>
< a href="#" onClick="crea()">lancia funzione JS</a><br /><br />
<div id="cont"></div>
</body>
</html>
This code:
When I click on <a href="#" onClick="crea()"> it "shows" the form
into the <div id="cont">
Way 1: When I click on <a href=""
onClick="prova()">submit</a> it calls $('#popUpForm').submit();
Way 2: Click on <input type="submit" id="11" value="Procedi"
/>
Problem:
If I click <input type="submit" id="11" value="Procedi" /> I
reload the page and see correct query string (form action="get"). In
the reloaded page, if I "show" the form and click on the input I see the last
input (browser autofill okay).
If I click submit, after, I
don't see the query string. In the reloaded page if I "show" the form and
click on the input I don't see the last input (browser autofill fails).
(I see this problem in Chrome and IE, but not in Firefox.)
Goal
The browser autofill should always show.
The problem might be that the HTML form you are creating with JavaScript was not in the browser's DOM at the moment the page was loading. You can fix this by placing the form's HTML into your body tag to be rendered in the DOM, and hide it with JavaScript until a user clicks the crea link.
The problem number 2 seems to be that your link ( <a href="" onclick="prova()"... ) might go to the url given in the HREF attribute. Since that attribute is empty, your page goes to itself.
To make things easier, you should keep your HTML form out of your JavaScript logic. Also since you are using jQuery, I have converted your functions to binds.
Working example in JSFIddle.
<html>
<head>
<script type="text/javascript" src="url/to/jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
var form = jQuery( '#form' ),
crea = jQuery( '#creaLink' ),
prova = jQuery( '#provaLink' );
form.hide();
crea.on( 'click', function(){
form.show();
});
prova.on( 'click', function(){
form.submit();
});
});
</script>
</head>
<body>
lancia funzione JS
<br />
<br />
<div id="form">
<form method="post" id="popUpForm" name="popUpForm">
<hr />
<input type="hidden" name="mio" value="1" />
input3
<input type="text" name="input3" value="" />
<br />
input4
<input type="text" name="input4" value="" />
<br />
<input type="submit" id="11" value="Procedi" />
</form>
<br />
submit
</div>
</body>
</html>
It might not be a good idea to depend on browser's autofill as different browsers may have different behaviors. Now if I am correct in assuming that you want the values to be present in the fields even after the form data is received and processed at the server, then I would suggest you to make use of AJAX techniques. Send the form data in the background to the server and show only the result once you receive the response.