Im trying to create a very simple clock in/clock out system. Try to see the html code below.
<form>
<input type="text" value="work" name="work" />
<input type="submit" value="Clock In" name="submit" />
<?php 'some php code here' ?>
</form>
What I wanted to achieve is that whenever I click the submit button and form submits the data, the value of the textbox and the submit button would change. When you click it for the first time both would change to 'break/Clock Out', then when clicked again it would change to 'work/Clock In'. How is it possible? I believe it would require js but have no idea of the code yet. Tried searching anywhere but no luck. Hoping someone here would be able to help.
Thanks in advance.
I don't know if I've correctly understood.
You don't need to make a post submission with this form?
Just change values?
$("form").submit(function(e){
e.preventDefault();
if($("input[name='work']").val()=='work')
{
$("input[name='work']").val('break');
$("input[name='submit']").val('Clock out');
}
else
{
$("input[name='work']").val('work');
$("input[name='submit']").val('Clock in');
}
});
Jquery needed in this example obviously.
Related
<form id="login" method='post' action='membership.php'>
<b>Email</b><br><br>
<input class="form" type='text' name='email2' id='email2'><br><br>
<b>Password</b><br><br>
<input class="form" type='password' name='password2' id='password2'><br><br>
<input class="submitborder" id='submit2' type='submit' name='submit2' value='Submit'>
</form>
<script>
$(document).ready(function () {
$("#submit2").on("click", function() {
$(this).attr("disabled", "disabled");
Submitting();
});
});
function Submitting() {
setTimeout('$("#submit2").removeAttr("disabled")', 10000);
}
function PreventDouble(event) {
event.preventDefault();
}
</script>
<?php
echo "<a href='construction.php' onclick='PreventDouble(this)'></a>";
?>
I've read a few forum pages etc ... and they suggest disabling using jQuery or AJAX. When I disable though, I doesn't submit the form data anymore. But will disable the button accordingly.
For the hyperlink, because it sends user to another page, then disables, it's hard to judge if onclick='PreventDouble(this);' is working.
I also would like to apologize as I am a newb when it comes to Javascript, jQuery, or AJAX.
UPDATE: May I also mention I'm newb at this forum posting. Um. One last note is the disabling of form button. I use this code in another area of my website that doesn't click properly on computer. As if it seems to be on a wait before it processes my Javascript/jQuery/AJAX scripts? I dunno.
I admit defeat to Javascript/jQuery/AJAX x_x
I may be wrong as I am not familiar with PHP, but it doesn't look like the PreventDouble(this) method get called upon form submission. You can try putting the function inside the click event handler instead. Or better yet, just put the event.preventDefault() line there.
I want to ask about "multiple form actions with one submit button"
The form actions will be 2 places, Zoho CRM and Google form.
I have tested but the lead didn't save and can't go to thank you page.
I'm not sure if change to this script is correct or not:
function SubmitForm()
{
if(document.forms['leadform'].onsubmit())
{
showResultDiv();
document.forms['leadform'].action='https://crm.zoho.com/crm/WebToLeadForm';
document.forms['leadform'].submit();
document.forms['leadform'].action='https://docs.google.com/forms/d/e/1FAIpQLScQzsovLE8zusA88V7VTKQ5ACVYkbg0PWQmTsPd1NKGum8Tsw/formResponse';
document.forms['leadform'].submit();
}
return true;
}
The type of button is submit:
<input class="button" type="submit" value=">> Submit" onclick="javascript: return SubmitForm()">
I think the SubmitForm() will never be executed. the form has been submitted,and go to another page.
EDIT:
I guess that you are a freshman for web development. this page can help you know about <form> and <input type='submit'>
Meteor newbie.
I am trying to experiment with a really simple form in meteor. Basically, I have a textbox, a submit button and a checkbox.
When I click the submit button, I want to see the following returned into my browser console.
Form submitted
submit
what ever is typed into the checkbox
and the status of the checkbox (I have 2 methods currently)
So far, all is ok, with the exception of the checkbox status. i have tried 2 methods, 1 always returns on and the other returns undefined.
I have been looking at this for days, and just cannot get it. If anyone can help, that would be really appreciated. I think I am close, just need a proper way to read the checkbox.
Here is the code I have sofa...
html file
<---
<template name="InputForm">
<form>
<input type="text" name="inputa">
<input type="submit" value="Submit">
<input type="checkbox" name="checkboxstatus" id="checkboxa" checked="{{isChecked}}"/> Click Me
</form>
</template>
--->
JS file
<---
Template.InputForm.events({
'submit form': function(){
event.preventDefault();
console.log("Form submitted");
console.log(event.type);
var inputAVar = event.target.inputa.value;
console.log(inputAVar);
var checkboxAVar1 = event.target.checkboxstatus.value;
console.log(checkboxAVar1);
var checkboxAVar2 = Session.get("isChecked");
console.log(checkboxAVar2);
//console.log(isChecked);
}
});
--->
Any help would be greatly appreciated, I don't think I will be able to sleep until I can read the status of this checkbox.
Steve
For the following HTML
<form>
Enter hash here: <input type="text" name="hash">
<button type="submit" formaction="/tasks/">Retrieve Url</button>
</form>
How can I re-direct the user to /tasks/A where A = whatever the user typed in the "hash" <input> box?
Thanks
Take a look at this post will help.
It do exactly the same thing you want with example.
You'd need to either prevent the submit's default action (event.preventDefault();), or change the button from type="submit" to type="button", then use JavaScript to set the form's action. Here's some jQuery that could do the job for you:
$('button').click(function() {
//set the form action
$('form').attr('action', '/tasks/'+$('input[type="text"]').val())
//submit the form
.submit();
});
See a working example at http://jsfiddle.net/jhfrench/BQ8MW/
You could use a temporary post and redirect. For example:
<?php
if(isset($_POST['hash'])){
header("Location:/tasks/" . $_POST['hash']);
}
?>
Or if you want you could use AJAX to collect the value and then redirecting without the refresh.
I'm having a strange behaviour with this code:
<script type="text/javascript">
function get()
{
alert("gggg");
jQuery.get (
"http://localhost:8080/c/portal/json_service",
{
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : document.getElementById("nombre")
}
);
}
</script>
<div>
<form>
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="button" value="Submit" onClick="javascript:get()"/>
</form>
</div>
Liferay portal gets blocked when the button "Submit" is pressed. The pop-up with the message "gggg" is showed, but after click ok on it, the page becomes blocked.
If I remove the line 'param : document.getElementById("nombre")', it doesn't block.
Can anyone explain me where is the error, or the reason of this behaviour?
Thanks in advance,
Rafa
The problem is that you're trying to pass an entire DOM element as the value for param, which jQuery isn't going to like. What type of element has ID nombre, and what property from that element do you want? If it's some kind of input, you likely want the value property, so you'd do:
param : document.getElementById("nombre").value
Updated Answer:
Thinking this through a little more, you should probably do this in a different way altogether. You're sending the data when the user clicks on the submit button, but remember if a user hits enter while typing in the input text box the form will submit but your code will not catch that.
A more robust solution would be to do it this way instead:
<div>
<form id="nombre_search">
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="submit" value="Submit"/>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#nombre_search").submit(function(){
$.get("http://localhost:8080/c/portal/json_service", {
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : $("#nombre").val()
});
return false;
});
});
</script>
Changes to your code:
Added an id to the form.
Made the submit button a submit button instead of just a button.
Placed code inside $(document).ready block.
Code runs when form is submitted not when button is clicked.
Hope this helps,
Sandro