I want to parse values of parameters from URL generated by my contact form (GET method and forced to use JQuery instead of pure JS). It's working inside the console, values are read correctly. I have two problems that come from not being proficient in Jquery and JS.
-
I can't find a reliable method of putting the values I have into the webpage (for example, into table). I want to have a table so the user can see what they had entered in the contact form.
-
I have checkboxes inside my form and it's causing a problem with reading the values from the URL. If I check two of the four boxes, only one of them is read and printed into the console. I need to read all of the information that the user provided. I guess I need arrays but how to use them in this case?
An example of a generated URL.
localhost:63342/2018-11-13-html/form_sent.html?phone=4325325235&adress=testadress&order=book1&order=book2&deliverydate=datadostawy&deliverymethod=chinamail&agree=on
My current code for reading and logging the URL parameters:
<section>
<script>
$.urlParam = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)')
.exec(window.location.href);
if (results == null) {
return 0;
}
return results[1] || 0;
};
console.log($.urlParam('phone'));
console.log($.urlParam('adress'));
console.log($.urlParam('order'));
console.log($.urlParam('deliverydate'));
console.log($.urlParam('deliverymethod'));
</script>
</section>
And my form:
<section>
<header><h2>Contact</h2></header>
<form style="width:500px" action="form_sent.html" method="get">
<fieldset>
<legend>Contact form:</legend>
<fieldset>
<legend>Contact info:</legend>
<span class="label" style="width: 50px">Phone: </span>
<input name="phone" type="tel" required="true"/><br/>
<span class="label" style="width: 50px">Adress: </span>
<input name="adress" type="text" required="true"/><br/>
</fieldset>
<fieldset>
<legend>Order:</legend>
<span class="label" style="width: 100px">Books:</span>
<br>
<input type="checkbox" name="order" value="book1"/>Book1<br/>
<input type="checkbox" name="order" value="book2"/>Book2<br/>
<input type="checkbox" name="order" value="book3"/>Book3<br/>
<input type="checkbox" name="order" value="book4"/>Book4<br/>
</fieldset>
<fieldset>
<legend>Delivery date:</legend>
<span class="label" style="width: 50px">Date: </span>
<input type="text" name="deliverydate" required="true"/><br/>
</fieldset>
<fieldset>
<legend>Delivery method:</legend>
<input type="radio" name="delivery" value="fedx" />FEDx
<input type="radio" name="delivery" value="chinamail"/>China Mail
<input type="radio" name="delivery" value="personal" checked="true"/>In person<br/>
</fieldset>
<input name="agree" type="checkbox" required="true"/> I agree to contact terms<br/>
<input type="reset" value="Reset form"/><input type="submit" value="Send form"/>
</fieldset>
</form>
</section>
Aucun commentaire:
Enregistrer un commentaire