We Keep Coding

refresh external website with new form data provide with href

Folks
I am in need to construct a simple < a> tag. or another such mechanism such as < form> etc
There is a third party tool that does not takes arguments in the url.
But suppose at a certain endpoint "https://example.com/ticket" there is a form that performs a search on given tickets Number. I can head over there and manually type a ticket ID and submit the form and result is retrieved.
This tool has one input and one button
<input id="query" name="query" autocomplete="off" type="text">
<button> name="button" type="submit" class="btn"></button>
On my page I have list of tickets assign to certain users, and I am trying to construct an href link that will take the user to "https://example.com/ticket" in new window and reload the page with provide ticket ID in post method
something like following
TICKET-123
one of the option I tried is
<form action="https://example.com/ticket" method="post">
<input id="query" name="query" autocomplete="off" type="text" hidden>
<button> name="button" type="submit" class="btn" value="TICKET-123"></button>
</form>
Argument in the usr such as https://example.com/ticket?id=TICKET-123 would've been sweet, but form link does not work. what am I missing

Could you try something like this for the form sending a user to search.php
<form action="search" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
where search.php would contain the following
<?php
$ticketnumber = $_GET["ticketnumber"];
header("Location: https://example.com/ticket/$ticketnumber");
die();
?>
This would work if you just need to send users to an external site. As long as the pattern is like this. You then wouldn't need to reload the page if you can send the user to the URL correctly in the first instance.
Your question is a little vague but I think this approach could work because users then must input their ticket number instead of getting the inner text from the <a> tag. Let me know if you're looking at a different approach and please clarify how.
Also, if you didn't want to process this via PHP (I'd recommend it though because users can't see how it's done) you could go with the same form and the following
<form action="example.com/ticket/" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
Or you could use window.location.replace("https://example.com/ticket/#"); and place the ticket number where # is.

How to reset the form data in html using jquery/javascript && and also how to send the form data to an email using jquery?

I'm new to jquery
I'm working on a form data html,
now i need to reset the data on click on the reset button and also need to transfer the form data to email on click on submit button.
Can anyone help me in solving this??
Before Posting the question I have gone through the link which Pierre C. has updated and my question is different from that question and even how to add /can we add "type" attribute in anchor tag.??
here is the html:
<form id="form" method="post">
<fieldset>
<label>
<input type="text" value="Name">
</label>
<label>
<input type="text" value="Email">
</label>
<label>
<input type="text" value="Phone">
</label>
<label>
<textarea>Message</textarea>
</label>
<div class="btns">
Clear
Send
</div>
</fieldset>
</form>

To clear all the data within a form, all you have to do is add an
<input type="reset" name="reset" value="Reset"></input>
However, reset buttons are annoying and no one ever uses them, so I suggest you just leave that. With regards to sending the form, the way I would do it is write this app in ASP.NET MVC and just put the mail logic in the controller, or create an API for your app, then create an Ajax POST on the button click using the form data as API parameters.

Complete an url wtih the data given in boxes and go to that url

My workmates and I use the link below a couple of times in a day by clicking several pages to finally get this link:
http://eharita.mamak.bel.tr/imararsiv/test.aspx?f_ada=36391&f_parsel=4
What i want to do is, after test.aspx?_ada= you see 36391 this is my first number and &f_parsel= 4 this is the second one.
I want to create an HTML which consist of 2 boxes and a submit, sent button, in the very first box i want to write down a number (in the example it is : 36391) and in the second box another number (in the example it is : 4) and after that i ll click on Submit or Send button and this action will take me to the URL of
http://eharita.mamak.bel.tr/imararsiv/test.aspx?f_ada=36391&f_parsel=4
Maybe its easy or not but as a civil engineer i don't know how to make an HTML page like that.

It is quite easy, you just need a basic form.
<form action="http://eharita.mamak.bel.tr/imararsiv/test.aspx" method="GET">
<input type="text" name="f_ada" > <br>
<input type="text" name="f_parsel"> <br>
<button type="submit"> Submit</button>
</form>
You can try it out here http://jsfiddle.net/ea6heach/

