Develop Reference

Change textbox value and button name when the form is submitted

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.

javascript -- capturing the value entered to use elsewhere

I have an image on the page.
When clicked on that, i am prompting for input and
writing that value entered on the page.
I've tried the following and some other things around it:
<form name="FORM_1" action="post">
...
<input type=text name=x >
...
<p>Click on the image to get enter the value</p>
<a href="", onClick="x=prompt('Enter a number')">
<img src='data:image/gif;base64,R0lGODhgjjhgAAgIAAgACAgICAgMDAwP8AAAD/AP//AAAA//8A/wD//////ywAAAAAIAAgAAAEkfDJSau9OOvNu//gBABJWYYXaa6JNY6ays6tBIjuq+/8fZe3XG8YhNlcCSKvxkP2gLuWMaOKrl7JKZXGPXFGXRPYuxl3seTYQ0bTpSuweBhN1dnCSRPVFlzj33AnfX5hZXyBXFprfXY5LD6MRR5Nh0aKeylTl5gpR4Mxm5WfoIsYoaaDLy4gPmuuoyFEKLO0tREAOw==' alt="Dance?" pagespeed_url_hash="2096625741">
</a>
</form>
How do I put the value of x to the form field x? What is the best way to do this?
Way too new to javascript.
TIA.
EDIT:
I am getting the entered value properly-- when i replace
x=prompt('Enter a number')
in the code with
alert(prompt('Enter a number'))
the value is there.

I'm stuck is how to put that value to the form field
Try this:
onClick="x=prompt('Enter a number'); document.getElementsByName('x')[0].value=x;"

Change the form fields to url

I need to change the form to a single link instead of post as below:
Instead of http://example.hu/search.php?product=shoes
I want the form to lead user only to http://example.hu/products/shoes
I have fixed the rewrite and everything. Only I need the help with the form in the homepage. Thanks for your help.

You need to change the form up a little. Instead of using the action parameter on <form> to send the user along, instead you'll need to drop the form tag and do some javascript trickery to make the url like you want. Here's an example that uses jquery, but it could also easily be done in vanilla JS. http://jsfiddle.net/7czFq/

The answer to my question was this:
Just go to this form action + name using javascript when submit is pressed, like this:
<form>
<div><input type="text" placeholder="Search for a something..." name="q">
<button type="submit" onclick="window.location.href = this.form.action + encodeURIComponent(document.getElementsByName('q')[0].value); return false; ">Search</button></div>
</form>
The form will send user to a URL like http://localhost.hu/search/q/

Retrieving Input Text Value

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.

how do I add to the URL in an HTML submit button click?

I have a web service I'm trying to hit, URL looks like this:
http://servername/webapp/ws/invoices/{invoiceid}
I'm trying to hit the URL with GET like so:
<form method="GET" action="/ws/invoices">
Invoice Id: <input type="text" name="invoiceid"/>
<br />
Action: <input type="text" name="action"/>
<br />
<input type="submit" name="Submit"/>
</form>
How do I dynamically append the invoice id to the URL on button click?
Example usage: The user enters the invoice id (ex. "555") and the action text (ex. "delete"), and what I want is to hit this URL ...
http://servername/webapp/ws/invoices/555
... with a form parameter action="delete".
Any help is greatly appreciated! Thanks,
Rob

You could write some Javascript to do this. Add an onsubmit attribute to the form tag. It's easiest if you add an id attribute to the invoice field, say id="invoiceid". Then write something like:
function buildUrl(form)
{
var invnum=document.getElementById("invoiceid").value;
form.action="/ws/invoice/"+invnum;
return true;
}
Disclaimer: Just wrote this code off the top of my head. If it doesn't work, let me know and I'll actually test something.