<form action="http://eharita.mamak.bel.tr/imararsiv/test.aspx">
<input type="text" name="f_ada"/><br>
<input type="text" name="f_parcel"/><br>
<input type="submit" name="submit"/>
</form>
The demo doesn't work because Stackoverflow doesn't allow HTML redirecting but this is the idea of a simple form.

Following form write in particular html file.
<form action="action_page.php">
First number<br>
<input type="text" name="first_val" >
<br>
Second number<br>
<input type="text" name="second_val">
<br><br>
<input type="submit" value="Submit">
</form>
//following code write in the 'action_page.php' file.
<?php
//in the action_page.php file write following code
if(isset($_GET['first_val']) && isset($_GET['second_val'])
{
?f_ada=36391&f_parsel=4
$url = 'http://eharita.mamak.bel.tr/imararsiv/test.aspx/';
$url .= '?f_ada='.$_GET['first_val']&f_parsel['second_val'];
header('Location: $url);
}
?>

JavaScript value not set during form submit

I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.

You should do the getcitybyzip and getstatebyzip in the form onSubmit.

Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?

Alternative to an Ajax upload form nested in another form

I have an HTML form to edit the details of a person in a database system I have at my place of work. Part of the form allows the user to upload a picture of the person. However, this is giving me trouble, because I'm trying to make the form more Ajax-y by letting the user upload the picture and see it successfully uploaded before they submit the person's details to be saved. The part that's giving me trouble is that it seems to necessitate a nested form (that is, the upload form inside the details form), like so:
<form name="details">
<input name="detail1">
<input name="detail2">
<form name="pictureupload">
<input type="file" name="pic">
<input type="submit" name="upload" value="Upload">
</form>
<input type="submit">
</form>
The way I'm hoping to make it work is that the user would fill out the details of the form, select a picture and hit the "Upload" button, then do an AJAX update when the file is uploaded so that they can see the picture before pressing the final "Submit" button.
Is there a good way to have the upload form be "inside" the details form (at least in appearance on the page) but not nested inside the details form in the HTML?

You aren't allowed to have forms nested inside each other in valid HTML. Also, file uploads through XMLHTTPRequest objects (the most common AJAX technique) don't work in most browsers.
All is not lost, though. For the AJAX uploads, you will need to use an IFRAME, as presented here: http://www.webtoolkit.info/ajax-file-upload.html
The approach I would suggest for the form is to split it into three form elements. You will have a form that holds the fields before the upload form, the upload form, and the form that holds the fields after the upload form. The first form will not have any submit button. The fields in the first form are duplicated in the third form, as hidden inputs. When the last form's submit button is clicked, some javascript will run that will copy the field data from the first form into the third, so it gets submitted with the last form.
For example, your HTML might look like this::
<form name="details1">
<input id="fake_detail1" name="detail1" type="text"/>
<input id="fake_detail2" name="detail2" type="text"/>
</form>
<form name="pictureupload">
<input type="file" name="pic">
<input type="submit" name="upload" value="Upload">
</form>
<form name="details2">
<input id="detail1" name="detail1" type="hidden"/>
<input id="detail2" name="detail2" type="hidden"/>
<input id="detail3" name="detail3" type="text"/>
<input type="submit">
</form>

You can place the "nested" form in another location on the page and only show it when your user clicks on a "Upload Picture..." button.
The nested form may be initially invisible. There are some very nice popups that allow you to display the nested form over the outer form and allow the user to upload the nested form independently.
<div id="nestedform">
<form name="pictureupload">
<input type="file" name="pic">
<input type="submit" name="upload" value="Upload">
</form>
</div>
<div id="mainform">
<form name="details">
<input name="detail1">
<input name="detail2">
Upload Picture...
<input type="submit">
</form>
</div>